Vue

  • Vue已关闭评论
  • 114 次浏览
  • A+
所属分类:Web前端

# VUE2

**渐进式JavaScript框架**

通过AJAX请求将从Web服务器获取的数据显示到界面上

## 搭建开发环境

1)下载Vue.js库

https://cn.vuejs.org/

2)用<script>引入Vue.js库

`<!--引入Vue-->`

<script type="text/javascript" src="../js/vue.js">

</script>

1.想让 Vue 工作,就必须创建一个 Vue 实例,且要传入一个配置对象

2.root 容器里的代码依然符合 html 规范,只不过混入了一些特殊的 Vue 语法

3.root 容器里的代码被称为 Vue 模板

4.root 容器和 vue 实例是一一对应

5.页面中有且只有一个 Vue 实例

6.(xxx} 中的 xxx 要写 js 表达式,且 xxx 可以自动读取到 data 中的所有属性

7.一旦 data 中的数据发生改变,那么页面中用到该数据的地方也会自动更新

## Vue插值和指令

**Vue插值是用于解析标签体内容**

* 语法

  {{xxx}}

  xxx是js表达式,且可以直接读取到data中的所有属性

**Vue指令是用于解析标签(标签属性,标签体内容,绑定事件等)**

* 语法

  V-xxx:标签="xxx"

  xxx是js表达式,且可以直接读取到data中的所有属性

  * 简化指令语法

    a后跟: 说明已被Vue绑定

<body>

```html
<div id="root">
    <h1>插值语法</h1>
    <h3>你好,{{name}}</h3>
    <hr>
    <h1>指令语法</h1>
    <a v-bind:href="school.url" x="hello">点我去{{school.name}}学习1</a>
    <!--简化指令语法-->
    <!--a后跟 : 说明已被Vue绑定-->
    <a :href="school.url">点我去{{school.name}}学习2</a>
</div>
```

    <script>
        new Vue({
            el:'#root',
            data:{
                name:'3DG',
                school:{
                    name:'3DG',
                    url:"https://www.cnblogs.com/3-DG/"
                }
            }
        })
    </script>

</body>

## Vue数据绑定

### 单向绑定

单向绑定(v-bind)指数据只能从data流向页面

```html
<div id="root">
        <!--单向绑定-->
        <h1>单向绑定</h1>
        <input type="text" v-bind:value="name"><br/>
        <!--简写-->
        <input type="text" :value="name"/><br/>
```

```html
<script>
        var Vue=new Vue({
            el:'#root',
            data:{
                name:'3DG'
            }
        })
    </script>
```

### 双向绑定

双向绑定(v-model)是指数据不仅能从data流向页面,还可以从页面流向data

```html
 <!--双向绑定-->
        <h1>双向绑定</h1>
        <input type="text" v-model:value="name"><br/>
        <!--Vue双向绑定一般无简写,但此处特例(不建议使用)-->
        <input type="text" v-model="name"><br/>
```

```html
<script>
        var Vue=new Vue({
            el:'#root',
            data:{
                name:'3DG'
            }
        })
    </script>
```

## MVVM模型

Model View ViewModel

M:模型(Model)对应data中的数据

V:试图(View)模板

VM:视图模型(ViewModel)Vue实例对象

## Vue事件处理

### 绑定事件

使用v-on:xxx或@xxx(xxx是事件名)

```html
 <div id="root">
        <h1>欢迎来到{{name}}</h1>
        <!--无参数事件绑定-->
        <button v-on:click="showInfoHandler">点我提示信息1</button>
        <!--简写-->
        <button @click="showInfoHandler">点我提示信息1</button>

        <!--有参数事件绑定-->
        <button @click="showInfoHandler2($event,66)">点我提示信息2</button>
        <button @click="showInfoHandler3(66)">点我提示信息3</button>
    </div>
```

Vue绑定事件处理

* 事件的回调函数需要配置在methods对象中

```html
<script>
        new Vue({
            el:'#root',
            data:{
                name:'3DG'
            },
            methods:{//定义Vue的所有函数
                showInfoHandler(event){ //事件绑定处理函数(event参数是默认的)
                    console.log(event.target.innerText)
                    console.log(this.name) //this表示当前vue对象
                    alert('同学你好')
                },
                showInfoHandler2(event,number){
                    console.log(event,number)
                    alert("同学你好")
                },
                showInfoHandler3(number){
                    console.log(number)
                    alert("同学你好")
                }
            }
        })
    </script>
```

#### 事件修饰符

