一、Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。
模板语法包含9种类型，分别为：文本、HML、属性、表达式、指令、参数、修饰符、表单输入、过滤器
文本：数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值，例如：
<div id="app"> <p>{{ message }}</p> </div>
HTML：使用 v-html 指令用于输出 html 代码：
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Hello Word!</h1>' } }) </script>
编译后的格式如下：
<div id="app"> <div> <h1>Hello World!</h1> </div> </div>
属性：HTML 属性中的值使用 v-bind 指令，比如
//绑定ID属性的值 <div v-bind:id="dynamicId"></div> //绑定布尔属性 <button v-bind:disabled="isShow">Button</button> //绑定类，当use为ture时显示改类的样式 <div v-bind:class="{'myclass': use}">渲染样式</div> //绑定样式 <div v-bind:style="{'dispaly:none': isshow}">显示我</div>
表达式：Vue.js 都提供了完全的 JavaScript 表达式支持。
<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Hello World!</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } }) </script>
指令：指令是带有 v- 前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用到 DOM 上，例如:
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>
参数:
v-bind指令被用来响应地更新 HTML 属性，与属性参数绑定可以缩写为 :href ,例如
v-bind:href 可以缩写为 :href
v-bind:src 可以缩写为 :src
v-on,它用于监听 DOM 事件，也叫事件处理器，与事件参数绑定可以缩写为 @click，例如
v-on:click 可以缩写为 @click
v-on:change 可以缩写为 @change
修饰符：修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
表单输入：表单中input空间可以用v-model来双向绑定数值，例如：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'hello world!' } }) </script>
过滤器：Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。以下实例对输入的字符串第一个字母转为大写：
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
过滤器能在循环中简单格式化循环列表中的某个字符串，这是计算属性不具备的，比如我们需要在循环列表时，将列表中的UnixTime转换成Date时间类型。
计算属性(computed)则多直接用在计算自定义的变量上,计算后的变量直接用{{}}在模板上绑定，计算属性
二、Vue.js 条件语句/条件渲染
VueJs条件语句为 v-if、v-else-if、v-else，v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。比如：
<div id="app"> <div v-if="name == 1"> name等于1时，我显示 </div> <div v-else-if="name == 2"> name等于2时，我显示 </div> <div v-else> name等于其他值时，我显示 </div> </div> <script> new Vue({ el: '#app' data:{ name:1 }, }) </script>
三、Vue.js 循环语句
在模板里面循环加载使用v-for指令，v-for指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
<!-- 循环数组为元素为对象--> <div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
还循环数字还可以加入Index索引
<div id="app"> <ol> <li v-for="(site,index) in sites"> {{ site.name }}--{{index}} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
运行结果为：
Runoob--0
Google--1
Taobao--2
另外v-for 可以通过一个对象的属性来迭代数据：
<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '博客园', url: 'http://www.cnblogs.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script>
循环的Object对象元素Value含三个参数：(value, key, index)，第一个value是值，第二个key是键名，第三个index是索引
<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '博客园', url: 'http://www.cnblogs.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script>
运行结果为：
0. name : 博客园
1. url : http://www.cnblogs.com
2. slogan : 学的不仅是技术，更是梦想！
四、Vue.js 样式绑定（class/style）
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。下面举例说明：
绑定class
1、为 v-bind:class 设置一个对象，从而动态的切换 class:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="app"> <div v-bind:class="{ active: isActive }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }) </script> </body> </html>
渲染结果为：
<div class="active"></div>
2、在对象中传入更多属性用来动态切换多个 class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: true } }) </script> </body> </html>
渲染结果为：
<div class="static active text-danger"></div>
static为固定显示，active和text-danger根据定义的属性判断显示或者不显示
3、绑定自定义属性,与实例2的效果一样
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="classObject"></div> </div> <script> new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true } } }) </script> </body> </html>
渲染结果为：
<div class="active text-danger"></div>
4、绑定计算属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .base { width: 100px; height: 100px; } .active { background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="classObject"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, error: { value: true, type: 'fatal' } }, computed: { classObject: function () { return { 'base': true, 'active': this.isActive && !this.error.value, 'text-danger': this.error.value && this.error.type === 'fatal', } } } }) </script> </body> </html>
渲染结果为：
<div class="base text-danger"></div>
5、数组语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="[activeClass, errorClass]"></div> </div> <script> new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script> </body> </html>
渲染结果为：
<div class="active text-danger"></div>
加入自定义属性用法如下：
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
errorClass是始终存在，activeClass在isActive为true时显示，false则不显示
绑定style
1、基础绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-bind:style="{ color: activeColor, font-size: fontSize + 'px' }"博客园</div> </div> <script> new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 30 } }) </script> </body> </html>
渲染结果为：
<div style="color: green; font-size: 30px;">博客园</div>
也可以直接绑定一个样式对象：
<div id="app"> <div v-bind:style="styleObject">博客园</div> </div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', font-size: '30px' } } }) </script>
渲染结果同上一样
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">博客</div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } }) </script>
渲染结果为：
<div style="color: green; font-size: 30px;font-weight:bold;">博客园</div>
五、Vue.js 事件处理器
事件监听可以使用 v-on 指令，通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
<div id="app"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 app.greet() // -> 'Hello Vue.js!' </script>
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop.prevent.capture.self.once
<!-- 阻止单击事件冒泡 --> <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> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <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
<p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
扫一扫
4634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
