Vue2.x的基本使用

Vue常用指令

v-text、v-html

• 可以用存div、p、span、h1-h6等内容有内容的标签上，为标签输出内容

• v-text插入普通文本

• v-html插入HTML代码片段

<div id="app">
    <p v-text="name"></p>
    <h1 v-html="html"></h1>
</div>
var app = new Vue({
    el: '#app',
    data: {
        name : '小明',
        html: "<p>你好</p>"
    }
    });

v-bind：(缩写 ：)

• 动态绑定值，绑定的值发生改变，对应的元素值也会发生变化

<div id="app">
    <input v-bind:value="name"></input>
</div>

var app = new Vue({
    el: '#app',
    data: {
        name : '小明',
        html: "<p>你好</p>"
    }
})

在控制台写上 app.name="小红花"，input框里面值也变成小红花

• 我们可以传给 v-bind:class 一个对象，以动态地切换 class： 上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的Boolean值.

• 可以用方括号括起来的 JavaScript 表达式作为一个指令的参数： 这里的attr会作为一个JavaScript表达式进行解析，最终值会当作一个参数来使用。例如在data中attr:"href",则上述代码的绑定等价于v-bind:href.

<a v-bind:[attr]="url">...</a>

v-on：(缩写 @)

• 1、绑定事件监听器。事件类型由参数指定。

• 2、表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

• 3、用在普通元素上时，只能监听原生DOM事件，用在自定义元素组件上可监听子组件触发的自定义事件。

• 4、注：在某些时候可以使用简写@符号 @事件 ='方法'

v-on传值

1、methods的方法有参数，传值

<div id="app">
    <span>{{name}}{{html}}</span>
    <button v-on:click="showInfo('hi')">点击打招呼</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        name : '小明',
        html: "!!!"
    },
    methods:{
        showInfo:function (e) {
            console.log(e);
            this.html = e;
        }
    }
})

2、methods的方法有参数，但是没有传值

    <button v-on:click="showInfo()">点击打招呼</button>

showInfo:function (e) {
    console.log(e);
}

输出的是undefined。

3、methods的方法有参数，传值同时也要传event

    <button v-on:click="showInfo('hi',$event)">点击打招呼</button>

showInfo:function (msg,e) {
    console.log(e);
    this.html = msg;
}

传递的值$event就是对象本身（代表事件的状态，比如在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态）

v-on的事件修饰符

1、stop：停止冒泡

没加stop

<div id="app" @click="showDiv">
    <span>{{name}}{{html}}</span>
    <button v-on:click="showInfo('hi',$event)">点击打招呼</button>
</div>

showDiv:function () {
    console.log("i'm JackMa");
}

加stop，阻止了div的click事件showDiv的发生

<button v-on:click.stop="showInfo('hi',$event)">点击打招呼</button>

2、prevent、self:阻止默认行为

在浏览器中右击一般都会默认显示一个菜单,添加prevent后将不会出发，只触发自定义事件

self阻止子元素事件冒泡

<button v-on:contextmenu.prevent="showInfo">右击</button>

3、once：只会触发一次

事件将只会触发一次，之后不再触发

<button v-on:click.once="showInfo">右击</button>

4、监听某个键盘的键帽

<!-- 键修饰符，键名-->
<input @keyup.enter="showInfo">右击</input>
<!--键值-->
<input @keyup.13="showInfo">回车</input>

5、capture：添加事件监听器时使用事件捕获模式（优先处理）

<!--添加事件监听器时使用事件捕获模式-->
<!--即内部元素触发的事件先在此处理，然后才交由内部元素进行处理-->
<div id="app" v-on:click.capture="showDiv">
        <button v-on:click="showInfo">右击</button>
</div>

6、修饰符可以可以串联

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<input v-on:contextmenu.stop.prevent="showInfo">回车</input>

7、passive

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

v-if与v-show

区别

（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；v-if适合运营条件不大可能改变；v-show适合频繁切换。

注意，v-show 不支持 元素，也不支持v-else。

<div id="app">
        <button v-if="showInfo">右击</button>
        <button v-else>左击</button>
        <button v-show="!showInfo"></button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        showInfo : true
    }
})

v-for

类似于JS的数组遍历，v-for=“item in items”，items是数组，item是数组的一个元素。

<div id="app">
<!--        遍历对象 item in items-->
        <span v-for="person in people">{{person.name}} - {{person.age}} - {{person.sex}}<br></span>
        <hr>
<!--        （数组对象，索引） in items-->
        <span v-for='(item,index) in arr'>{{ item }}---{{ index }}<br></span>
        <hr>
<!--        （值，键值名，索引） in items-->
        <span v-for="(item,key,index) in tom">{{item}}--{{key}}--{{index}}<br></span>
    </div>

