Vue数据绑定

模板的说明

Vue.js 的模板是基于 DOM 实现的。

所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。

Vue 模板因而从根本上不同于基于字符串的模板。

Vue.js数据绑定：

i 插入值

ii .绑定表达式

iii 指令

iv .缩写

i 插入值

a.文本 
 a.1 数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双花括号）：
   a.2 <span>Message: {{ msg }}</span>
   a.3 Mustache 标签会被相应数据对象的 msg属性的值替换。每当这个属性变化时它也   会更新。
a.4 当然，我们也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：<div>{{{ raw_html }}}</div>
<span>This will never change: {{* msg }}</span>

  
  

   
   

  
  

b.原始的HTML 

    b.1双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。

c.HTML特性

c1.Mustache 标签也可以用在 HTML 特性 (Attributes) 内：<div id="item-{{ id }}"></div>在 Vue.js 指令和特殊特性内不能用插值。  

ii绑定表达式

 a.javascript表达式

 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式：

{{ number + 1 }}


{{ ok ? 'YES' : 'NO' }}


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

   表达式将在所属的 Vue 实例的作用域内计算。每个绑定只能包含单个表达式。

   <!-- 这是一个语句，不是一个表达式： -->
  {{ var a = 1 }}                    //俩个操作 1.申明 var a  2.赋值


 <!-- 流程控制也不可以，可改用三元表达式 -->
  {{ if (ok) { return message } }}

 b.过滤器

    Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”。

       {{ message | capitalize }}

c.指令

   c1.指令 (Directives) 是特殊的带有前缀 v- 的特性。

     <p v-if="greeting">Hello!</p>

  c2.参数

    有些指令可以在其名称后面带一个“参数”，中间放一个冒号隔开

    <a v-bind:href="url"></a>  //举个例子

            html :<a v-bind:href="url"> 点击我跳百度</a> 
            js:
          url:"http://www.baidu.com" //必须把http加上，不然浏览器不会解析
结果：

     <a v-on:click="doSomething"></a>  //执行一个方法，这里不举例

  c3.修饰符  

   修饰符 (Modifiers) ：是以半角句号开始的特殊后缀，用于表示指令应当以特殊方式绑定。

       事件修饰器
            Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符
<div id="app2">
<!-- 阻止单击事件冒泡 -->
<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>
</div>
按键修饰符
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
特殊修饰符：
修饰符
lay：在改变后才触发（也就是说只有光标离开input输入框的时候值才会改变）
 
 

  
  
<input v-model.lazy="msg" >
 
 
 
number：将输出字符串转为Number类型·（虽然type类型定义了是number类型，但是如果输入字符串，输出的是string）
 
 

  
  
<input v-model.number="age" type="number">
 
 
 
trim：自动过滤用户输入的首尾空格
 
 

  
  
<input v-model.lazy.trim="msg" >
 
 

iv缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>