Vue 模板语法

前面的话

如果只使用Vue最基础的声明式渲染的功能，则完全可以把Vue当做一个模板引擎来使用。本文将详细介绍Vue模板语法

[ 文本插值 ]

数据绑定最常见的形式就是{{ }} 双大括号的文本插值

 

        
{{ name}}
 

运行结果：

[ 表达式插值 ]

Vue.js都提供了完全的js表达式支持。

 

      {{5 + 5}} 

      {{count > 5? '大于5': '小于5'}}

      {{string.split('').reverse().join('')}}

运行结果：

注意：是表达式而不是语句

{{ var a = 1 }}

{{ if (ok) { return message } }}

指令

什么是指令？
指令：就是前面带有v-前缀的特殊属性，用于在表达式的只改变时，将某些行为应用到DOM上

什么是参数？
参数：在指令后以冒号指明。

[v-once]

v-once指令表示值渲染初始值，不管以后如何改变，都不重新渲染。

{{ message }}

不论message怎么改变，div里面的内容一直是‘测试内容’，不会改变。

[ v-text]

v-text指令用来更新元素的innerText。
语法：
v-text = “”

运行结果：

div的innerText内容：

[ v-html]

前面的例子看到执行 v-text="massage3"这条指令之后，渲染的是一个字符串’< span>我是一个span< /span>’，而没有识别出span这个元素节点，如果想输出真正的html，就需要用到v-html指令

v-html指令：用于将绑定的数据变成html代码

运行结果：

[ v-bind]

v-bind指令可以动态的绑定属性。

这里的v-bind指令说明了title属性与massage数据进行绑定

绑定属性class、绑定属性href
判断class1的值，如果为true使用class1类的样式，如果为false，不使用该类

 

            百度
  
   

运行结果：

[ v-on]

v-on指令用来绑定事件，参数是事件名。例如绑定点击事件： v-on：click = “function”

 

       点击加一{{count}}
  
   

运行结果:

[ 双向数据绑定：v-model]

双向数据绑定：v-model指令

前一篇文章解释了什么是数据绑定，下面通过简单的例子说明说明是双向数据绑定

     
{{massage2}}
     
 
    

运行结果：

解释什么双向数据绑定：
1：改变massage2的值，同时input框的内容也会改变
2：用户在input框里面输入的信息，同时p标签的内容就会跟着改变

v-model指令用在input、select、textarea、checkbox、redio等表单控件元素中创建双向数据绑定， 更新表单上的值，自动更新绑定的元素值

[ 修饰符]

修饰符：是以半角句号.指明的特殊后缀，用于一个指令应该以特殊的方式进行绑定。 例如：event.preventDefault,event.stop,event.enter,event.space

Vue.js支持这种特殊的绑定方式：

. stop表示取消事件的冒泡行为
.preventDefault表示取消事件的默认行为
.enter表示按下enter键才触发事件
.space表示按下空格键才触发事件

原生js的写法:

 
 
触发mousemove事件之后，执行stop函数

Vue的修饰符写法：

这个例子鼠标经过p元素，会输出clientX与clientY的值，当经过子元素span时，阻止冒泡，不会输出clientX与clientY的值

  

      
输出鼠标X,y的值:{{clientX}}/{{clientY}}

       阻止冒泡
       
 
    

[ 过滤器 ]

Vue.js允许自定义过滤器

语法：
{{massege | filter}}

实例：将字符串的第一个字符转为大写

 

       {{string | capitalize}}
 
     
 

运行结果：

capitalize函数写在Vue实例的filters属性中，过滤器函数接受表达式为第一个参数，这里string为capitalize的第一个参数。

过滤器函数可以串联： {{massage | filter1 | filter2 }}
过滤器函数可以传参 {{massage | filter1(arg1,arg2) | filter2 }}, 这里的argu1将作为第二个参数，arg2将作为第三个参数