Vue 模板语法

前面的话

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

[ 文本插值 ]

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

 <div id="app">
        <p>{{ name}}</p>
 </div>
<script>
new Vue({
  el: '#app',
  data:{
     name:  "小柒"
  }
})
</script>

运行结果：

[ 表达式插值 ]

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

 <div id=“app”>
      {{5 + 5}} </br>
      {{count > 5? '大于5': '小于5'}}</br>
      {{string.split('').reverse().join('')}}</br>
</div>
<script>
new Vue({
  el: '#app',
  data:{
     string: 'xiaoqi',
     count:3
  }
})
</script>

运行结果：

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

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

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

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

[v-once]

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

<div id="app" v-once>{{ message }}</div>
<script>
var vm = new Vue({
  el: '#app',
  data:{
      'message': '测试内容'
  }
})
</script>

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

[ v-text]

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

<div id="app" v-text="massage3"></div>
<script>
new Vue({
  el: '#app',
  data:{
		massage3:'<span>我是一个span</span>'
  }
})
</script>   

运行结果：

div的innerText内容：

[ v-html]

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

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

<div id="app">
    <p v-html="massage1"></p>
</div>
<script>
new Vue({
  el: '#app',
  data:{
	   massage: "<h1>hello Vue.js</h1>"
  }
})
</script>   

运行结果：

[ v-bind]

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

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

 <div id="app" v-bind:title="message"></div>

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

 <div  id="app" v-bind:class = "{'class1':use}">
            <a v-bind:href="url">百度</a>
  </div>
<script>
new Vue({
  el: '#app',
  data:{
	   use: false,
       url: "http://www.baodu.com"
  }
})
</script>   

运行结果：

[ v-on]

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

 <div  id="app" >
       <button v-on:click = "increase">点击加一</button>{{count}}
  </div>
<script>
new Vue({
  el: '#app',
  data:{
	 count：0,
  }
  methods: {
  	increase: function() {
  		this.count++;
  	}
  }
})
</script>   

运行结果:

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

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

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

<div id="app">
     <p>{{massage2}}</p>
     <input type="text" v-model="massage2">
 </div>
 <script>
new Vue({
  el: '#app',
  data:{
	   massage2:'hello'
  }
})
</script>   

运行结果：

解释什么双向数据绑定：
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的写法:

<div>
 <span v-on:mousemove = "stop"></span>
 </div>
触发mousemove事件之后，执行stop函数

Vue的修饰符写法：

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

  <div id="app">
      <p v-on:mousemove = "updataXy">输出鼠标X,y的值:{{clientX}}/{{clientY}}</br>
       <span v-on:mousemove.stop>阻止冒泡</span>
       </p>
 </div>
 <script>
  new Vue({
         el: '#app',
         data:{
	        clientX: 0,
            clientY:0,
         }
         methods: {
  	             updataXy: function(event) {
                this.clientX = event.clientX;
                this.clientY = event.clientY;
            },
            stop: function(event) {
                event.stopPropagation();
            }
  	}
  }
})
</script>   

[ 过滤器 ]

Vue.js允许自定义过滤器

语法：
{{massege | filter}}

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

 <div id="app">
       {{string | capitalize}}
 </div>
  <script>
new Vue({
  el: '#app',
  data:{
	   string: 'xiaoqi'
  }
   filters: {
            capitalize: function (value) {
            if (!value) return '';
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
})
</script>   
 

运行结果：

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

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