你想知道的vue的模板语法

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_33971977

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量150

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010937148

版权

模板语法

插值

文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

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

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

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

纯HTML

Mustache语法是将数据渲染到模板，但是渲染上去的是纯文本，我们不能够输出真正的HTML。如果我们需要渲染一个HTML，我们需要shi用v-html指令：

<div id="box" v-html="msg"></div>

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

血染的风采

特性

mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

<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
    }
})

但是在Mustache语法中不能是同语句。例如：

{{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
        }
    }
})

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
        }
    }
})

这就说明了 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)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

weixin_33971977

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
你想知道的vue的模板语法

模板语法插值文本数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：<span>Message: {{ msg }}</span>Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。通过使...
复制链接

扫一扫