基础 - 从模板语法数据绑定、指令到计算属性总结

写在前面

今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者、社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓的争论;到尤小右(尤雨溪)知乎回应大漠穷秋,表态遗憾大漠穷秋离职,希望世界和平。

其实我觉得更多的是两者社区、用户、粉丝态度过激导致争端,所以我们要怀着一颗理性的心态去看待,切不要党同伐异。

 说了点题外话,进入今天的正题 - -

今天的主题是vue,也是我之前在初步学习vue和angular之后,选择vue的第二天,因为已经凌晨了,但是我不想去排斥其他,应该多多学习不同前辈们的智慧结晶 ;

之前在图灵社区读过一篇文章《Vue作者尤雨溪:以匠人的态度不断打磨完善vue》

先来一发福利照 - - 

里面也有尤小右一些对于开发vue的想法,总结下来就是:轻量化,快速上手,灵活运用;

也有给我们的一些建议,简单总结就是:保持好奇心,在业余时间多做尝试,以兴趣为动力,把兴趣推进一步,保持一种持续学习,持续研究的状态,多探索,多尝试;

前缀有点长,请放下手里的西瓜刀,接下来进入今天的正正题吧~~

模板语法

关键词:[数据绑定],[指令]

谈到到模板语法,我们就会想起数据绑定和指令:

我们可以通过声明式的方式将DOM绑定至vue实例的数据:

先来聊一聊数据绑定:

1)数据绑定

关键词:[ 插值表达式 ],[ v-once一次性插值 ],[ v-html ],[ 作用于特性v-bind ]

丶数据绑定最常用的形式应该就是“Mustache”语法 (双大括号) 的文本插值,无论是vue,还是angular,小程序都采用了这种方式的文本插值

丶而v-once指令也好理解,一次性插值,当我们在改变数据的时候,插值的内容不会随之改变,写一个例子:

<div id="app9" v-once>这个将不会随之改变:{{msg}}</div>

<script>
    var app9 = new Vue({
        el: '#app9',
        data: {
            msg: '我是一次性插入的内容'
        }
    })
    // => 数据改变,插值内容不会随之改变
    app9.msg = 1;     
    console.log(app9.msg);   // => '1'
</script>

丶插值表达式双大括号就将数据解释为普通文本,而非HTML。使用v-html指令,可以输出html,但是我们一般不这么做,对于复杂需复用的用组件代替效果更佳

丶Mustache 语法不能作用在 HTML 特性上,我们使用v-bind作用于特性,写一个例子:

 通过v-bind绑定disabled属性

<input id="app10" type="button" v-model='message' v-bind:disabled="isButtonDisabled">

<script>
    var app10 = new Vue({
            el: '#app10',
            data: {
                message: 'v-bind绑定标签特性',
                isButtonDisabled: false
            }
      })
</script>

2)指令

关于指令,上面我们已经用到几个了,指令是带有 v- 前缀的特殊属性,angular中的指令是 ng- 开头

关键词分类:[ v-bind绑定标签属性 ],[ v-if条件 ],[ v-for循环 ],[ v-on绑定事件 ] ,[ v-model双向绑定 ],[ v-show显示隐藏 ],[ v-text/v-html读取 ],[ v-once一次性插值 ]

上面列出了指令关键词的一些分类,对于条件指令:存在v-if,那么我们就会想到有没有v-else,v-else-if指令,这点上作者满足了我们的猜想;

丶v-bind 绑定标签属性,说起标签属性,我们都知道,class、id、href、disabled...等等这些都是属于标签的属性,上面写了一个绑定disabled属性的例子,那么v-bind对于绑定class是不是那么得心应手呢?

<style>
    .red {
        background: red;
    }
    .blue {
        width: 100px;
        height: 100px;
        background: blue;
    }
    </style>
</head>

<body>
    <div id="box">
        <div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>
        <div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data() {
                return {
                    isred: false
                }
            }
         })
    </script>

我们看了一下效果,看来v-bind可以很好的操作标签属性,包括class、id等这些

丶v-if 主要做添加判断,操作删除Dom元素,来写一个简单的例子:

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

丶v-for 做循环遍历数据等,并通过插值表达式将它们输出到页面

丶v-on 绑定事件,能绑定的事件有很多:参考 MDN 事件类型一览表,写一个click的例子:

<div id="app5">
     <p>{{message}}</p>
     <button v-on:click="reverseMessage">逆转消息</button>
</div>

<script>
 var app5 = new Vue({
     el: '#app5',
     data: {
         message: 'hello v-on!'
     },
     methods: {
         reverseMessage: function() {
             this.message = this.message.split('').reverse().join('')
         }
     }
 })
</script>

丶v-model 双向绑定 ,使用v-model实现双向数据绑定,

在看vue双向数据绑定之前,我们先看一下一个简单的angular的双向数据绑定:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <p>{{ note }}</p>
        <input type="text" ng-model="note">
    </div>
</div>

<script>
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
    $scope.note = '';
]);
</script>

再来写一个vue的双向绑定例子:

<!-- 双向绑定:v-model -->
<div id="app6">
     <p>{{message}}</p>
     <input type="text" v-model="message" v-on:change='textChange'>
</div>

<script>
 var app6 = new Vue({
     el: '#app6',
     data: {
         message: 'hello v-modle!'
     },
     methods: {
         textChange: function() {
             console.log(this.message);
         }
     }
 })
</script>

从我个人而言,在这里相比之下,vue的代码编写风格更加简洁,通俗易懂;

计算属性和观察者

vue支持内联表达式,可以完成简单的布尔操作,字符串拼接;但是如果涉及更复杂的逻辑,就需要用到计算属性了

