在学模板语法前,先了解两个概念,一个是数据绑定,一个是指令。数据绑定,形式就是两组嵌套的花括号,长这样婶儿的{{}},在这两个花括号里头,我们可以放置需要展示的动态数据(注意,放在双花括号里的内容,都会被解释为普通文本),所谓的数据绑定,我理解的就是用这个形式将需要展示的数据,绑定到对应的元素上。而指令呢,说白了,就是控制使用它的元素去做指定的事情,在vue中,指令的形式是v-,指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。具体的我们用一下就知道了~
插值的方法
下面开始学习模板语法,先说一下插值的方法,在上一篇文章中,我们写的第一个vue实例,用双花括号绑定了“hello vue”的字符串{{msg}},这就是插值最直接的使用方法,另外,我们还可以用指令的方式去插值,如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <p>{{sayHello}}</p> <p v-text="vText"></p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text' } }); </script> </body> </html>
上面,我们使用v-text指令同样实现了插值。另外,我们还可以使用v-html指令,来插入html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <p>{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>' } }); </script> </body> </html>
另外,我们不仅可以给标签里插值,还可以使用v-bind指令给标签属性插值哦~,具体使用方式如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .hellofont{ font-size: 20px; color: pink; font-weight: bold; } </style> </head> <body> <div class="myApp"> <p v-bind:class="helloStyle">{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>', helloStyle: 'hellofont' } }); </script> </body> </html>
通过上面的例子,我们给包裹hello的p标签添加了一个类,从而给它加上了特有的样式。
在上面所以用的例子中,我们都是通过指令或者数据绑定的方式,直接插入值或属性值,其实,我们还可以在这些的基础上,实现表达式,但是只能是单个表达式,在表达式中,我们可以进行运算或者使用方法等等,具体看下面的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .hellofont{ font-size: 20px; color: pink; font-weight: bold; } .num0{ font-size: 18px; color: green; font-weight: bold; } </style> </head> <body> <div class="myApp"> <p v-bind:class="helloStyle">{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> <p v-bind:class="'num' + num">{{(num+1)*10}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>', helloStyle: 'hellofont', num: 0 } }); </script> </body> </html>
上面<p v-bind:class="'num' + num">{{(num+1)*10}}</p>,就使用了两个表达式,一个指定class,一个显示值。
在文章最开始的时候,我们已经理解过了指令的含义了,上面我们用到的指令有v-text、v-html、v-bind,下面我们就来看看vue常用的指令都有哪些:
v-text:用于插值,更新元素的显示内容;
v-html:用于更新元素的innerHTML;
v-show:根据表达式值的真假,切换display属性;
v-if:根据表达式的真假来渲染应用的元素;
v-else:不需要表达式,不过需要跟在v-if或者v-else-if后面使用;
v-else-if:根据表达式的真假来渲染应用的元素,不过需要跟在v-if或者v-else-if后面使用;
v-for:根据源数据多次渲染元素或者模板块;
v-model:随表单控件类型不同而不同。在表单控件或者组件上创建双向绑定。
修饰符:
.lazy
- 取代 input
监听 change
事件
.number
- 输入字符串转为有效的数字
.trim
- 输入首尾空格过滤
v-on:用于绑定事件监听器,这个是很重要的指令哦,而且,因为用的相对来讲会比较频繁,她是有缩写的,而且也有修饰符(修饰符指定事件的触发条件),具体如下:
缩写:@
修饰符:
.stop
- 调用 event.stopPropagation()
。
.prevent
- 调用 event.preventDefault()
。
.capture
- 添加事件侦听器时使用 capture 模式。
.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。
.native
- 监听组件根元素的原生事件。
.once
- 只触发一次回调。
.left
- (2.2.0) 只当点击鼠标左键时触发。
.right
- (2.2.0) 只当点击鼠标右键时触发。
.middle
- (2.2.0) 只当点击鼠标中键时触发。
.passive
- (2.3.0) 以 { passive: true }
模式添加侦听器
示例:
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器):
<my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component>
v-bind:动态绑定一个或者多个特性,v-bind也是有缩写的,而且也有修饰符,具体如下:
缩写:‘:’
修饰符:
.prop
- 被用于绑定 DOM 属性 (property)。
.camel
- (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync
(2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on
侦听器。
示例:
<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
v-once:不需要表达式,只渲染元素或者组件一次。
以上就是vue比较常用的指令了,最后,我们实践一下v-on的使用方法(^-^因为绑定事件是比较重要的啦):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .hellofont { font-size: 20px; color: pink; font-weight: bold; } .num0 { font-size: 18px; color: green; font-weight: bold; } </style> </head> <body> <div class="myApp"> <p v-bind:class="helloStyle">{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> <p v-bind:class="'num' + num">{{(num+1)*10}}</p> <p> <a :href="baiduUrl">点我百度一下</a> </p> <p> <!-- <button v-on:click="plusNum()">点我递增数字</button> --> <button @click="plusNum()">点我递增数字</button> </p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>', helloStyle: 'hellofont', baiduUrl: 'http://www.baidu.com', num: 0 }, methods: { plusNum: function() { this.num++; } } }); </script> </body> </html>