一、基本指令
v-cloak :这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-cloak> v-cloak，渲染完成后才显示！{{message}} </div>
var app =new Vue({
el:'#app',
data:{
message:'欢迎进入机器学习的世界！'
}
})
HTML 绑定 Vue实例，在页面加载时会闪烁，v-cloak 可以解决这一问题。
在 css 中加上
[v-cloak] {
display: none;
}
- v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的
<div id="app">
<!--msg不会改变-->
<p v-once>{{msg}}</p>
<p>{{msg}}</p>
<p>
<input type="text" v-model="msg" name="">
</p>
</div>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
msg: "hello"
}
});
</script>
二、条件渲染指令
v-if、v-else-if 、v-else
使用v-if进行条件判断，可以使用v-else指令给v-if添加一个else块。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
v-else-if:紧跟着 v-if
v-else:紧跟着v-if或者v-else-if 元素后面，否则它将不会被识别
<!-- 使用v-if进行条件渲染 -->
<div id="#app">
<p v-if="ok">加油，你是最棒的</p>
</div>
<script>
new Vue({
el: "#app",
data: {
ok: true
}
})
</script>
<!-- 使用v-if和v-else -->
<div id="app">
<p v-if="ok">加油，你是最棒的</p>
<p v-else>你要继续加油哦</p>
</div>
<script>
new Vue({
el:"#app",
data:{
ok:true
}
})
</script>
<!-- 使用v-else-if -->
<div id="app">
<p v-if="type==='A'">A</p>
<p v-else-if="type==='B'">B</p>
<p v-else>notA/B</p>
</div>
<script>
new Vue({
el:"#app",
data:{
type:'C'
}
})
</script>
因为v-if是一个指令，所以必须将它添加到一个元素上，如果想要切换多个元素，此时可以将一个元素当做不可见的包裹元素，并在上面使用v-if进行渲染分组，最终的渲染结果将不包含元素
<!-- 在template上使用v-if进行渲染分组 -->
<div id="app">
<template v-if="ok">
<h1>今天是新的一周</h1>
<p>你要加油哦</p>
</template>
<template v-else>
<h1>今天是新的一周</h1>
<p>你要继续努力</p>
</template>
</div>
<script>
new Vue({
el:"#app",
data:{
ok:false
}
})
</script>
key:会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
2.v-show:是改变元素的css 属性display,当v-show为false时，元素会隐藏。
<div id="app">
<p v-show="status === 1">当status 为1 时 显示改行</p>
</div>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
status: 2
}
});
</script>
渲染后的结果：<p style="display: none;">当status 为1 时 显示改行</p>
注意，v-show 不支持 元素，也不支持 v-else。
- v-if 与 v-show 的选择
v-if是条件渲染，根据表达式适当地销毁或重建元素及绑定的事件或子组件。条件第一次变真时才开始编译，为false则不会渲染。
v-show只是简单的css 属性切换。v-if适合条件不经常改变场景，切换开销大，而v-show使用与频繁切换条件
注意：不推荐同时使用 v-if 和 v-for
三、列表渲染指令 v-for
v-for指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'vue.js'},
{message: 'javaScript 语言精粹'},
{message: 'javaScript 高级程序设计'}
]
}
})
</script>
v-for的表达式支持一个可选参数作为当前项的索引，如：
<li v-for="(item,num) in items">{{num}}-{{ item.message }}</li>
与v-if一样可以用在内置标上，将多个元素进行渲染。
除了数组，对象的属性可以遍历。
<ul id="app">
<li v-for="item in items">
{{ item }}
</li>
</ul>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
items: {
name:'jone',
gender:'女',
age: '26',
}
}
})
</script>
遍历对象属性时，有两个可选参数，健名 索引
<li v-for="（item ，key , index）in items"> {{index}} - {{key}} :{{ item }}
v-for还可以迭代整数
<div id="app">
<span v-for="n in 10">{{n}}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
})
</script>
- 数组更新
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组
filter(),
concat()
slice()
3. 过滤与排序
想通过一个数组的副本做过滤与排序的显示时，用计算书型返回过滤或排序后的数组。
四、方法与事件
1.基本用法
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="app">
点击次数{{counter}}
<button @click="counter++">+1</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
@click 的表达式也可以是一个在vue中methode选项内的函数
<div id="app">
点击次数:{{counter}}
<button @click="add()">+ 1</button>
<button @click="add(10)">+ 10</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
counter: 0 // 计数器,默认值为0
},
methods: {
add: function(count) {
count = count || 1; // 默认为1
this.counter += count;
}
}
})
</script>
- 修饰符
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<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>
按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。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下是Command建，windows下是窗口健）
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>