【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性
写在前面
今年前端届比较有意思，从大漠穷秋发表文章比较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带给我们的是前端一种解决问题的新的思维，我们应该欣然接受他，也应该欣然接受那些你暂时没有选择或者考虑在内的框架；
【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性的更多相关文章
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- Vue浅谈
谈Vue 最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎. 1.Vue工程的安装 (1)首先先安装node.js这是Vue的运行基础. ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- vue入门：（模板语法与指令）
vuejs使用及HTML的模板语法,可以实现声明式将DOM绑定至底层VUE实例的数据.通过模板语法将数据渲染进DOM的系统,结合响应系统,在应用状态改变时,Vue能够计算出重新渲染组件的最小代价并应用 ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
随机推荐
- Android微信登录、分享、支付
转载需要著名出处: http://blog.csdn.net/lowprofile_coding/article/details/78004224 之前写过微信登录分享支付第一版: http://bl ...
- 《Java程序设计》终极不改版
半年前的作品,上传只为纪念~ 成绩: ____0.1______ Java程序设计 课程设计 题 目:大学生信息管理系统 学 院: 计算机与软件学院 专 业: 网络工程_____ . ...
- Beta版本冲刺计划及安排（附七天冲刺的博客链接）
Beta版本冲刺计划及安排(附七天冲刺的博客链接) 新增组员 本次换人加入我们团队的新成员是原"爸爸说的都队"的队长念其锋同学,经过我们小组严格的两轮面试,他从几个同样前来面试的同 ...
- 201521123074 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 用Arrar ...
- 201521123050 《Java程序设计》第14周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 1.1立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) ...
- 201521123122 《java程序设计》第十周学习总结
## 201521123122 <java程序设计>第十周实验总结 ## 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次P ...
- java课程设计 猜数游戏 个人
1.团队课程设计博客链接 /http://www.cnblogs.com/ohanna/p/7064305.html 2.个人负责模块说明 1.进入界面: 2.成功玩家信息的录入: 3.信息的读出 3 ...
- 控制结构(1) 分枝／叶子(branch/leaf)
// 下一篇:卫语句(guard clause) 典型代码: function doSomething1(){ // ... } function doSomething2(){ // ... } f ...
- 模拟实现一个ATM+购物商城程序
记得上次小编上传了一个购物车程序,这次呢稍微复杂一点,还是那句话,上传在这里不是为了炫耀什么,只是督促小编学习,如果大神有什么意见和建议,欢迎指导.(PS:本次主要参考学习为主,自己原创的很少) 要求 ...
- 解决python第三方插件下载慢的方法
在CMD中输入: pip install 插件名字 --trusted-host pypi.douban.com -i http://pypi.douban.com/simple 就是更换国内源