vue指令
v-html语法可以把data里的HTML标签和类容解析到网页上比如：
data: { message: '<em>菜鸟教程</em>' }
输出
菜鸟教程 //网页显示斜体
什么是v-bind指令（缩写:href="url"）
v-bind可以绑定属性比如：
html代码 <a v-bind:href="aaa">菜鸟教程</a> vue代码 data: { aaa : "http://www.baidu.com" }
给a标签绑定上了跳转百度的连接
v-bind修饰符
<!-- 阻止单击事件冒泡 --> <a @click.stop="handle"></a> <!-- 提交事件不再重载页面 --> <form @submit.prevent = "handle"></form> <!-- 修饰符可以串联 --> <a @click.stop.prevent="handle"></a> <!-- 添加事件侦听器时使用事件捕获模式 --> <div @click.capture="handle"></div> <!-- 只当事件在该元素本身（而不是在子元素）触发时触发回调 --> <div @click.self="handle"></div> <!-- 只触发一次，组件同样适用 --> <div @click.once="handle"></div> <!-- 在表单元素上监听键盘事件时，还可使用按键修饰符 --> <input @keyup.13="submit"> 也可以自己配置具体按键 Vue.config.keyCode.f1 = 112 // 全局定义后，就可以使用@keyup.f1 <!-- Shift + S --> <input @keyup.shift.83 = "handleSave"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething"></div>
什么是v-if指令
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>
当data.seen中的值为true时显示文字
现在你看到我了
当data.seen中的值为false时显示空
什么是v-model指令
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。其他元素 是没有任何效果的。
比如：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
p标签里的类容会随着input框里的数据变动而变动
.lazy: 用于控制数据同步的时机
v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变在change事件中同步。
<input type="text" v-model.lazy="message"> // 这时message并不是实时变化的，而是失焦或按回车键才会更新。
.number 可以将输入转换成Number类型
<input type="number" v-model.number="message">
.trim 可以自动过滤输入的首尾空格
<input type="text" v-model.trim="message">
什么是v-on指令（缩写@click="doSomething"）
经过v-on绑定的属性可以直接执行js代码,也可以去vue中methods中寻找函数执行。
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>dome9</title> </head> <body <div id ="app"> <!-- 'v-on==@' 直接执行js代码 --> <button v-on:click='count-=1'>每次点击-1</button> <!-- '@是v-on的简写' methods中寻找add函数执行 --> <button @click='add(10)'>每次点击+10</button> <p>当前数值为:{{count}}</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> //创建Vue实例 var vm = new Vue({ el: '#app', data: { count: 0 }, methods: { add(num){ this.count += num } } }); </script> </html>
结果
什么是 v-if，v-else-if指令
和JavaScript中的if，if-else一样
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
输出
c
注意： v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
什么是 v-show指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script> new Vue({ el: '#app', data: { ok: true } }) </script> </body> </html>
当data.ok=true时显示"hello"data.ok=false时隐藏"hello"，与v-if的区别： https://www.jianshu.com/p/7af8554d8f08
什么是v-for指令
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ol> <li v-for="site in sites">//循环data.sites.name数组中的所有的数据 {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script> </body> </html>
结果
1. Runoob 2. Google 3. Taobao
v-pre
资源来自网络，整理方便学习