```html
<!--Vue中的事件修饰符
    1.prevent:阻止默认事件(常用)
    2.stop:阻止事件冒泡(常用)
    3.once:事件只触发一次(常用)
    4.capture:使用事件的捕获模式
    5.self:只有event,target是当前操作的元素是才触发事件
    6.passive:时间的默认行为立即执行,无需等待事件回调执行完毕-->
    <div id="root">
        <!--prevent组织默认事件-->
        <a href="https://www.cnblogs.com/3-DG/"@click.prevent="showInfo">点我提示信息</a>
    

    <!--stop:阻止事件冒泡-->
    <div class="demo1"@click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!--事件修饰符可以连续使用-->
        <a href="https://www.cnblogs.com/3-DG/"@click.prevent.stop="showInfo">点我提示信息</a>
    </div>

    <!--once:事件只触发一次-->
    <button @click.once="showInfo">点我提示信息</button>
    
    <!--capture:使用事件的捕获模式-->
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
    </div>

    <!--self:只有event,target是当前操作的元素是才触发事件-->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>

    <!--6.passive:时间的默认行为立即执行,无需等待事件回调执行完毕-->
    <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
    <script>
        new Vue({
            el:'#root',
            data:{
            },
            methods:{
                showInfo(){
                    alert("同学你好")
                },
                showMsg(msg){
                    console.log("同学你好");
                },
                demo(){
                    for (let i = 0;i<100000;i++){
                        console.log("#")
                    }
                    console.log("累坏了")
                }
            }
        })
    </script>
```

#### 键盘事件

```html
<!--Vue中常用的按键别名:
    回车 =>enter
    删除 =>delete
    退出 =>esc
    空格 =>space
    换行 =>tab
    上 =>up
    下 =>down
    左 =>left
    右 =>right-->

    <div id="root">
        <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"><br/>
        <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"><br/>
        <button @click="click">点击</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
            },
            methods:{
                showInfo(event){
                    console.log(event.target.value)
                    //调用按钮点击事件
                    this.click();
                },
                click(){
                    alert('点击按钮')
                }
               
            }
        })
    </script>
```

### Vue计算属性

通过data中已有的数据计算得来的新数据称为计算属性

* 插值语法实现

  ```html
  body>
      <div id="root">
          姓:<input type="text" v-model="firstname"><br/>
          名:<input type="text" v-model="lastname"><br/>
          全名:<span>{{firstname}}-{{lastname}}</span>
      </div>
      
      <script>
          new Vue({
              el:'#root',
              data:{
                  firstname:"张",
                  lastname:"三"
              }
          })
      </script>
  </body>
  ```

 

* 计算属性实现

```html
<body>
    <div id="root">
        姓:<input type="text" v-model="firstname"><br/>
        名:<input type="text" v-model="lastname"><br/>
        全名:<span>{{firstname}}-{{lastname}}</span>
    </div>
    
    <script>
        new Vue({
            el:'#root',
            data:{
                firstname:"张",
                lastname:"三"
            },
            methods:{

            },
            computed:{ //计算属性
                //定义计算属性函数(返回值为新的属性)
                fullName(){
                    console.log("函数被调用了");
                    return this.firstname + "-" + this.lastname
                }
            }
        })
    </script>
</body>
```

### Vue条件渲染指令

* v-if指令

  v-if="表达式"

**注意:以下为连续固定,不可更改**

```html
<div v-if=""></div>
<div v-else-if=""></div>
<div v-else></div>
```

1.v-if

  写法1:v-if="表达式"

  写法2:v-else-if="表达式"

  写法3:v-else

  适用于:切换频率较低的场景

  特点:不展示的DOM元素直接被移除

```html
 <h2 v-if="n%2===0&&n!==0">欢迎来到{{name}}</h2>
        <!--注意:以下三行必须固定连续使用-->
        <div v-if="n===1">SpringMvc</div>
        <div v-else-if="n===3">Spring</div>
        <div v-else>MyBatis</div>
```

* v-show指令

  v-show="表达式"

```html
<h2 v-show="n%2===0&&n!==0">欢迎来到{{name}}</h2>
```

2. v-show

  写法: v-show="表达式"

  适用于:切换频率较高的场景

  特点:不展示的Dom元素不会被移除,仅仅是隐藏

**注意事项:使用v-if的时候,元素可能无法获取到,而v-show一定可以获取到**

  • 版权声明:本站原创文章,于2023年10月10日22:28:43,由 发表,共 6869 字。
  • 转载请注明:Vue - 张拓的天空