一、前言
本章我们来说一下，Vue的一些实战功能。先来说说它的设计模式，和Angular.js一样，它也是使用MVVM的模式。即
- 1.
Model:负责数据存储 - 2.
view：负责页面展示 - 3.
ViewModel：负责业务逻辑处理（比如Ajaz），对数据进行加工后交给视图展示。接下来我们具体聊聊Vue.js。
二、Vue.js
Vue.js是一个渐进式的JavaScript框架，根据项目需求，可以选择从不同的维度来使用它。这里主要讲Vue单文件组件的形式配合Webpack来完成。
1.单文件组件
Vue.js自定义了一种.vue文件，可以把HTML、CSS、JS代码放到一文件中，从而实现对一个组件的封装，一个.vue文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不能识别，因此需要安装vue-loader对vue进行解析。一个.vue文件一般包含template、script、style标签。
- 1.
template：HTML代码，定义了再页面中显示的内容 - 2.
script:JS代码，定了组件需要的数据和操作 -
style：Css样式，定义组件的样式，属性scoped表示该样式只适用于该组件。
-
2.实例与数据
Vue实例是Vue的入口，也是前端的ViewModel,它包含了业务逻辑处理、数据模型等。在main.js中可以看到如下代码，
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 1.
el:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。 - 2.
router： 这是是省略的写法，应该是router：router。 - 3.
components: 包含Vue可用组件的哈希表 -
template：一个字符串模板，作为vue实例的标识使用。模板会替换挂载元素，挂载元素的内容都将被忽略，出发有插槽slot。
-
3.插值表达式
插值表达式就是{{}}语法，也被成为模板语法，随着框架的流行，前端的模板技术已经成为某种形式上的标配，它的价值也在于稳定和经典。下面来看插值表达式可以写入哪些内容
- 1.Json数据
- 2.数字
- 3.字符串
- 4.插值表达式
具体示例如下，
<!-- json数据变量 -->
<h1>{{msg}}</h1>
<!-- 数字 -->
<p>{{10}}</p>
<!-- 字符串 -->
<h1>{{"string"}}</h1>
<!-- 表达式 -->
<h1>{{1+1}}</h1>
// script代码
data (){
return {
msg :"hello vue!"
}
}
运行结果如下，
其中这里的
msg一定要用函数的形式赋值。
在插值表达式中药注意区分变量和字符串，使用引号包裹的是字符串，没有使用引号包裹的会被解析成变量名和方法名。
4.生命周期
所谓生命周期就是对象从构造函数开始执行（创建）到被销毁的的整个存在时期，在生命周期中被自动调用的函数称为生命周期函数。主要有以下函数，如图
- 1.
beforeCreate：在组件实例刚被创建的时候，可以增加一些loading事件 - 2.
created：可以结束loading事件，完成一些初始化，实现函数自执行。 -
mounted:是比较重要的生命周期函数，可以发起后端请求。组件通信等等。
-
5.v-bind指令
v-bind指令的主要用法是动态更新html的属性。
用法如下,下面两种写法效果是一样的，第二种是语法糖
<a v-bind:href="'http://www.baidu.com'">v-bind</a>
<!-- v-bind可以省略 -->
<a :href="'http://www.baidu.com'">v-bind</a>
6.绑定class的方式
- 1.对象语法
给v-bind:class设置一个对象，可以动态切换class，代码如下
//template
<p :class="{active:isActive}">this is p </p>
// script
data (){
return {
msg :"hello vue!",
isActive : false
}
}
// style
.active{
color: red;
}
当data里面的isActice是true的时候样式生效，是false的时候样式失效，可以自行验证。
- 2.数组语法
//template
<p :class="[colorClass,fontClass]">this is a p</p>
// script
data (){
return {
msg :"hello vue!",
colorClass : 'color',
fontClass : 'font'
}
}
// style
<style scoped>
.color{
color: red;
}
.font{
font-size: 30px;
}
</style>
执行效果如图，
这说明两个样式全部都执行了
7.绑定内联样式
//template
<div :style="{border:border,color:color}">this is a p</div>
// script
data (){
return {
msg :"hello vue!",
border : '1px solid red',
color : 'pink'
}
}
运行结果，
但是这样写法，不推荐，大多数都是在data或者computed计算属性里面。例如
<template>
<div class="hello" >
<div :style="styles">this is a p</div>
</div>
data (){
return {
msg :"hello vue!",
styles:{
border : '1px solid red',
color : 'pink'
}
}
}
执行效果和上面相同
三、总结
本文主要讲述了一些vue的基础用法，实际上vue真的很强大，还有很多高级用法。
