1.MVC与MVVM区别
MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据操作（CRUD）
交互模式如下（图片摘自阮一峰日志）：
用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态，然后更新View
用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。
视图（View）：用户界面。
双向数据绑定（ViewModel）：View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI
模型（Model）：数据操作
交互模式如下：
总结：mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。VM提供双向数据绑定当View和Model中的数据有一个发生改变，另一个也会随着改变
2.Vue基本代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--将来new的Vue的实例会控制这个元素的所有内容-->
<div id="app"></div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app", //当前我们new的这个Vue实例要控制页面上的哪个区域
data: {
msg: "HelloWorld" //data属性中，参访的是el中要用到的数据
},
methods: {
},
});
</script>
</body>
</html>
3.Vue常用指令的使用
1.插值表达式 {{ }} ，将data中数据插入页面中，只会替换自身的占位符，不会清空元素原本的内容
2.v-cloak ：（通过设置样式display:none）解决插值表达式闪烁问题
3.v-text ：（v-text=‘data中的属性名’）会覆盖元素中原本的内容，无闪烁
4.v-html：（v-html=‘data中的属性名’）插入HTML标签，会覆盖元素中原本的内容
5.v-once： 不允许修改数据。带有v-once的p标签则只会显示msg的初始值，不会随着msg被修改而变化。
6.v-bind：（v-bind:title="data中的属性名 + ‘合法的js语法’ "）用于绑定属性，简写为 :
7.v-on：（v-on:click=‘show’）用于绑定事件，简写为 @
8.v-model：实现表单元素和应用状态之间的双向数据绑定
9.v-for：循环指令，基于一个数组或者对象渲染一个列表，需配合 key值 使用。
10.v-if：根据表达式的值的真假条件，销毁或者重建标签元素。flag 为true 渲染p标签，false 不渲染
11.v-show：根据表达式的值的真假条件，切换元素的 display CSS 属性。flag 为 false 将p 标签的 display属性设置为 none
<div id="app">
<p v-once>{{ msg }}</p>
<p v-cloak>{{msg}}显示出来了</p>
<p v-text="msg"></p>
<p v-html="htmlmsg"></p>
<p v-once>{{msg}}</p> //显示msg的初始值，不会随着msg被修改而变化。
<a v-bind:href="url"></a>
<a :href="url"></a> //简写
<button v-on:click="show">BOTTON</button>
<button :click="show">BOTTON</button> //简写
<input v-model="name"></input> //输入值的改变，会即时在下面显示
<p>{{ name }}</p>
<ul>
<li v-for="(item,index) in myarray"> {{ item }} </li>
</ul>
<p v-if="flag">123</p> //flag 为true 渲染<p>标签，false 不渲染
<p v-show="flag">123</p> //flag 为 false 将<p> 标签的 display属性设置为 none
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "HelloWorld" ,
htmlmsg:"<p>hello world</p>",
name:"",
url:"www.baidu.com",
myarray:[1,2,3],
flag:true
},
methods: {
show(){
console.log(123)
}
},
});
</script>
v-if 与v-show 使用总结：
v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
4.事件修饰符(.stop/.prevent/.capture/.self/.once)
<a v-on:click.stop="doThis"></a> //阻止单击事件冒泡
<form v-on:submit.prevent="onSubmit"></form> //阻止默认事件，默认提交时重载页面，使用后不会重载页面
<a v-on:click.stop.prevent="doThat"></a> //修饰符可以串联使用，并且使用的顺序很重要
<div v-on:click.capture="doThis">...</div> //添加事件监听器时使用事件捕获模式
<div v-on:click.self="doThat">...</div> //点击自身时才会触发函数，冒泡或捕获都会略过自身
<a v-on:click.once="doThis"></a> //点击事件将只会触发一次
5.Vue绑定样式的方式
v-bind:class ：动态地切换 class，v-bind:class 指令也可以与普通的 class 属性共存
<div class="myclass" v-bind:class="{ active: isActive }"></div>
data:
data: {
isActive: true,
hasError: false
}
渲染结果为：
<div class="myclass active"></div>
v-bind:style：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
渲染结果：
<div style="color: red; font-size: 30px;"></div>
