你想知道的vue的模板语法

模板语法

插值

文本

数据绑定最多见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:javascript

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。不管什么时候,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。
经过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上全部的数据绑定:html

<span v-once>这个将不会改变: {{ msg }}</span>

纯HTML

Mustache语法是将数据渲染到模板,可是渲染上去的是纯文本,咱们不可以输出真正的HTML。若是咱们须要渲染一个HTML,咱们须要shi用v-html指令:vue

<div id="box" v-html="msg"></div>
var vm = new Vue({
    el:"#box",
    data:{
        msg:"<h1>血染的风采</h1>"
    }
})
血染的风采

特性

mustache 语法不能做用在 HTML 特性上,遇到这种状况应该使用 v-bind 指令:java

<div id="box" v-html="msg" v-bind:index="msg"></div>
var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})
控制台可看div的index为101

这一样适用于布尔类特性,若是求值结果是 false 的值,则该特性将会被删除:数组

<button v-bind:disabled="isButtonDisabled">Button</button>
// 当isButtonDisabled为true时,button不能够点击,为false时,disabled这个属性会删除,button能够点击。

使用javascript表达式

咱们能够在mustache语法中使用javascript表达式,例如:缓存

<div id="box">{{msg+1}}</div>
var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})
101

可是在Mustache语法中不能是同语句。例如:app

{{var a = 1}}

这个语句就不会被执行。异步

指令

指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for 是例外状况,稍后咱们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地做用于 DOM。函数

<div id="box" x-if="seen">{{msg}}</div>
var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派传人",
        seen:false
    }
})
汪派传人

当咱们更改了seen为false时,div不会被显示。性能

参数

一些指令可以接收一个"参数",在指令名称以后以冒号表示,例如上面哦咱们使用过的V-bind指令。

<button v-bind:disabled="isButtonDisabled">Button</button>

在这里disabled是参数,告知 v-bind 指令将该元素的 disabled 属性与表达式 isButtonDisabled 的值绑定。
另外一个例子是 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">

修饰符

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

<div v-on:click.prevent="a">{{msg}}</div>

在js中,咱们在Vue实例中使用methods属性使用修饰符

var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派传人",
    },
    methods:{
        a:function(){
            console.log("执行")
        }
    }
})

控制台打印

执行

过滤器

Vue.js 容许你自定义过滤器,可被用做一些常见的文本格式化。过滤器能够用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:

<div v-on:click.prevent="a">{{msg|fangfa}}</div>

在js中,咱们在Vue实例中使用filters属性使用修饰符

var vm = new Vue({
    el:"#box",
    data:{
        msg:"vue.js",
    },
    filters:{
        fangfa:function(value){
            console.log(value)
            return value.split("").reverse().join("")
        }
    },
})
sj.euv

过滤器能够串联,例如

<div v-on:click.prevent="a">{{msg|fangfa}}</div>
var vm = new Vue({
    el:"#box",
    data:{
        msg:"vue.js",
    },
    filters:{
        fangfa:function(value){
            console.log(value)
            return value.split("").reverse().join("")
        },
        fangfa2:function(value){
                return value.split("").reverse().join("")
            }
    },
})
vue.js

过滤器是 JavaScript 函数,所以能够接收参数:

{{ msg | fangfa('arg1', arg2) }}

这里,fangfa 被定义为接收三个参数的过滤器函数。其中 msg 的值做为第一个参数,普通字符串 'arg1' 做为第二个参数,表达式 arg2 取值后的值做为第三个参数。

缩写

v- 前缀做为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为(dynamic behavior)时,v- 前缀颇有帮助,然而,对于一些频繁用到的指令来讲,就会感到使用繁琐。同时,在构建由 Vue.js 管理全部模板的单页面应用程序(SPA - single page application)时,v- 前缀也变得没那么重要了。所以,Vue.js 为 v-bind 和 v-on 这两个最经常使用的指令,提供了特定简写:

v-bind 缩写

用一个 : 表示

