JavaScript的Vue框架知识点大全
1 简易安装要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件.官网提供了Vue.js源码下载的地方：https://cdn.jsdelivr.net/vue/2.1.3/vue.js如果你不想下载到本地，要可以直接用CDN的方式，引入网上资源，一样可以：<script src=...
1 简易安装
要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件.
官网提供了Vue.js源码下载的地方：https://cdn.jsdelivr.net/vue/2.1.3/vue.js
如果你不想下载到本地，要可以直接用CDN的方式，引入网上资源，一样可以：
<script src="https://xx/vue.js"></script>
这样，我们就成功地用最简单的方法把Vue.js引入到我们的项目中了。至于那些高大上的npm，Bower等花式安装方法，我们后期再看它。
2 数据驱动视图
引入之后，我们就可以把它用起来。听说它最牛逼的地方是数据驱动视图，解放DOM操作，让你不再做又复杂又耗性能的DOM操作。那么，我们就看看它是怎么玩的！
假设，我们现在要把js对象中的某个变量的值渲染在页面上，传统的做法，就是先用getElementById获取到DOM节点对象，再innerHTML设置它的内容。
现在，在Vue.js中，你需要这样做：
我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id=‘app’)，表明这个实例是关联指定的DOM节点。
在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的name属性的值“web前端教程”就会被渲染到页面中，替换{{ name }} 显示效果为：“web前端教程”。
3 双向绑定
更方便的是，Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。
例子：监听用户在页面输入框输入的内容，然后将其实时更新在页面上。
在Vue中我们使用v-model指令就可以轻松实现。（v-model是什么东西，先不用管，后面会有章节详细介绍）。
4 组件
上面的我们演示了Vu.jse的数据驱动，别忘了，上一节我们提到Vue.js还有一个重要的核心，就是：组件化。
组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。
例子：假设，页面上有多个一样的卡片：
在这里插入图片描述
传统的办法，我们可以要写三份同样的HTML布局：
<div id="app">
<!--第1个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
<!--第2个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
<!--第3个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
</div>
如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。
在Vue.js中，我们试着把卡片封装成一个组件。
<div id="app">
<card></card>
<card></card>
<card></card>
</div>
<script>
//注册一个名叫card的组件
Vue.component('card',{
template:`<div>
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>`
});
new Vue({
el:"#app"
});
</script>
我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用<card></card>就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高。
可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数，后面我们会有专门的章节来介绍组件的详细用法。
进阶一：
我们之前说过，Vue是数据驱动视图的，只要model（模型层）的数据改变了，Vue就会帮我们改变视图上显示的内容，不用我们自己去动手写代码更新。那么，它是怎么做到的，我们的代码要怎么写才能做到这一点。
答案是：Vue实例。
先确保你的项目安装好Vue.js
安装好之后，我们来看看怎么创建和使用Vue实例，我们把它分成 4 步走。
第1步 创建语法
创建一个Vue实例的语法很简单，如下：
<script>
let vm = new Vue({});
</script>
通过关键语句 new Vue( )我们就可以创建一个Vue实例：vm了。我们注意到了我们给Vue( )传了一个参数选项，是一个空对象，我们接着往下看。
第2步 设置数据
没错，我们就是利用上面的对象参数，来创建这个Vue实例wm的，比如，设置vm里面的数据。
let vm = new Vue({
//实例vm的数据
data:{
name: "张三",
age : 21
}
});
写法也很简单，参数对象不再是一个空对象，它包含一个属性：data，而data的值也是一个对象，这个对象就是我们给实例vm设置的数据了。比如：name为张三，age为21等等。
第3步 挂载元素
创建了一个实例vm，设置了vm的数据后，我们怎么把数据展示在视图上呢这就要通过我们的挂载元素了。我们看看怎么用：
视图view部分：
<div id="app"></div>
视图（html部分）上我们有一个id为”app”的div元素。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
name: "张三",
age : 21
}
});
我们看到参数中我们不但有属性“data”，还多了个属性：“el”，el参数提供一个在页面上已经存在的DOM元素，作为我们实例vm的挂载目标。表示我们的实例vm和id为“app”的DOM节点就关联起来了。
第4步 渲染
实例vm创建好了，数据data有了，DOM节点也关联起来了，最后一步，就是把vm的数据绑定到指定的视图上了，也就是数据渲染。
<div id="app">
我是{{ name }}，
今年{{ age }}岁
</div>
对，就是你看到的这么简单，我们只需要用一个双大括号：{{ }} 即可，你可以留意到，{{ name }} 和 {{ age }} 就是我们给实例vm设置的数据name和age，我们用**{{ }}**可以直接读取到它们的值。
我们访问页面，就会看到vm的数据data就会被成功地渲染出来：
就这样，我们就成功地创建了一个vue实例，并把它的数据渲染在视图上了，超
简单。
我们知道，定义一个Vue实例的参数有el（指定挂载的DOM元素），data（实例的数据），上一节讲过除了这两个之外，还可以定义其他参数。今天，我们就来学习在开发中，我们要怎么定义一个vue实例才能满足我们的需要？
下面，我们先用上一节的知识，先创建一个Vue实例：
<div id="app"></div>
<script>
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{}
});
</script>
很简单，轻松搞掂，接下来，就用这个实例来展开讲解。
我们就具体讲一下定义一个vue实例会用到的4个常用参数选项，不常用的选项，咱先不管它（后面有需要会补充）。因为学会这4个，就可以满足基本的开发需要了。
filters 过滤器
第一个要讲的是过滤器filters选项。为什么要有这个东西呢？举个例子，假设我们有一组数字，都是小数，如下：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:33.141,
num2:46.212,
num3:78.541
}
});
num1，num2，num3都是Vue实例vm的小数，我们把它展示在视图上：
<div id="app">
数字1：{{ num1 }}<br>
数字2：{{ num2 }}<br>
数字3：{{ num3 }}
</div>
利用上节讲到的双大括号{{ }}渲染出来，很简单。
突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示。
这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了。我们来看看怎么用：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:33.141,
num2:46.212,
num3:78.541
},
//过滤器
filters:{
toInt(value){
return parseInt(value);
}
}
});
- 相信大家都已经注意到了，参数对象除了e和data属性之外，又多了一个filters属性，它的值也是一个对象 ，里面定义一个叫 ToInt()的方法，传入一个value参数，函数的作用就是把传入的参数value简单的转换成一个整数并return回去。
我们回到过滤器filters，接着讲：定义完filters属性后，我们怎么用呢？
<div id="app">
数字1：{{ num1 | toInt}}<br>
数字2：{{ num2 | toInt}}<br>
数字3：{{ num3 | toInt}}
</div>
也很简单，如上面代码所示，通过管道符** | **把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数。
18.**computed 计算属性 **
有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:1,
num2:3,
num3:6
},
//计算属性
computed:{
sum(){
return this.num1+this.num2+this.num3
}
}
});
计算属性computed的定义语法和过滤器filters类似，但是用法不一，如下：
<div id="app">
总和：{{ sum }}
</div>
计算属性computed用法更简洁，仅需**{{ sum }}**就能读取到它的计算结果：1+3+6结果应该为10。
需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新。
我们试一下，通过chrome控制台把num1的值从1变成2，再看看sum的结果会是多少？
methods 方法
顾名思义，在methods中，我们可以定义一些方法，供组件使用。
比如，我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
}
});
定义一个**plus( )的方法在methods中，下面我们把plus( ) **绑定在按钮的点击事件上：
<div id="app">
{{ a }}
<button v-on:click="plus">加1</button>
</div>
在Vue中通过v-on:指令来绑定事件（指令后面章节会介绍），我们点击按钮，methods中的方法**plus( )**就会被调用,实现给a的值加1，并更新视图。
watch 观察
watch选项是Vue提供的用于检测指定的数据发生改变的api。
上面点击按钮a的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字a是否发生了变化，如果了监听到了变化，我们就在控制台输入以下a的最新值。
在上个例子的代码基础上，我们加上watch部分的代码：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
},
//观察
watch:{
a(){
console.log(`有变化了，最新值：`);
console.log(this.a);
}
}
});
最后一部分watch就是我们新加的代码，**a( ) **表示我们要观察监听的就是数据a，我们看运行结果：
看到了，我们点击按钮的时候，a的值加1发生了变化，而此时watch监听到了它的变化，便在控制台输出了我们指定的内容
这一节我们学习vue实例的生命周期，没错，实例也跟动物一样，有自己的“生命”，实例也会经历出生至死亡的各个阶段。
Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期，能帮助我们理解vue实例的运作机制，更好地合理利用各个钩子来完成我们的业务代码。
我们分别来看看这几个阶段：
1. beforeCreate
此阶段为实例初始化之后，此时的数据观察和事件配置都没好准备好。
我们试着console一下实例的数据data和挂载元素el，代码如下:
<div id="app">{{name}}</div>
<script>
let app = new Vue({
el:"#app",
data:{
name:"前端君"
},
beforeCreate(){
console.log('即将创建');
console.log(this.$data);
console.log(this.$el);
}
});
</script>
得到的结果是：
即将创建
undefined
undefined
此时的实例的data和el还是undefined,不可用的。
2. created
beforeCreate之后紧接着的钩子就是创建完毕created，我们同样打印一下数据data和挂载元素el，看会得到什么？
在上一段代码的基础上，加上下面这段代码：
created(){
console.log('创建完毕');
console.log(this.$data);
console.log(this.$el);
}
此时，我们能读取到数据data的值，但是DOM还没生成，所以属性el还不存在，输出**$data为一个Object对象，而$el**的值为undefined。
3. beforeMount
上一个阶段我们知道DOM还没生成，属性el还为undefined，那么，此阶段为即将挂载，我们打印一下此时的$el是什么？
增加一下代码：
beforeMount(){
console.log('即将挂载');
console.log(this.$el);
}
}
我们看到打印结果：
即将挂载
<div id="app">{{name}}</div>
此时的**$el不再是undefined，而是成功关联到我们指定的dom节点<div id=”app”></div>，但此时{{ name }}**还没有被成功地渲染成我们data中的数据。没事，我们接着往下看。
4. mounted
mounted也就是挂载完毕阶段，到了这个阶段，数据就会被成功渲染出来，我们编写mounted的钩子，打印**$el** 看看：
mounted(){
console.log('挂载完毕');
console.log(this.$el);
}
打印结果：
挂载完毕
<div id='"app">前端君</div>
如我们所愿，此时打印属性el，我们看到**{{ name }}已经成功渲染成我们data.name**的值：“前端君”。
5. beforeUpdate
我们知道，当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。
html片段代码我们加上ref属性，用于获取DOM元素（后期会讲到）。
<div ref="app" id="app">
{{name}}
</div>
Vue实例代码加上beforeUpdate钩子代码：
beforeUpdate(){
console.log('=即将更新渲染=');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
},
我们试一下，在控制台修改一下实例的数据name，在更新渲染之前，我们打印视图中文本innerHTML的内容会是多少：
我们在控制台把app.name的值从原来的 “前端君” 修改成 “web前端教程”,在更新视图之前beforeUpdate打印视图上的值，结果依然为原来的值：“前端君”，表明在此阶段，视图并未重新渲染更新。
6. updated
此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容，接着上面的案例，我们添加钩子updated的代码，如下：
updated(){
console.log('==更新成功==');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
}
大家注意两个不同阶段打印的name的值是不一样，updated阶段打印出来的name已经是最新的值：“web前端教程”，说明此刻视图已经更新了。
7. beforeDestroy
调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。
8. destroyed
成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。
案例：我们通过在销毁前通过控制台修改实例的name，和销毁之后再次修改，看看情况。
beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁成功');
}
销毁之前，修改name的值，可以成功修改视图显示的内容为：“更新视图”，一旦效用实例的$destroy( )方法销毁之后，实例与视图的关系解绑，再修改name的值，已于事无补，视图再也不会更新了，说明实例成功被销毁了。
9. actived
keep-alive组件被激活的时候调用。
10. deactivated
keep-alive 组件停用时调用。
关于keep-alive组件的激活和停用，我们后面讲到具体案例再介绍，在这里你只需要知道vue提供了keep-alive组件激活和停用的钩子就可以了。
如何在html中绑定数据
这一节，我们学习如何在html上绑定我们实例中的数据。
Mustache 语法
什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号**{{ }}**的写法，在之前的章节我们就演示过在视图中显示我们的数据，这是最常见的绑定方式。有了它，我们可以轻松地在视图显示我们的数据并及时自动更新，无需手动控制。
<div id="app">{{ name }}</div>
<script>
let app = new Vue({
el:"#app",
data:{
name:"前端君"
}
});
</script>
十分简单，页面视图上也成功显示我们的data中的name的值：“前端君”。
绑定纯html
有时候有一种这样的需求，我们的数据包含了一些html的标签代码，比如：
name:"<strong>前端君</strong>"
文本“前端君”被一个**<strong>**标签包住，而我们在展示的是，需要合理地渲染strong标签，再显示我们想要展示文本内容。这种情况，用原来的双大括号{{ }}方式，就不能满足了，它会渲染成这样：
<strong>被当作是普通的文本数据被展示了，这并不是我们想要的结果。这个是时候，你需要用vue提供的v-html指令，用法如下：
<div id="app" v-html="name"></div>
<script>
let app = new Vue({
el:"#app",
data:{
name:"<strong>前端君</strong>"
}
});
</script>
v-html以属性的形式添加到了div中，值为“name”，也就是我们数据data中的name：
"<strong>前端君</strong>"
我们来看看视图展示的结果：
视图上的“前端君”有了明显的加粗效果，说明<strong>标签发挥了作用，我们通过chrome的开发者工具查看解析生成后的html文档，name的值，被解析成html标签，并作为字节点，插入在**<div id=”app”></div>**中去。
这，就是v-html的作用啦。
绑定属性
前面两个都是控制视图展示文本内容，有时候，html标签的属性也很重要，比如：<a>标签的href属性，<img/>标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢？还是用双大括号**{{ }}**的写法吗？
当然不是，这里不需要用双大括号**{{ }}**，我们用v-bind指令，如下：
<div id="app">
<!--在href前用v-bind：修饰-->
<a v-bind:href="link">hello官网</a>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
link:"http://hello.com"
}
});
</script>
在视图中的a标签，我们在<a>标签加上v-bind:来修饰href属性，而它的值就是data中的属性link。我们来看看解析渲染的html页面效果。
标签<a>的属性href的值成功地绑定了data数据link的值，通过v-bind指令，就成功地将数据成功地绑定在视图的标签的属性中。
v-bind 指令的简写
对于v-bind指令，如果一个标签中需要绑定多个属性的话，就得连续写多个v-bind。
问题是没问题，但vue为了我们的代码更简洁易看，提供了v-bind指令的简写，仅需要冒号。
原本完整的写法：
<!--完整的写法-->
<a v-bind:href="link">hello官网</a>
简洁的写法：
<!--缩写-->
<a :href="link">hello官网</a>
此外，需要注意的是：当渲染的属性值是布尔值的时候（true和false），效果就不一样了，并不是简单地将true或者false渲染出来，而是当值为false的时候，属性会被移除。
我们试试看：
<div id="app">
<!--我们用缩写的语法-->
<button :disabled="dis_true">
我是true
</button>
<button :disabled="dis_false">
我是false
</button>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
dis_true:true,
dis_false:false
}
});
</script>
我们通过v-bind指令的缩写，给两个button标签的disabled属性绑定值，一个值为true，一个值为false，我们来看看效果：
我们看到，当属性值设置成true的时候，disabled的值为解析成“disabled”，当属性值设置成false的时候，属性disabled直接被移除掉了。
支持javascript表达式
上面讲到的都是将数据简单地绑定在视图上，但事实上，vue还支持我们对数据进行简单的运算：javascript表达式支持。
我们举3个例子演示一下：
1.加减乘除运算：
<div id="app">{{ num+3 }}</div>
<script>
let app = new Vue({
el:"#app",
data:{
num:2
}
});
</script>
上面的案例，在渲染的时候，并不是直接渲染data的num，而是对num进行的简单的加法：num+3，渲染的结果为：5。
三元运算符计算，上面元算的结果为：“yes”。
3.字符串拼接：
<div id="app">
<a :href="'http://'+host">hello官网</a>
</div>
<script>
let app = new Vue({
el:"#app",
<a>标签的href属性的值通过两个字符串的拼接起来.
注意：
虽然vue支持javascript表达式运算，我们只会在运算比较简单的情况下才会这么玩，当运算比较繁琐复杂的时候，一定要用vue的computed属性来进行计算。
这一节我们来学习并掌握在实战用一定会用到的10个指令，没错，是一定会用到，通过这些指令，可以让我们很方便的完成某些操作。掌握了这几个指令，我们距离实战就又近了一步。
1. v-text 指令
v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样。我们看看它的用法：
<div id="app">
<p v-text="msg"></p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'hello,vue'
}
});
</script>
我们给<p></p>标签加上了指令 v-text ，它的值就是我们data数据中的msg，就这么简单，最后我们来看看渲染结果：
有没有发现，它的作用跟{{ msg }}效果是一样的：
<p v-text="msg"></p>
<!--效果相同-->
<p>{{ msg }}</p>2. v-html 指令
2. v-html 指令
这个指令我们再上一节刚刚讲过，它帮助我们绑定一些包含html代码的数据在视图上，比如：“hello,vue”，这个字符串包含了标签，要想不被当作普通的字符串渲染出来，就得用 v-html 指令。
<div id="app">
<p v-html="msg"></p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'<b>hello,vue</b>'
}
});
</script>
/script>
还是上面的代码，我们把 v-text 指令换成 v-html 指令，msg的值变成了含有html代码的：“hello vue”，我们看看渲染效果：
就这样，标签被成功解析并渲染出来，视图上的文本也有了加粗的效果，这就是v-html发挥了作用，bingo！
3. v-show 指令
v-show ，听这名字就可以猜测它跟元素的显示/隐藏 相关，没错，它就是用来控制元素的display css属性的。
v-show 指令的取值为true/false，分别对应着显示/隐藏。有比较才能看到效果，我们拿两个标签分别设置不同的值，看看解析渲染效果。
<div id="app">
<p v-show="show1">我是true</p>
<p v-show="show2">我是false</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
show1:true,
show2:false
}
});
</script>
我们用了两个<p>标签，都加上了 v-show 指令，取值分别为true和fasle，直接看效果吧！
第一个p标签的v-show设置为true，元素正常显示；第二个p标签的v-show设置为false，元素解析成：
- <p style=“display: none”>我是false</p>
所以它不会显示在视图上。这就是 v-show 指令的用法，简单明了。
4. v-if 指令
v-if 指令的取值也是为true或false，它控制元素是否需要被渲染出来，听起来有点抽象，不怕，同样，我们拿两个元素设置不用的值，对比一下看效果就知道了。
<div id="app">
<p v-if="if_1">我是true</p>
<p v-if="if_2">我是true</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
if_1:true,
if_2:false
}
});
</script>
我们把 v-show 指令换成了 v-if ，同样是两个<p>标签，同样是不同的取值：true和false。我们看效果：
看到了吧，设置为true的<p>标签，成功渲染出来，而设置为false的<p>标签，直接被一行注释代替了，并没有被解析渲染出来。
也许你会问了， v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？
记住一点：如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。
5. v-else 指令
if和else在编程语言一般都是结对出现的，在vue里面也不例外。它没有对应的值，但是要求前一个兄弟节点必须要使用 v-if 指令，也对，没有if，哪来的else。
<div id="app">
<p v-if="if_1">我是if</p>
<p v-else>我是else</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
if_1:false
}
});
</script>
我们使用两个<p>标签，第一个使用 v-if 指令，并取值为false，第二个使用 v-esle 指令，啥也不说了，看效果最直观：
只有第二个<p>标签被渲染出来，第一个<p>标签由于 v-if 指令的值为false，直接被忽视了，不渲染。
同理，一旦第一个标签的 v-if 指令的值为true，被忽视的就是第二个<p>标签了。 v-if 和 v-else 只有一个会被渲染出来。
有兴趣的同学，可以继续去了解一下 v-else-if 指令，同样很简单。
上一节我们学了5个重要的指令： v-text 、 v-html 、 v-show 、 v-if 、 v-else
这一节，我们继续学习剩下的5个指令。话不多说，撸起来！
- v-for 指令
有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。
我们看看它的用法：
<div id="app">
<div v-for="item in list">{{item}}</div>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
list:['Tom','John','Lisa']
}
});
</script>
首先，我们的data中包含数组list，数组包含三个元素：“Tom”，“John”，“Lisa”，我们通过 v-for 指令把它渲染出来，其中item表示数组中的每个元素。我们看看渲染结果：
我们看到，我们解析渲染出三个div，其中包含的值分别是数组中的元素，表示我们解析渲染成功。
什么，怎么拿到索引？拿到每个元素的索引也很简单，我们稍微改动一下代码，把html部分的代码修改为：
我们来看效果图：
我们看到，索引分别是0,1,2都被成功地渲染出来了。这就是用 v-for 指令来渲染列表的用法。比起以前手动更新dom列表，简直就是方便得不要不要的。
提醒：v-for指令除了可以迭代数组，还可以迭代对象和整数。
7. v-bind 指令
在第六节我们也提过 v-bind 指令的作用和用法，它用于动态绑定DOM元素的属性，比较常见的比如：标签的href属性，标签的src属性。
<div id="app">
<a v-bind:href="link">hello官网</a>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
link:"http://hello.com"
}
});
</script>
用 v-bind 指令来修饰href属性，表明它的值是一个动态的值，对应的则是data中的link的值：http://hello.com.
来吧，看看渲染效果：
标签的href的值成功地解析渲染成:http://hello.com。
第六节也说过， v-bind 指令可以简写成一个冒号“：”，也就是以下两种写法是等价的。
hello官网
hello官网
它们的解析渲染效果是一样一样的。
8. v-on 指令
v-on 指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数，记性好的同学应该记得我们在第四节介绍methods选项的时候，有用到 v-on 指令。（估计你也不记得了）,这里我们还是配合methods来演示：
<div id="app">
<button v-on:click="say">点击</button>
</div>
<script>
let app = new Vue({
el:"#app",
methods:{
say(){
console.log('hello');
}
}
});
</script>
methods选项的用法不再展开讲解，还不理解的同学可以翻看第四节《定义一个vue实例常用的4个选项》
回到这个例子，我们通过 v-on 指令修饰click点击事件，指定事件响应后的处理函数为methods中的say( )方法，我们渲染看看效果：
点击按钮，可以成功触发click事件，并且调用say( )，一切都在我们的预期之中。
此外，如果你想给处理程序say( )传参数，也是可以的，用法跟普通的方法一致。
<div id="app">
<button v-on:click="say('Tom')">
点击
</button>
</div>
<script>
let app = new Vue({
el:"#app",
methods:{
say(name){
console.log('hello,'+name);
}
}
});
</script>
我们再上一个案例的基础上稍微修改代码，say(name)接受一个参数name，并把name打印出来，在调用的时候传如实参“Tom”。再看看效果，是不是在我们的预期之内：
“hello，Tom”被打印出来了，一切尽在掌握之中，感觉真好。
9. v-model 指令
这是一个最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定，相对以前的手动更新DOM，简直就是开发者的福音，迫不及待地来看看它的用法：
你输入：{{ msg }}
是不是比你手动更新DOM爽多了，是不是感受到了vue的MVVM带来的快感？
- v-once 指令
最后，我们再来讲解一下v-once指令，它的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。
我们再上面的案例代码中稍做修改，仔细看改了哪里：
<div id="app">
<input v-model="msg" type="text">
<p v-once>你输入：{{ msg }}</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'hello,公众号的同学们'
}
});
</script>
修改1:
标签增加了 v-once 指令；
修改2：msg的初始值不再是空字符串。我们来看看效果：
由于msg有了初始值，第一次渲染的时候，input控件和
标签都有了内容，由于
标签我们添加了 v-once 指令，所以，后期我们更新msg的值的时候，
标签的内容不会发生改变，也是符合我们的预期。
第九节：掌握vue的另一个核心：组件
组件是我们人为地把页面合理地拆分成一个个区块，让这些区块更方便我们重复使用，有了组件，我们可以更高效合理地开发和维护我们的项目。
竟然说得组件那么好用，那我们就来好好学学怎么使用它。
规划组件
假设我们页面上有这样的一个布局：
上图是我们模仿微信公众号的“历史消息”的界面，我们看到的是一个文章的目录列表。
这种情况下，我们把每一个文章标题区块看作一个组件来进行规划，这样就方便我们去复用这个组件：
实现组件
我们学会了如何规划出一个组件，接下来，我们看看在vue中如何实现一个组件。
我们用传统的实现方式一个组件，html代码如下：
<div class="unit">
<div class="content">
<h1>这里是文章的标题</h1>
<div class="info">
<span>2017年4月10日</span>
<span class="original">原创</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>
忽略css（这里我们不介绍css），我们看到了上面html代码结构，class为unit的
什么意思？我们来看看vue如何实现一个组件的。
首先，我们还是先创建一个vue实例，很熟练了，没难度。
成功创建了一个vue实例vm，挂载元素为id为app的div节点。接下来，我们在创建实例vm之前，利用vue提供的API来注册一个组件。稍微修改一下上面的代码：
<div id="app"></div>
<script>
Vue.component('my-article',{
template:`<div>
<div>
<h1>这里是文章的标题</h1>
<div>
<span>2017年4月10日</span>
<span>原创</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>`
});
let vm = new Vue({
el:"#app",
});
</script>
我们使用了vue提供的全局API Vue.component() ，注册了一个名为：“my-article”的组件，而组件的template正好是我们上面的html代码，这样，我们就可以用 </ my-article> 的方式来使用我们的组件。
注意：一定要确保实例vm在创建之前， 组件已经被成功注册，这也是为什么我们要把代码写在实例化之前。
既然注册了组件 ，我们就来使用这个自定义的组件：
我们看到最终渲染的不是标签，而是我们组件的模板template的值。我们成功地注册一个自定义的组件并使用它。
但这并不够，我们有的文章目录中不仅仅只有一篇文章，而且每篇文章的标题和日期都不一样，我们如何动态地展示它们的数据呢？
这里就涉及到了组件的传参props，没错，不但函数可以接受参数，vue的组件也可以。接下来，我们看看怎么实现传参。
我们知道，组件中的这4部分是需要动态获取数据的：标题，发布日期，是否原创，文章封面图。
那么，我们就通过传参的方式把这些数据传到组件，实现数据动态展示。
首先，我们把数据存储在实例vm的data中：
let vm = new Vue({
el:"#app",
data:{
article:{
title:"第一节：Vue.js框架是什么，
为什么选择它？",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
}
}
});
我们给data增加了一个文章article的信息，包括：标题title，发布日期date，是否原创is_original，封面图片cover_url。
文章的信息有了，我们怎么传到组件中去呢？
我们给组件传了参，组件内部怎么接受并使用呢？我们接着看，十分简单！
我们把注册组件的代码稍微修改一下：
Vue.component('my-article',{
props:['detail'],
template:`<div>
<div>
<h1>{{detail.title}}</h1>
<div>
<span>{{detail.date}}</span>
<span v-show="detail.is_original">原创</span>
</div>
</div>
<img :src="detail.cover_url" alt="">
</div>`
});
除了template以外，我们增加了props，通过它来接受我们的参数detail，传进来之后，你可以在组件的模板template中使用它所接受的所有数据了。比如，我们传进来的数据包含着文章的信息：title，date，is_original，cover_url。
读取文章的标题：
{{detail.title}}
读取文章的发布日期：
{{detail.date}}
读取文章是否原创，并通过 v-show 指令控制显示/隐藏：
原创
读取文章的封面图片地址：
竟然读取了数据，我们就看看渲染结果：
数据是动态读取了，那么我们的目录并不仅仅只有一篇文章，当我们数据多了之后，该用什么方式展示出来呢？
let vm = new Vue({
el:"#app",
data:{
articles:[
{
title:"第一节：Vue.js框架是什么，
为什么选择它？",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第二节：简易安装 和
快速入门Vue.js",
date:" 2017年03月09日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第三节：创建一个Vue实例，
超简单",
date:" 2017年03月17日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第四节：定义一个vue实例的
4个常用选项",
date:" 2017年03月20日",
is_original:true,
cover_url:"cover.jpg"
},
]
}
});
假设我们的articles中有4篇文章的信息。
也许你已经相当到了，我们可以使用 v-for 指令，它是专门用于处理列表渲染的指令。结合我们的组件，一起来实现这个文章目录的效果。
非常简单，组件我们已经封装好，我们只需要给它传参即可，所以我们不需要改动组件的代码。而articles是一个数组，我们用 v-for 指令对它进行遍历即可。
我们对html代码稍微改动一下：
这就是父组件→子组件通信的实现，那么，你可能会联想到，如果是子组件向父组件传递数据，要怎么实现呢？
子组件→父组件
接下来，我们就学习子组件→父组件通信。
相比父→子组件通信，子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点：自定义事件。
网页事件我们听得多，常用到的有click点击事件，focus聚焦事件等等，事件要怎么自定义呢？
每一个vue实例都实现了事件接口，我们可以用它提供的API $emit( eventName)来触发一个事件。
是不是听得还是有点云里雾里的？我们来演示一下：
我们注册一个新组件：
Vue.component('son',{
template:`<button @click="send">
点击
</button>`,
methods:{
send(){
this.$emit('connect');
}
}
});
复制代码
很简单的一个组件，就是一个按钮button，点击它的时候，会触发组件内部的send( )方法，而方法体里面会触发一个事件，事件名取名为：“connect”。
后我们就去父组件监听这个事件‘connect’，监听方式跟普通原生的事件一模一样，也是用 v-on 指令，缩写用@符号。 我们采用缩写来监听：
const app = new Vue({
el:"#app",
methods:{
say(){
console.log(`大家好，我监听到了
事件connect的触发`);
}
}
});
复制代码
我们在say( )方法触发的时候，在控制台打印一句话，表示我们自定义的事件connect成功触发，并被父组件监听到了。
我们看到了，点击子组件的按钮，成功地调用了父组件的say( )方法，十分顺利。
来到这里，其实我们已经完成了一大半。我们最后只需要把子组件的一些数据，通过这个事件connect传递到父组件，就可以实现子→父组件的通信。
我们修改一下子组件：
Vue.component('son',{
template:`<button @click="send">
点击
</button>`,
data(){
return{
msg:'大家好，我是子组件的数据'
}
},
methods:{
send(){
this.$emit('connect',this.msg);
}
}
});
复制代码
我们把子组件的data中的msg，通过$emit()一并发射出来，在父组件的say( )方法接收即可。
methods:{
say(msg){
console.log(msg);
}
}
复制代码
最后还是确认一下是否真的可以读取到子组件出来的msg，看效果图：
这就成功地实现了子→父组件的数据传递。
非父子组件通信
除了父子组件的相互通信，非父子关系的组件该如何通信，我们可以巧妙地利用一个空的vue实例来作为一个中央事件总线。
但是在实际开发中，我们不会这么做，我们会使用专门用于状态管理的 vuex ， vuex 的学习我们不在基础系列讲解，我们放在后期的进阶系列再一起学习。
在第六节的章节中，我们学会了如何给视图上的html标签绑定属性。
比如，给 标签绑定href属性，简单回忆一下：
复制代码
我们用 v-bind 指令（以后都用缩写的形式）来动态绑定一个标签的属性。
而这一节，我们特意来学习一下样式的动态绑定，因为它与普通属性的绑定略有不同，并且在实际开发中，动态绑定样式是一定会用到的知识，所以，还是值得我们用一个章节来学习一下它。
老办法，我们先来准备一个vue实例：
这是文字
对象语法：我们动态绑定的class的值是一个对象{ }，具体怎么写我们来看看，在上面的代码上稍做修改：
这是文字
咦？class的值最后被渲染成：“active”，原来，在对象中，若该属性对应的value为true，则该属性会被渲染出来，为false，则被渲染出来。
我们尽快验证一下，我们在上面的代码上再稍作修改：
这是文字
复制代码
我们给class绑定的对象多了2个key和value，我们看看实例的数据data：
data:{
isActive:true,
isDanger:true,
isError:false
}
复制代码
isActive和isDanger的值都为true，isError都为false，猜一下，渲染出来的结果是什么？
看效果：
正和我们所预测的一样，值为true的会被成功渲染出来，为false的则不会被渲染出来。这个时候，你就可以根据需要给渲染出来的class编写样式了。
一旦vm实例对应的数据发生变化，比如isActive的值由true变成false，视图上的’active’ 类也会被删除，这样就会实现动态绑定样式啦！
除了对象语法来绑定class之外，我们还有另一种写法。
数组语法：用数组语法和对象语法来绑定class，又稍有不同。说了是数组语法，那写法就肯定不一样，我们继续来看看：
这是文字
复制代码 这个时候，class绑定的值就是一个数组了，数组有两个元素[ activeClass , errorClass ]，它们对应的值是vm实例的数据data，我们看看vm的数据data：data:{
activeClass:‘active’,
errorClass:‘error’
}
复制代码
渲染的时候，activeClass和errorClass对应的值就会被渲染成class。看效果图：
效果跟我们预期一样。这样，我们就可以修改vm实例的数据data，来实现动态修改class的样式了。
绑定内联样式style
除了使用class类以外，我们还可以在style内联样式上下功夫。
绑定内联样式也有2种语法，对象语法和数组语法，但我们这里只介绍常用的对象语法。
这是文字
复制代码 这个时候，我们绑定的就不是class了，是style属性。它的值是一个对象：{ color:colorStyle }，同样，我们来看看vm实例的数据data： data:{ colorStyle:'red' } 原来colorStyle我们vm实例的数据，值为red。那是不是我们style中的color对应的颜色是就是red呢？没错，看来你已经会举一反三了。 看渲染效果，我们验证一样：
学过了前面11个章节的知识，可以说你已经对vue2.0的基础知识有了一定程度的掌握，虽然在真正开发过程中，一些知识的使用会稍有不同，但是别慌，我们会把那部分内容在进阶系列，比如：单文件组件，过渡效果，状态管理vuex，路由vue-router，网络请求vue-resource等等。
那是不是就意味着我们现在还不能用基础知识做开发，当然不是，加强动手能力是进步的最好方式，我们今天就来用学过的基础知识，来动手做一个demo：todoList案例，以此来巩固一下学过的知识，并且练练手。
看一个todo案例的效果图，然后我们来模仿它做一个：
（gif图，加载需要一丢丢时间）
本来是打算录制成视频，但是demo相对容易，通过图文并茂的形式也能让大家很好的接收，倘若后期有需要视频的反馈，我再尝试录制成视频的形式。
如果你还没看完前面的11个章节，建议你先学习，否则欲速则不达。
磨刀不误砍柴工，在动手之前，我们理一下思绪该如何实现：
1.利用vue的mvvm的特性，绑定用户输入的内容和展示在列表的内容。
2.用户勾选表示已完成，通过动态修改样式来标识已完成。
3.用户点击按钮“delete”，通过v-show来控制任务隐藏。
通过这个思路，我们就可以把之前11个章节的部分内容串联起来，运用到这个案例中。
来吧，开始准备我们需要的工具：
chrome浏览器，或者一个支持ES5的Object.defineProperty特性的浏览器即可。
webstorm2017 ，我选用它的原因是因为webstorm2017增加对vue的完美支持，当然，如果你的电脑跑不起，或者不习惯，你也可以使用你喜欢的IDE。
安装vue.js
这里我用第二节的简易安装方式，并且是直接下载vue.js文件到本地，非cdn资源文件。
先看看目录结构，十分简单：一个todo.html，一个本地的vue2.0.js。
在head中，载入vue.2.0.js文件。
利用第三节的知识，创建一个vue实例，超简单！
复制代码 顺利地创建了一个vue的实例app！ 数据绑定接下来，我们就实现思路的第一步：数据绑定。
在绑定之前，我们来设计关于任务的数据结构，一个任务包括：任务内容，是否完成，是否删除。
因此，我们可以得到一个完成的任务数据结构：
{
content:“任务内容”,
finished:false,//是否完成
deleted:false//是否删除
}
复制代码
那么，我们给实例的data添加代码：
const app = new Vue({
el:"#app",
data:{
//默认
task:{
content:’’,//内容为空
finished:false,//未完成
deleted:false//未删除
}
}
});
复制代码
默认初始化任务task的内容content为空，finished状态为false表示未完成，deleted状态为false表示未删除。
任务task的数据结构有了，我们就把它和页面的用户输入关联起来，还记得使用哪个指令吗？（花5秒钟时间回忆一下）
接着，我们就来写html代码：
（gif效果图，加载需要一丢丢时间）
虽然成功地绑定了task的content，但是我们的input没有添加样式，缺少美感，我们来给它添加class类“edit”和相关的样式。
.edit{
display:block ;
width:80%;
height: 35px;
line-height: 35px;
margin: 30px auto;
box-sizing: border-box;
padding-left: 4px;
border-radius: 4px;
border:1px solid #ccc;
outline: 0;
box-shadow: 0 0 5px #ccc;
}
复制代码
给input控件添加以上的css样式，它的外观就变成我们想要的效果：
用户不停地输入多个任务，我们要用一个数组list[ ]来存储用户输入的每一个任务task。
按键修饰符
假设：用户输入任务内容后，按下enter键表示完成输入。所以，我们要实现监听键盘事件。
这里我们会用到vue提供给我们的按键修饰符：
在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为 v-on 在监听键盘事件时添加按键修饰符。
所以，我们给input控件添加键盘事件keydown的监听，最终代码如下：
<input
@keydown.enter="addTask"
class="edit"
type="text"
v-model="task.content"
placeholder="编写任务"
复制代码
我们增加了@keydown.enter表示监听键盘中的enter键的按下事件，而addTask则是实例app中的methods方法，所以，我们也会给实例增加methods。如下：
const app = new Vue({
el:"#app",
data:{
//默认
task:{
content:'',//内容为空
finished:false,//未完成
deleted:false//未删除
}
},
methods:{
//添加任务
addTask:function(){
//.....
}
}
});
复制代码
接下来，我们就来编写addTask( )方法，实现将用户输入的内容存储起来，因为我们在之前就通过 v-model l将用户输入的内容和task中的content关联起来，所以我们只需要把task.content存储起来就可以了，存在哪里呢？我们用一个数组list[ ]来存储它们。如下：
const app = new Vue({
el:"#app",
data:{
//默认
task:{
content:'',//内容为空
finished:false,//未完成
deleted:false//未删除
},
//任务列表
list:[]
},
methods:{
//添加任务
addTask:function(){
//将task存入list数组
this.list.push(this.task);
//存入list[]后，重置task
this.task = {
content:'',//内容为空
finished:false,//未完成
deleted:false//未删除
}
}
}
});
上面的代码，我们给data增加了list，并且通过push方法，成功地把每个任务存放在list数组中。
任务列表list数组既然有了，我们就可以通关 v-for 循环，把它遍历并展示出来了。那我们就来编写列表的html代码，如下：
(gif效果图，加载需要一丢丢时间)
我们输入任务，并按下回车键，任务内容成功地添加到了list[ ]数组，并通过 v-for 遍历到页面上，十分顺利。
动态修改样式
但我们的工作还没结束，案例中，当勾选框被选中的时候，表示任务已完成，切换相应的样式，未选中的时候，表示任务未完成，也会切换样式。
接下来，我们就来实现这一步，我们用到了第十一节的动态class绑定的知识。
首先，我们先为每个checkbox绑定点击事件，并且动态渲染是否选中，稍微修改上面的代码：
<input
@click=“changeState(index)”
:checked=“item.finished”
type=“checkbox”
点击checkbox，我们通过编写一个changeState( )方法来实现切换该任务的状态，所以我们来编写一下changeState( )方法：
//点击修改任务状态
changeState:function(index){
let curState = this.list[index].finished;
this.list[index].finished = !curState;
}
就这样，我们就顺利地实现了点击checkbox来修改每个任务task对应的状态finished（切换true或者false）。
既然修改了状态，我们就要在页面上看到相应的效果，我们通过动态的修改class来实现。
我们把这行代码：
<span>{{item.content}}</span>
修改成：
<span :class="{'finish':item.finished}">
{{item.content}}
</span>
学习过第十一节我们知道，当改任务的finished为true的时候，就会添加样式 class=‘finish’ ；否则则不会。
所以，少不了finish的样式类代码：
.finish{
text-decoration: line-through;
color: #ccc;
}
好了，所有代码都准备好了，演示一下效果：
（gif效果图，加载需要一丢丢时间）
切换是否成功状态也成功了实现了。
删除任务
还差最后一步，我们来实现删除任务，当我们编写错误的任务的时候，就可以点击删除按钮来删掉它。
我们先为每个任务添加删除按钮，并添加点击事件：
(gif效果图，加载需要一丢丢时间)
删除任务的功能也顺利实现了。
为了稍做完善，当我们没有任何任务展示的时候，我们会在页面上显示“暂无任务”的文字提示。这样的提示对用户体验来说会比较友好一点。
我们增加html代码，如下：
暂无任务
css样式，如下： .empty{ font-size: 13px; color: #ccc; text-align: center; padding: 10px 0; } 那么，我们如何控制这个提示是否渲染呢？这里就用到了我们学过的 v-if 条件渲染指令，当我们的list[ ]数组的长度为0的时候，表示无任务，可展示“暂无任务”，反之则不渲染。 那好，我们就用v-if指令来稍做修改html代码：暂无任务
我们在之前的章节说过，绑定数据的时候，可以使用简单的javascript表达式，上面的案例，我们就使用了简单的全等判断，你也可以使用计算属性computed来实现，留给大家自己动手去实现。Vue中$符号的含义:
1:除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
var data = { a: 1 }
var vm = new Vue({ el: '#example', data: data}
)vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
表示为变量
可以用来表示变量，比如变量 var s='asdsd’或var
s
=
′
a
s
d
a
s
d
′
;
e
s
6
中
也
可
以
采
用
s='asdasd'; es6中也可以采用
s=′asdasd′;es6中也可以采用{XXX}来在字符串中插入变量（这个记住要利用v-bind）
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)