快速入门vue

vue优点
体积小\更高的运行效率\双向数据绑生态丰富\学习成本低
vue数据的双向绑定
v-model
vue强制数据绑定,用于a标签的href属性
v-bind
例子v-bind:href=“liaok”
注:简化写法直接 : :=v-bind
例子 :href=“liaok”
绑定事件监听
v-on
用法

<button v-on:click="方法">学习vue</button>

简化

<button @click="方法">学习vue</button>

v-once
如果只想一次性的插值，不想被数据驱动改变，用 v-once -
方法钩子
methods

计算钩子
computed

vue反转消息
先用split方法把字符串分隔成字符串数组,再用reverse方法翻转,最后在用join把字符串数组变成字符串
v-html
解析语句中的标签,{{不能直接解析内容当中的标签,如需要解析使用v-html指令}}
防止用户在留言或者评论当中使用标签而解析成功被黑客当xxs入侵

v-show 显示隐藏内容

v-if 创建删除内容

v-if 和 v-show的区别

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低

1.共同点
都是动态显示DOM元素

2.区别
（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有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。

= ! 是取反

key值可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果

vue事件修饰符
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

效果：

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

修饰符可以串联

<a v-on:click.stop.prevent="doThat"></a>

只有修饰符

<form v-on:submit.prevent></form>

添加事件监听器时使用事件捕获模式
即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

<div v-on:click.capture="doThis">...</div>

只当在 event.target 是当前元素自身时触发处理函数
<即事件不是从内部元素触发的

<div v-on:click.self="doThat">...</div>

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

点击事件将只会触发一次

<a v-on:click.once="doThis"></a>

按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
只有在 keyCode 是 13 时调用 vm.submit()

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
同上

<input v-on:keyup.enter="submit">

缩写语法

<input @keyup.enter="submit">

全部的按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：
Alt + C

<input @keyup.alt.67="clear">

Ctrl + Click

<div @click.ctrl="doSomething">Do something</div>

注意：
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。
template:包装元素不会创建在页面上面
vue实例中的template属性
将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。
特点：
1）如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；
2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
3）在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。
此处页面显示hello

此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容

<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },

    template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
});

上面的例子中html中的template标签可以变成自定的标签，如下。但是下面这种方式也可以将标签中的内容替换掉app元素，但是标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。

<abc id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</abc>

上面的实例还可以写成下面的形式

<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },

    template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一个根元素，如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个
});

vue中数组变动更新检测
Vue 包含两种观察数组的方法分别如下
　1.变异方法
　　顾名思义，变异方法会改变被这些方法调用的原始数组，它们也将会触发视图更新，这些方法如下
　　　　push()
　　　　pop()
　　　　shift()
　　　　unshift()
　　　　splice()
　　　　sort()
　　　　reverse()
　　　使用举例：example1.items.push({ message: ‘Baz’ })
　2.非变异方法
　　非变异方法与变异方法的区别就是，非变异方法不会改变原始数组，总是返回一个新数组，
　　当使用非变异方法时，可以用新数组替换旧数组，非变异方法大致有：filter(), concat() 和 slice()
　　使用举例：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
　1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
　2.当你修改数组的长度时，例如：vm.items.length = newLength
vue针对这两个问题给出了相应的解决办法,使用这两种方法，也会触发状态更新
　1.使用vue全局方法Vue.set() 或者使用vm.$set() 实例方法
　2.使用 splice，caoncat等修改数组

Vue.set用法如下（vm.$set方法是Vue.set的别名，与其用法一致）

总的来说：vue能不能检测到数组的变化并更新，取决于原生js的数组方法，
　　　　　如果原生js方法（vue变异方法）能够修改原数组，那么vue就可以检测到变化并更新（例如push等方法）
　　　　　如果原生js方法（vue非变异方法）不能够修改原数组，而是返回一个新数组，那么vue也可以检测到变化并更新，
　　　　　　　　前提是使用这些方法时要把新数组返回出来去替换掉旧数组
　　　　　至于原生js的数组的两个坑，我们一定到注意，直接利用vue提供的方法来解决