<!-- 缩写前 -->
<a v-bind:href="url"></a>
<!-- 缩写后 -->
<a :href="url"></a>

v-on 缩写

用@表示

<!-- 缩写前 -->
<a v-on:click="dianji"></a>
<!-- 缩写后 -->
<a @click="dianji"></a>

计算属性

实例

<div id="box">
    <p>{{reversedmsg}}</p>
</div>
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        reversedmsg:function(){
            return this.msg.split('').reverse().join('')
        }
    }
})
dcba

计算属性的缓存 vs method 方法

计算属性的缓存

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 msg 尚未发生改变,屡次访问 reversedmsg 计算属性会当即返回以前的计算结果,而没必要再次执行函数。

口说无凭,下面咱们测试一下他是否具备缓存

<div id="box">
    <p>{{resversedmsg}}</p>
    <p>{{resversedmsg}}</p>
    <p>{{resversedmsg}}</p>
    <p>{{resversedmsg}}</p>
</div>
var a = 1;
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        resversedmsg:function(){
            a++;
            return a
        }
    }
})
2
2
2
2

resversedmsg第一次调用时,a++;这时a=2,第二次调用时,结果是2;这就证实了咱们刚说的只有第一次调用时进行计算,而之后的调用由于msg没有改变,因此直接调用了缓存的数据。

method

<div id="box">
    <p>{{remsg()}}</p>
    <p>{{remsg()}}</p>
    <p>{{remsg()}}</p>
    <p>{{remsg()}}</p>
</div>
var a = 1;
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    methods: {
    remsg: function () {
        a++,
        return a
        }
    }
})
2
3
4
5

这就说明了 method 相比 计算属性 来讲,假设咱们有一个性能开销比较大的的计算属性 A,它须要遍历一个极大的数组和作大量的计算。而后咱们可能有其余的计算属性依赖于 A 。若是没有缓存,咱们将不可避免的屡次执行 A 的 getter!若是你不但愿有缓存,请用 method 替代。

计算属性 vs watched属性

watched属性监听

Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变更:watch 属性。当你有一些数据须要随着其它数据变更而变更时,你很容易滥用 watch。一般更好的想法是使用 computed 属性而不是命令式的 watch 回调。

<div id="box">
    <p>{{msg3}}</p>
    <input type="text" v-model="msg1">
    <input type="text" v-model="msg2">
</div>
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd",
        msg1:1,
        msg2:2,
        msg3:3,
    },
    watch:{
        msg1:function(val){
            this.msg3=val+this.msg2
        }
        msg2:function(val){
            this.msg3=this.msg1+val
        }
    }
})

然而咱们会发现咱们还能够用计算属性来控制msg3的改变

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd",
        msg1:1,
        msg2:2,
        // msg3:3,
    },
    computed: {
        msg3: {
        function () {
                return this.msg1 + this.msg2
            }    
        }
    } 
})

计算 getter和setter

当咱们使用计算属性时,计算属性默认时getter(获取),不过咱们有时还须要更改(setter)

computed: {
    msg3: {
        // getter
        get: function () {
            return this.msg1 + this.msg2
        },
        // setter
        set: function (newValue) {
                this.msg1=newValue
            }
    }
}

当咱们在控制台上输入vm.msg3=100时,msg1也会随之改变。

观察 Watchers

虽然计算属性在大多数状况下更合适,但有时也须要一个自定义的 watcher。

var vm = new Vue({
    el: '#box',
    data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
    },
  watch: {
    // 若是 question 发生改变,这个函数就会运行
    question: function (newQuestion) {
        this.answer = 'Waiting for you to stop typing...'
        this.getAnswer()
    }
  }
});

在这个实例中,watchers会监听data里的question属性,当question发生改变时,answer会发生改变。使用 watch 选项容许咱们执行异步操做 (访问一个 API),限制咱们执行该操做的频率,并在咱们获得最终结果前,设置中间状态。这是计算属性没法作到的。

相关文章
相关标签/搜索