Vue模板语法

时间：2025-02-18 08:14:09

①使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有的模板都是合法的HTML，所以能够被遵循规范的浏览器和HTML解析器解析。

  在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

②文本：

   数据绑定最常见的形式就是使用''Mustache''语法（双大括号）的文本差值，Mustache标签将会被替代为对应数据对象上message属性的值，绑定的数据对象上message属性发生了改变，插值处的内容都会更新：

<span>Message:{{message}}</span>
通过使用v-once指令，可以一次性的插值，当书记改变 时，插值处的内容不会更新。这会影响到该节点上所有的数据绑定 
<span v-once>This will never change:{{message}}</span>
③纯HTML：

     双大括号会将数据解析为纯文本，而非HTML。为了输出真正的HTML，需要使用v-html指令：

<div v-html = "rawHtml"></div>
被插入的内容都会被当做html，数据绑定会被忽略，不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。组件更适合担任UI重用与复合的基本单元。只对可信内容使用HTML插值，绝对不要对用户提供的内容插值。

④属性：

    Mustache不能再HTML属性中使用，应使用v-bind指令：

<div v-bind:></div>
⑤使用JavaScript表达式 

{{number+1}}
表达式会在所属Vue实例的数据作用域下作为JavaScript被解析，有一个限定就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。 

//这是语句，不是表达式
{{var a = 1}}
//控制流也不会生效，要使用三元表达式
{{
   if( ok){
     return message   
   }
}}
⑥指令：

     指令是带有v- 前缀的特殊属性。指令属性的值预期是单一JavaScript表达式（除v-for），指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。比如：

<p v-if = "seen">Now you see me</p>
这里v-if指令将根据表达式seen的值的真假来移除/插入<p>元素。
⑦参数：

   一些指令能接受一个“参数”，在指令后以冒号指明。例如：v-bind指令被用来响应地更新HTML属性：

<a v-bind:href = "url"></a>
在这里 href是参数，告知 v-bind指令将该元素的 href属性与表达式 url的值绑定
v-on指令，用于监听DOM事件， 这里的参数是监听的事件名： 
<a v-on:click = "doSomething"></a>
⑧修饰符：

   修饰符是以半角句号"."指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用():

<form v-on: = "onSubmit"></form>
⑨过滤器：

   Vue允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该别添加载js表达式的尾部，由“管道”符指示：

//in mustaches
{{message | capitalize}}
//in v-bind
<div v-bind:id = "rawId | formatId"></div>
Vue2.0中，过滤器只能在mustache绑定和v-bind表达式（2.1.0开始支持）中使用，过滤器设计的目的就是用于文本转换，为了在其他指令中实现更复杂的数据变换，应该使用计算属性。

过滤器函数总接受表达式的值作为第一个参数

new Vue({
  filters:{
    capitalize:function(value){
       if(!value) return''
       value = ()
       return (0).toUpperCase() + (1)
     }
   }
})
过滤器可以串联： 
{{message | filterA | filterB}}
过滤器是js函数，因此可以接受参数： 
{{ message | filterA('arg1','arg2') }}
这里字符串'arg1'将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数。
⑩缩写：

   v-前缀在模板中是作为一个标示Vue特殊属性的明显标识。

   v-bind  缩写：

//完整语法
<a v-bind:href = "url"></a>
//缩写
<a :href = "url"></a>
   v-on  缩写： 
//完整语法
<a v-on:click = "doSomething"></a>
//缩写
<a @click = "doSomething"></a>

总结：①new一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch。

          data：代表vue对象的数据；

          methods：代表vue对象的方法；

          watch：设置了对象监听的方法。

          ②Vue对象里的设置通过html指令进行关联

          ③重要指令：

                 v-text  渲染数据；

                 v-if   控制显示；

                 v-on   绑定事件

                 v-for   循环渲染

    






相关文章