MVVM是前端视图层的分层开发思想，分为三层 M VM V ,VM是核心。
前端页面中使用MVVM的思想，主要是为了让程序员开发更加方便，因为MVVM提供了数据的双向绑定（vm提供）。
vue和MVVM的关联：
V:页面中的HTML结构，vue实例所控制的元素区域
VM:是一个中间层v和m的调度者，存取数据都需要通过vm
M:保存的是每个页面的数据
vue指令
- v-cloak 解决插值表达式闪烁的问题，只会替换占位符的内容。
- v-text 没有闪烁问题，它会覆盖元素中原本的内容
- v-html 可以解析标签
- v-bind 用于绑定属性的指令，简写为：
- v-on 事件绑定的属性，简写为@
- 事件修饰符：
-.stop 阻止事件冒泡
-.prevent 阻止默认行为
-.capture 使用事件捕获
-.self 事件绑定在哪个元素上哪个元素触发，不阻止冒泡行为
-.once 只触发一次 - v-model实现数据双向绑定 只能运用在表单元素中
- v-for：可遍历普通数组、对象数组、对象、还可迭代数字
v-for中key属性的使用：使用时必须使用v-bind：绑定，key的值只能指定 数字或字符串 类型 - v-if和v-show 可实现切换效果
区别：v-if是删除或创建元素；v-show只是添加或删除样式display：none。
v-if有较高的切换性能消耗，如果涉及到频繁切换，最好不要使用该指令；
v-show有较高的初始渲染消耗，如果元素永远都不会显示出来，则不用该指令。
vue生命周期函数
在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他东西还未创建。
创建阶段的四个钩子：
beforeCreate(){}； 第一个生命周期函数，该函数执行时data和methods中的数据还未初始化。
created(){}; 第二个生命周期函数，该函数执行时data和methods已经初始化完成，如要调用，最早在该阶段操作。
beforeMount(){}; 第三个生命周期函数，执行到该函数时，内存中已经编译好模板但还没有挂载到页面，此时页面还是旧的。
mounted(){}; 第四个生命周期函数，执行到这个钩子，内存中的模板已经挂载到页面，说明vue实例已经初始化完成。只是实例创建期间的最后一个生命周期函数，如果想要通过插件操作页面上的dom节点，最早在该函数进行。
运行阶段的两个钩子：触发条件：当数据改变时才会触发！
beforeUpdate(){}; 执行到该钩子时，data中的数据已经更新，但是页面上的数据还是旧的，没有与最新的数据同步。
updated(){}; 执行到该钩子时，页面上的数据与data中的数据已经保持同步了，都是最新的。
销毁阶段：
beforeDestroy(){}; 执行到该钩子时，所有数据都是可用状态，还没有真正执行销毁的过程。
destroy(){}; 组件已经完全销毁了，不可用。
vue组件
组件化与模块化的区别：
组件化：是从UI界面的角度划分的，前端的组件化方便ui组件的重用
模块化：是从代码逻辑的角度划分的，方便代码分层开发，保证每个功能模块的职能单一
//创建组件的方式
//方式1：
//使用vue.extend搭配vue.component来创建全局的组件
var com1 = Vue.extend({
template:'<h3>第一种创建组件的方式</h3>'//通过该属性，指定组件要展示的html结构
})
Vue.component('mycom1',com1);//(组件名称，创建出来的组件模板对象)
//和写：
Vue.component('mycom1',Vue.extend({
template:'<h3>第一种创建组件的方式</h3>'
}))
//方式2：
//使用对象字面量的方式
Vue.component('mycom2',{
//*无论那种方式创建出来的组件，组件的template属性指向的模板内容 必须有且只有唯一的一个根元素
template:'<div><h4>第二种创建组件的方式</h4><span>~~</span></div>'
})
//方式3：定义一个私有的组件
//在vue实例里创建 components:{组件名：{template:" "}}
组件中的data必须是一个方法，且内部返回一个对象。
组件中的data使用方式和实例中的data使用方式完全一样。
父组件向子组件传值：props[“自定义属性名”]
props:['parentmsg'],//父组件传递过来的自定义属性需在prop数组中定义一下才可使用
父组件通过属性绑定v-bind：的形式，把数据传递到子组件内部 以供使用。
<!--自定义属性parentmsg-->
<com1 :parentmsg='msg'></com1>
子组件向父组件传值：this.$emit(‘自定义事件名’,数据)
this.$emit('useshow',this.sonmsg);//sonmsg是子组件中的数据
父组件通过事件绑定机制v-on向子组件传递方法，子组件通过$emit方法调用
<!--自定义事件属性useshow-->
<com1 @useshow='show'></com1>
ref可以获取dom元素、组件中的数据和方法
//html部分
<h3 ref='myh3'>{{msg}}</h3>
<com1 ref='mycom1'></com1>
//js部分 在vue实例的methods中
methods:{
getElement(){
//ref获取dom元素
console.log(this.$refs.myh3);
//ref获取子组件中的数据
console.log(this.$refs.mycom1.msg);
//ref获取子组件中的方法
this.$refs.mycom1.show();
}
vue路由
//html部分：
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
//vue-router提供的标签 展示对应路径地址匹配到的组件
<router-view></router-view>
//js部分：
//组件模板对象 必须在路由前面
var login={
template:'<h3>登录组件</h3>'
}
var register={
template:'<h3>注册组件</h3>'
}
//创建一个路由对象 当导入包之后 windows全局对象中就有了路由的构造函数VueRouter
//在实例化路由对象时，为构造函数传递一个配置对象
var routerObj = new VueRouter({
routes:[ //路由匹配规则
//每个路由规则 都是一个对象{path:'',component:组件模板对象}
//path表示哪个路由链接地址 component 展示路由对应path地址的组件
{path:'/login',component:login},
{path:'/register',component:register},
//redirect路由重定向
{path:'/',redirect:'/login'}
]
})
var vm = new Vue({
el:'#app',
data:{},
router:routerObj //将路由规则对象，注册到vm实例上，用来监听url地址的变化 继而展示对应组件
})
路由传参：query、 params
路由嵌套：children
//children设置子路由
children:[//子路由path 前不带 /
{path:'login',component:login},
{path:'register',component:register}
]
watch：{}
可以监听data中指定数据的变化，触发对应的处理函数，可监听非dom元素
computed：{}
其之中定义的属性叫 计算属性：本质是一个方法