关键词:[ 计算属性computed ],[  计算属性computed  VS 方法methods ],[ 计算属性computed VS 监听属性watch ],[ 计算属性的setter ],[ 侦听器watch ]

丶计算属性computed VS 方法methods,特点:计算属性 依赖缓存,不必每次执行函数,直到相关值发生变化时才重新计算

丶计算属性computed VS 侦听watch,特点:watch 过程式,$watch回调

<div id="app11">
     <p>Original message:"{{ message }}"</p>
     <p>Computed reversed message:"{{ reversedMessage1 }}"</p>
</div>
<div id="app12">{{fullName}}</div>

<script>
// 计算属性
    var app11 = new Vue({
     el: '#app11',
     data: {
         message: 'Hello'
     },
     computed: {
         // 计算属性的getter
         reversedMessage1: function() {
             return this.message.split('').reverse().join('');
         }
     }
 })
 // watch侦听属性
 var app12 = new Vue({
     el: '#app12',
     data: {
         firstName: 'foo',
         lastName: 'bar',
         fullName: 'foo bar'
     },
     watch: {
         firstName: function(val) {
             this.fullName = val + ' ' + this.lastName;
         },
         lastName: function(val) {
             this.fullName = this.firstName + ' ' + val;
         }
     }
 })
</script>

这种情况下,我们往往选择计算属性。

丶计算属性的setter,像上面那样,一般computed计算属性默认只有一个getter,但是如果有需要可以提供一个setter给计算属性;

<div id="app13">{{fullName}}</div>

<script>
 // 计算属性的setter
 var app13 = new Vue({
     el: '#app13',
     data: {
         firstName: 'okay',
         lastName: 'chen',
         fullName: 'okay chen'
     },
     computed: {
         fullName: {
             // getter
             get: function() {
                 return this.firstName + ' ' + this.lastName
             },
             // setter
             set: function(newValue) {
                 var names = newValue.split(' ')
                 this.firstName = names[0]
                 this.lastName = names[names.length - 1]
             }
         }
     }
 })
 app13.fullName = 'john Doe';
 console.log(app13.fullName);
</script>

写在后面

前端的一些技术都是融会贯通的,学习一门语言或者框架本身并不是为了学习它的技术,最重要的是学习它的思维,只有思维层面得到了延伸,学习其他技术的时候会发现得心应手。

学习vue我往往联想到小程序,虽然我没有做过vue的项目,但是做过几个小程序的项目,发现他们之间或多或少有些相识之处,

比如vue利用data设置暴露数据,小程序利用data和setData()暴露数据;

两者的列表渲染:vue是v-for循环同时利用for-in迭代器 (item in items) ,小程序wx-for循环同时利用 wx:for-item="item",angular则是ng-repeat渲染列表

Vue带给我们的是前端一种解决问题的新的思维,我们应该欣然接受他,也应该欣然接受那些你暂时没有选择或者考虑在内的框架;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩伟的专栏

框架设计原则和规范(一)

此文是《.NET:框架设计原则、规范》的读书笔记,本文内容较多,共分九章,将分4天进行推送,今天推送1-3章。 1. 什么是好的框架 2. 框架设计...

3435
来自专栏恰同学骚年

设计模式的征途—10.装饰(Decorator)模式

虽然目前房价依旧很高,就连我所在的成都郊区(非中心城区)的房价均价都早已破万,但却还是阻挡不了大家对新房的渴望和买房的热情。如果大家买的是清水房,那么无疑还有一...

693
来自专栏智能大石头

最终版 Reflector v1.0 (+简单的反流程混淆)

(0415增加简单的反流程混淆功能,满足日常使用需要,不再更新,转向ILSpy,见12点后面) Reflector过期?这可不行!自己动手吧! 看雪上拿到Ref...

1845
来自专栏图像识别与深度学习

《Android》Lesson07-隐式Intent***注意:需要把super.onBackPressed();注释掉

15910
来自专栏一个会写诗的程序员的博客

干货来袭,推荐几款开源的Kotlin的Android项目

Google IO大会,谷歌宣布,将Kotlin语言作为安卓开发的一级编程语言。刷新Android的各大论坛,朋友圈,微信群。是时候总结一波Kotlin的And...

671
来自专栏java一日一条

我的编码习惯 - Controller规范

第一篇文章中,我贴了2段代码,第一个是原生态的,第2段是我指定了接口定义规范,使用AOP技术之后最终交付的代码,从15行到1行,自己感受一下。今天来说说大家关注...

621
来自专栏用户画像

白盒测试与黑盒测试的定义与区别

白盒测试方法按照程序内部的结构测试程序,检验程序中的每条通路是否都能按预定要求正确工作,而不顾它的功能。

432
来自专栏wOw的Android小站

[Objective-C] Block实现回调和简单的学习思考

关于Objective-C的回调,最常见的应该是用delegate代理实现。不过代理的实现比起Block要更基础,就不介绍了,下面总结一下Block回调的实现。

552
来自专栏CRPER折腾记

一篇不大靠谱的常用正则表达式汇总(前端)

我没有那么多奇奇怪怪的正则,这些都是工作中很常见的, 所有正则都是经过真实环境下的考验,不是假想推断的正则....

723
来自专栏架构之路

spark 2.3 导致driver OOM的一个SparkPlanGraphWrapper源码的bug

长话短说,我们部门一个同事找到我,说他的spark 2.3 structured streaming程序频繁报OOM,从来没有坚持过超过三四天的,叫帮看一下。 ...

652

扫码关注云+社区