var app = new Vue({
    el: '#app',
    data: {
        people: [
            {name: 'Jack', age: 30, sex: 'Male'},
            {name: 'Bill', age: 26, sex: 'Male'},
            {name: 'Tracy', age: 22, sex: 'Female'},
            {name: 'Chris', age: 36, sex: 'Male'}
            ],
        arr: ['apple', 'orange', 'banana'],
        tom:{name:"tom",sex:"man",age:22}
    }
})

同时支持在v-for里使用值范围

<div>
    <span v-for="n in 10">{{n}}</span>
</div>

结果：1 2 3 4 5 6 7 8 9 10

v-model

v-model实现标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。在中，不仅可以给input赋值，还可以获取input的数据。

1、在input的下拉框、单选按钮、复选框中的应用

<div id="app">
    <!--下拉框-->
    <select v-model="selected">
        <option value="A被选">A</option>
        <option value="B被选">B</option>
        <option value="C被选">C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <br><hr>
    <!--单选按钮-->
    <!--for是让点击label的时候也能够触发对应该id的input的点击-->
    <input type="radio" id="small" value="small_value" v-model="picked">
    <label for="small">small</label>
    <br>
    <input type="radio" id="big" value="big_value" v-model="picked">
    <label for="big">big</label>
    <br>
    <span>Picked: {{ picked }}</span>
    <br><hr>
    <!--复选框-->
    <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
    <label for="one">选项一</label>
    <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
    <label for="two">选项二</label>
    <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
    <label for="three">选项三</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
​
</div>

var app = new Vue({
    el: '#app',
    data: {
        selected: '',
        picked: '',
        checkedNames: []
    }
})

2、v-model修饰符

<div id="app">
    <!--绑定lazy后与change事件同步，并不是输入时同步-->
    <input v-model.lazy="picked">
    <label>值:{{picked}}</label><br><hr>
    <!--自动清除框中的首尾空格-->
    <input v-model.trim="msg">
    <label>值:{{msg}}</label><br><hr>
    <!--仅限输入数字-->
    <input v-model.number="age" type="number">
    <label>值:{{age}}</label><br><hr>
</div>

var app = new Vue({
    el: '#app',
    data: {
        picked: '请输入内容',
        msg:'hi!',
        age:0
    }
})

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1. v-bind绑定一个value属性

2. v-on指令给当前元素绑定input事件

自定义组件使用v-model，应该有以下操作：

1. 接收一个value prop

2. 触发input事件，并传入新值

template

元素可以看作一个不可见的包裹元素，页面最终的渲染结果不包括元素。

<select v-model="option">
    <template v-if="option<3">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </template>
​
    <option value="4">4</option>
    <option value="5">5</option>
​
</select>

计算属性和侦听器

methods,watch,computed的区别

1. computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

1. methods 方法表示一个具体的操作，主要书写业务逻辑；

1. watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体.

   computeMsg只运行了一次，因为它利用了缓存，初始值不改变就不需改变。

计算属性

<div id="app">
    {{computeMsg}}||{{computeMsg}}
    <br><hr>
    {{methodsMsg()}}||{{methodsMsg()}}
    <br><hr>
    <input v-model="msg">
</div>
var app = new Vue({
    el:'#app',
    data:{
        msg:'hello Vue!'
    },
    methods:{//方法
        methodsMsg : function (){
            console.log('methodMsg..');
            return this.msg;
        }
    },
    // 计算属性要有返回值：原始数据发生改变，计算属性才会重新计算
    //使用缓存，提高效率
    computed: {
        computeMsg: function () {
            //可以进行复杂的逻辑处理和计算
            console.log('computeMsg...');
            return this.msg.toUpperCase();
        }
    }
})

侦听属性

监听某个值的变化，变化后监听属性进行相应操作。(尽量用计算属性)

<div id="app">
    {{msg}}
    <input v-model="msg">
</div>

watch:{
    msg:function (){
        console.log('watch...');
    }
}

实例与生命周期

生命周期:

• beforecreate : -般使用场景是在加loading事件的时候
• created :处于loading结束后，还做一些初始化，实现函数自执行(data数据E 经初始化，但是DOM结构渲染完成，组件没有加载)
• beforemount:处于组件创建完成，但未开始执行操作
• mounted :处于发起后端请求，获取数据，配合路由钩子执行操作(DOM渲染完成，组件挂载完成)
• beforeupdate、updated: 处于数据更新的前后
• beforeDestroy:当前组件还在的时候，想删除组件
• destroyed :当前组件已被销毁，清空相关内容

created与mounted的区别 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一 些需要的操作。