每个Java工程师都有个全栈的梦，本文为学习菜鸟教程Vue.js时所写，作为学习笔记，没有教程那么详细，建议与教程交互着看比较好，因为有些教程没写到的地方，我自己查资料做了补充。
写在前面
使用vue，要在网页上引入vue.js，如下：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
每个vue应用都要靠实例化vue来实现，其语法格式如下：
<script>
var vm = new Vue({
// 内容
})
</script>
1 双大括号
双大括号可以表示文本内容，语法如下：
<div id="app">
<p>{{ message }}</p>
</div>
也可以表示JavaScript的表达式：
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
</div>
表达式除了在{{…}}中使用，在很多地方都可以用。
2 v-html
v-html用于输出HTML代码，如下：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
这里的vue实例内部有两个属性，其中：
- el：表示vue实例挂载的元素节点，比如本例中vue实例就挂载在id为app的div标签上
- data：表示vue内部的数据，数据以键值对的方式呈现
上述代码就相当于：
<div id="app">
<h1>菜鸟教程</h1>
</div>
3 v-if v-else-if v-else
学过编程的应该都能理解这个if-else结构，当判断条件为true时，显示标签元素，反之则不显示：
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
4 v-show
v-show指令可以根据条件来显示元素：
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
当ok为true时，显示Hello!，反之则不显示。
4.1 v-show与v-if的区别
就上述1.3和1.4的两个例子来看，好像v-show跟v-if的功能是完全一样的，v-show根本没有存在的必要，根据查阅资料得：
- 共同点：两者都能够控制元素的显示和隐藏
- 不同点：
- v-show对元素的显示隐藏是基于对display属性的操作，而v-if则是对元素的渲染和销毁（当条件为true时，渲染元素，当条件为false时，销毁元素）
- v-show首次渲染开销比较大，而v-if首次渲染开销小
- v-show控制元素显示隐藏的开销小，而v-if控制元素切换的开销大
资料来源：vue中v-if和v-show的区别
5 v-for
vue中的for循环采用site in sites的语法，其中sites就是被遍历的集合，site就是集合中的元素.
5.1 遍历数组
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
5.2 迭代对象
通过对象属性迭代对象：
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
用key、value迭代对象：
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
在key、value的基础上加个索引迭代对象：
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
5.3 迭代整数
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
6 v-bind
v-bind用于绑定属性，通常比较多的用法是设置样式属性，在前端页面中，样式属性通常用class和style来进行设置，而v-bind对两者做了很好的支持以及增强，譬如通过设置一个对象来动态切换class：
<div v-bind:class="{ 'active': isActive }"></div>
当isActive值为true的时候，上述代码等价于：
<div class="active"></div>
当然，在大括号里，我们可以放多个对象，来提供更多的class切换选择，如下：
<div class="static" v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }"></div>
这里active，text-danger都为样式
注：两个样式谁覆盖谁，取决于两个样式在代码中的定义顺序，后者覆盖前者
也可以直接绑定一个数组：
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
也可以在列表中使用三元表达式：
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
同样，v-bind对style的支持也有以上这些类似的操作。当然v-bind除了绑定class和style，还可以绑定其他属性。
v-bind在使用时，可以使用缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
7 v-on
v-on用于事件监听，比如：
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
当按钮被点击的时候，执行表达式“counter+=1”，click后面可以跟表达式，也可以跟方法，譬如：
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
方法可以传值，也可以不传值。
与v-bind相同，v-on在使用的时候也可以使用缩写：
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
8 v-model
v-model用于跟元素创建双向数据绑定：
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鸟教程\r\nhttp://www.runoob.com'
}
})
</script>
9 计算属性
前面说到，我们可以在双大括号中编写表达式，比如一个字符串的翻转表达式，要在代码中多处用到，就可以使用计算属性：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
这里声明了reversedMessage计算属性，以及它的getter方法，该方法用于获取reversedMessage的值，有了这个计算属性，就可以在代码中复用了。有getter方法就有setter方法，用来设置计算属性的值：
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
9.1 computed与methods的区别
计算属性和方法所能实现的效果，其实是一样的，区别就在于缓存，计算属性在第一次计算后，如果参数没有发生变化，后续调用计算属性的getter，是不会重新进行计算的，而是直接把缓存返回，而方法则是每次调用都要重新执行方法内的语句。
10、监听器
监听器watch可以响应数据的变化，如下是使用watch实现的计数器：
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
当按钮的click事件触发后，counter值就会加一，而counter值变化时，就会触发监听器，同时执行函数function(nval, oval)，其中nval为counter的新值，oval为counter的旧值。
写在后面
在写这篇博客的时候，查阅了相关资料，发现菜鸟教程的vue.js教程其实就是照搬vue官方文档，而且官方文档其实写的很清楚，所以想学习vue的朋友也可以直接去官网！
扫一扫
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
