最好的教程不是老师给的笔记，而是官方文档
最近在学习vue，按照官方文档把基础知识点撸一遍，回顾一下。。。
使用
通过<script>脚本引入
<script src="./vue.js"></script><!-- 开发环境版本，包含了有帮助的命令行警告 -->
或者
<script src="./vue.min.js"></script><!-- 生产环境版本，优化了尺寸和速度 -->
声明式渲染
模板语法
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
所以我们可以通过 {{ }} 一对双大括号的形式加载数据
这也是vue数据绑定中最常见的形式
例如：
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
template: '', //模板渲染的内容
data: {
message: '您好！'
}
})
</script>
在这里，如果template属性的值为空，他将渲染你页面上的id为app的div元素。
new Vue({
el: '#app',
template: '<div>新的模板</div>', //模板渲染的内容
data: {
message: '您好！'
}
})
但是如果在template里面添加了内容，
new Vue({
el: '#app',
template: '<div>新的模板</div>', //模板渲染的内容
data: {
message: '您好！'
}
})
此时，再打开浏览器，他渲染的内容就是<div>新的模板</div>这个div元素。
注意：template只允许里面定义一个根元素
“{{ }}”不仅可以是一个值，他还可以是某个JavaScript表达式
例如：
<div id="app">
{{ 1==1 }} , {{ 1>2 ? '真':'假' }}
</div>
v-text
v-text用于往某一个html元素里面添加内容，相当于Javascript中的innerText方法。
v-text指定的值，就是在vue实例中data函数返回的属性名称。
使用：
<div id="app">
<p v-text="msg"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: "123456"
}
})
</script>
可以看到：msg这个属性的值就被渲染到了p标签里面显示。
v-html
v-html用于往某一个html元素里面添加内容，相当于Javascript中的innerHtml方法。
与v-text不同，v-text只能插入纯文本，而v-html可以插入含有html标签的文本。
v-once
v-once用于给元素一次性插值，当数据改变时，插值处的内容不会更新。
<div id="app">
<p v-once>{{ msg }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
msg: "你好"
}
})
以上我们给p标签加上了v-once指令，接下来我们更改msg的值，
app.msg = '123'
可以看到，页面上的”你好“并没有随之改变为”123“。
v-bind
v-bind指令用于给html属性绑定一个动态的值
这也是vue的单向数据绑定实现的一种方式
举个例子：通过v-bind指令给元素动态添加类样式。
.box {
background-color: #FF0000;
width: 200px;
height: 200px;
}
.active {
background-color: #FFFF00;
}
<div id="app">
<!-- 表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。 -->
<div class="box" v-bind:class="{active:isActive}">
我是内容
</div>
</div>
var app = new Vue({
el: "#app",
data: {
isActive: false
}
})
当修改isActive的值后，
active的样式被追加到了div元素上。所以我们可以在对象中传入更多属性来动态切换多个 class
条件与循环
在vue中，所有以"v-"开头的均被称为指令。
v-if
还是以上面的示例为例
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
template: '<div>新的模板'+
'<p v-if="isShow">我是内容</p>'+
'</div>', //模板渲染的内容
data: {
message: '您好！',
isShow: true
}
})
运行效果
如果将isShow的值改为false
new Vue({
el: '#app',
template: '<div>新的模板'+
'<p v-if="isShow">我是内容</p>'+
'</div>', //模板渲染的内容
data:{
message: '您好！',
isShow: false
}
})
也可以这样
var app = new Vue({
el: '#app',
template: '<div>新的模板'+
'<p v-if="isShow">我是内容</p>'+
'</div>', //模板渲染的内容
data:{
message: '您好！',
isShow: true
}
})
app.isShow=false; //修改isShow的值为false
就会看到
刚才在红框部分显示的文字消失了。
注意：2处红框的注释，是你在使用v-if指令时，如果可见为false，vue就会在你的DOM结构里面加上这个注释，表示未来有可能出现的DOM元素。
所以我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构
v-else
和v-if一起用，用于条件渲染
<div id="app">
<p v-if="status">Do everything...</p>
<p v-else>Nothing to show.</p>
</div>
var app = new Vue({
el:'#app',
template:'',
data:{
status: true
}
})
运行可以看到，页面上显示的是第一个p标签的内容
同样，现在执行
app.status=false
就会看到，页面上渲染了第二个p标签显示的内容
v-else-if
同样，和v-if一起用，当有多个条件渲染时使用。
<div id="app">
<p v-if="status==0">男</p>
<p v-else-if="status==1">女</p>
<p v-else>未知</p>
</div>
var app = new Vue({
el:'#app',
template:'',
data:{
status: 0
}
})
通过status的值决定页面显示哪部分文字。
效果如下：
然后我们来修改status的值
可以看到，页面的显示也发生了变化。
再试试...
当设置status的值为3时，显示未知。所以，通过v-if、v-else-if、v-else可以很方便的实现多条件渲染。
v-show
和v-if类似，也是根据条件展示元素的选项
<div id="app">
<span v-show="showMe">我就在这里了</span>
</div>
var app = new Vue({
el:'#app',
template:'',
data:{
showMe: true
}
})
app.showMe=false; //修改showMe的值，span变成不可见
不同点：
当修改showMe的值为false时
可以看到v-show是把span元素的display属性设为none来隐藏元素。
也就是说带有 v-show 的元素始终会被渲染并保留在 DOM 中
v-if和v-show的区别
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
Tip 条件渲染实用小技巧
在使用v-if条件渲染元素时，还有一个实用小技巧：用key管理可复用的元素。refer to -->参考
v-for
使用v-for指令可以渲染一个列表。
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。（类似于javascript中的 for in循环）
使用方法：在需要循环输出的标签上面加上v-for指令即可
<div id="app">
<ul>
<li v-for="food in foods">
<span>{{food.id}}</span>
<span>{{food.name}}</span>
<span>{{food.price}}</span>
</li>
</ul>
</div>
var app = new Vue({
el: '#app',
template: '',
//这里扩展一种新写法，使用原来的方式也没问题
//es6写法，意义相同，都为返回一个数据对象
data(){
return {
foods: [
{id: 1, name: '面包', price: '￥5.00'},
{id: 2, name: '三明治', price: '￥9.00'},
{id: 3, name: '炸鸡腿', price: '￥12.00'}
]
}
}
//等同于：
// data: function(){
// return {
// }
// }
})
这样就完成了对foods数组中数据的渲染
在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。
<div id="app">
<ul>
<li v-for="(food, index) in foods">
<span>{{index}} -- {{food.id}}</span>
<span>{{food.name}}</span>
<span>{{food.price}}</span>
</li>
</ul>
</div>
index索引下标从0开始。
使用v-for指令也可以遍历一个对象
<div id="app">
<span v-for="value in student">
{{ value }}
</span>
</div>
var app = new Vue({
el: '#app',
template: '',
data(){
return {
student: {
name: '小灰',
age: 18,
likes: "看书"
}
}
}
})
看下效果：
v-for对对象的遍历也提供了第二个参数property（键名）
v-for="(value, name) in object"
试一下？
还可以用第三个参数作为索引
v-for="(value, name, index) in object"
试一下？
