写在前面
今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者、社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓的争论;到尤雨溪知乎回应大漠穷秋,表态遗憾大漠穷秋离职,希望世界和平。
其实我觉得更多的是两者社区、用户、粉丝态度过激导致争端,所以我们要怀着一颗理性的心态去看待,切不要党同伐异。
之前在图灵社区读过一篇文章《Vue作者尤雨溪:以匠人的态度不断打磨完善vue》,
先来一发福利照 - -
里面也有尤雨溪一些对于开发vue的想法,总结下来就是:轻量化,快速上手,灵活运用;
也有给我们的一些建议,简单总结就是:保持好奇心,在业余时间多做尝试,以兴趣为动力,把兴趣推进一步,保持一种持续学习,持续研究的状态,多探索,多尝试;
前缀有点长,请放下手里的西瓜刀,接下来进入今天的正正题吧~~
模板语法
谈到到模板语法,我们就会想起数据绑定和指令:
我们可以通过声明式的方式将DOM绑定至vue实例的数据:
先来聊一聊数据绑定:
1)数据绑定
关键词:[ 插值表达式 ],[ v-once一次性插值 ],[ v-html ],[ 作用于特性v-bind ]
数据绑定最常用的形式应该就是“Mustache”语法 (双大括号) 的文本插值,无论是vue,还是angular,小程序都采用了这种方式的文本插值
而v-once指令也好理解,一次性插值,当我们在改变数据的时候,插值的内容不会随之改变,写一个例子:
<div id="app9" v-once>这个将不会随之改变:{{msg}}</div> |
插值表达式双大括号就将数据解释为普通文本,而非HTML。使用v-html指令,可以输出html,但是我们一般不这么做,对于复杂需复用的用组件代替效果更佳
Mustache 语法不能作用在 HTML 特性上,我们使用v-bind作用于特性,写一个例子:
通过v-bind绑定disabled属性
<input id="app10" type="button" v-model='message' v-bind:disabled="isButtonDisabled"> |
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> |
我们看了一下效果,看来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"> |
- v-model 双向绑定 ,使用v-model实现双向数据绑定,
在看vue双向数据绑定之前,我们先看一下一个简单的angular的双向数据绑定:
<div ng-app="myApp"> |
再来写一个vue的双向绑定例子:
<!-- 双向绑定:v-model --> |
从我个人而言,在这里相比之下,vue的代码编写风格更加简洁易懂;
计算属性和观察者
vue支持内联表达式,可以完成简单的布尔操作,字符串拼接;但是如果涉及更复杂的逻辑,就需要用到计算属性了
计算属性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> |
写在后面
前端的一些技术都是融会贯通的,学习一门语言或者框架本身并不是为了学习它的技术,最重要的是学习它的思维,只有思维层面得到了延伸,学习其他技术的时候会发现得心应手。
比如vue利用data设置暴露数据,小程序利用data和setData()暴露数据;
两者的列表渲染:vue是v-for循环同时利用for-in迭代器 (item in items) ,小程序wx-for循环同时利用 wx:for-item=”item”,angular则是ng-repeat渲染列表
Vue带给我们的是前端一种解决问题的新的思维,我们应该欣然接受它