vue之路Vue.jsWeb前端之路

Vue.js学习笔记(3)

2016-06-11  本文已影响1269人  封小胖

© fengyu学习

端午节最后一天,坚持就是胜利。

开始 ** Vue.js ** 的第三次学习吧!

本次学习主要内容: ** 再探数据绑定 ** 、 ** computed属性 **

1、再探数据绑定

在 ** MVVM ** 框架中,** Data Bindings ** 可是重中之重,尽管我们已经了解了一些数据绑定的写法,但是还有一些需要补充的新知识!

1.1、Mustache语法

当我看到这个词的时候,我的内心是疑惑的,为什么将 ** 双大括号 ** 即 {{ content }} 这种语法称之为 ** Mustache ** 语法。

直到我查询了这个词的中文翻译,才豁然开朗

mustache 英[mə'stɑ:ʃ] 美[ˈmʌsˌtæʃ, məˈstæʃ]

n.胡子; 髭; 须状物; (哺乳动物的) 触须;

这个 ** 胡子 ** 这个形象的比喻, 把 ** 双大括号 ** 形容的十分恰当。

尽管纠结名词叫法并没有什么实际意义,但是也给学习过程平添了不少意外之喜!

闲话不多说,下面来聊聊 ** Mustache ** 在 ** Vue ** 中的使用

// 第一种场景:普通使用
<div id="vue_demo1">
    {{ content }}
</div>
<script>
    var demo1 = new Vue({
        el: '#vue_demo1',
        data: {
            content: 'Mustache普通使用'
        }
    })
</script>

// 第二种场景:显示数据中的html
<div id="vue_demo2">
    {{{ content }}}
</div>
<script>
    var demo2 = new Vue({
        el: '#vue_demo2',
        data: {
            content: '<p style="color:red">Mustache显示HTML</p>'
        }
    })
</script>

注意 :显示数据中的html需要使用 ** 三个大括号 ** 、可能叫 ** Big-Mustache ** 语法吧!

PS :千万不要直接使用此语法显示用户提交的内容,可能会导致 XSS 攻击


// 第三种场景:在Mustache语法中,可以解析js
<div id="vue_demo3">
    {{ content + " Javascript表达式使用" }}
</div>
<script>
    var demo3 = new Vue({
        el: '#vue_demo3',
        data: {
            content: 'Mustache'
        }
    })
</script>

注意 : 仅能够使用 单个 表达式,不能用多条语句


还有一种方式,称为 绑定过滤器 ,由于之前没有接触过,所以单独起一个小标题,讲讲内置的过滤器!

1.2、内置过滤器 filter

学习中发现了3个 Vue 内置的过滤器

下面是使用uppercase的栗子

<div id="vue_demo4">
    {{ content | uppercase}}
</div>
<script>
    var demo4 = new Vue({
        el: '#vue_demo4',
        data: {
            content: 'abcdefg'
        }
    })
</script>

效果为:

ABCDEFG

尽管在示例中,filter 并没有发挥很强的功效,但是我发现了他的 个优点


可能有小伙伴会问,这说出花来的东西,能不能自定义啊!

答案是肯定的,不过我还没研究到自定义。

而且据最近看的一些资料,Vue2.0 会取消过滤器,我没有验证这个观点的真实性。所以自定义放到以后再聊!

1.3、指令

还记得 v-ifv-forv-model么,原来这些以 v- 开头的属性,有一个专用名称 —— 指令(Directives)

而如 v-on:click 冒号后面的,被称为 指令 的 参数 ,** 参数 ** 是用来告诉 ** Vue ** 对象,该属性应该和 ** HTML ** 的什么属性进行绑定

举个栗子:

<div id="vue_demo5">
    <a v-bind:href="url">Vue指令</a>
</div>
<script>
    var demo5 = new Vue({
        el: '#vue_demo5',
        data: {
            url: 'http://cn.vuejs.org/guide/syntax.html#指令'
        }
    })
</script>

v-bind 指令的参数为 href ,即将 A 元素的 href 属性与 Vue 实例对象的 url 属性进行了关联

v-bind 指令后面,不仅可以跟着参数,还可以添加修饰符,还是刚才的栗子:

<div id="vue_demo6">
    <a v-bind:href.literal="http://cn.vuejs.org/guide/syntax.html#指令">Vue指令</a>
</div>
<script>
    var demo6 = new Vue({
        el: '#vue_demo6'
    })
</script>

当参数后,以 ** . + 修饰符 ** 的形式,添加了 literal 修饰符后,A 元素绑定的 href 属性值,就可以直接使用字符串了!

此外,v-bindv-on 还有缩略写法

2、computed 属性

computed 顾名思义:计算。

当我了解这个属性的作用时,简直太佩服作者的奇思妙想了,如此牛X的一个属性,给我们带来了好大的便捷。

computed的作用:当数据中有参数的值,会随着多个其他参数的值变化时,使用computed属性,能快捷的实现两者的关联。

有点拗口,究竟是什么意思呢,举个计算总分的例子,您看完后,肯定和我一样,会觉得computed简直神了!

<!-- 计算总分 -->
<div id="vue_demo9">
    语文:<input type="text" v-model="Chinese" number>
    数学:<input type="text" v-model="math" number>
    英语:<input type="text" v-model="English" number>
    总分:<label>{{score}}</label>
</div>
<script>
    var demo9 = new Vue({
        el: '#vue_demo9',
        data:{
            Chinese: 100,
            math: 90,
            English: 80
        },
        computed: {
            score: function(){
                return this.Chinese + this.math + this.English;
            }
        }
    })
</script>

这个程序会产生如下效果,改变语文、数学或是英语中,任何一项的值,总分都会重新计算

语文:100 数学:100 英语:80 总分:280

先描述一下这个程序:

再对比一下,如果使用原生js来实现这段代码,两者的工作量,真的天差地别。


我是根据,计算属性这一章,来学习的computed属性

文章中有提到 $watchcomputed 的对比,大赞 computed 在多属性变更下,更为出彩的表现!

个人认为(没有看过源码,YY的),computed$watch 在原理层面应该是相差无几的,主要是 computed 强调的是 计算,而 watch 强调的是 监控

我不知道是否 computed 属性只是一个 多层监控 的封装,这可以以后再研究。

现在需要掌握的是,如何将两者带给我们的便捷,应用在具体的场景中,达到 物尽其用、人尽其才 的目的


文章中还提到了setter方法,

由于暂时没有想到太好的例子,我就直接传送门了计算属性的set方法

不过从这,也可以发现为什么 Vue.js 只能支持 IE9+ 浏览器的其中一个原因了,使用了 setget 访问器。

这两个方法是 ** ECMAScript 5 ** 的特性,_!

3、结语

** Vue ** 的基础知识学习也有 1/3 了,这门 MVVM 框架语言,带给了我很多惊喜。

java web 转到前端开发,也有一年的时间了。原来颇有些完成任务即可,不思进取的心态,正在渐渐扭转。

明天又要上班了,希望可以把这个系列的学习笔记,坚持写完。

王阳明老先生说的好啊,知行合一,既然道理都明白了,怎么会有做不到的道理呢?

与诸位小伙伴共勉!

上一篇 下一篇

猜你喜欢

热点阅读