vue.js 学习：https://cn.vuejs.org/
vue.js下载链接：https://pan.baidu.com/s/17ronmiYJxrrBW6m7m7Zuzg
提取码：tfv7
vue.js 是一套构建用户界面的渐进式框架，是一个JavaScript MVVM库，用于在Web上构建UI，与Angular.js和react4.js并称为前端三大框架，只关注视图层，主要支持移动端，也支持PC端。Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。
框架是一套完整的解决方案，库（插件）提供某一个功能。
MVC是后端的分层开发概念，MVVM是前端视觉层的概念，主要关注视觉层分离。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
app.js ----项目的入口模块，app.js没有路由分发功能
router.js ----只有路由分发功能，不负责业务逻辑的处理。
controller ----只负责处理业务，不负责处理数据的CRUD
model ----只负责操作数据库，进行数据的CRUD（C:creat，R:read，U:update，D:delete）
view ----视图层
MVVM: M保存每个页面单独的数据，VM是调度者，分隔M和V，负责中间处理，VM提供了数据的双向绑定，V指每个页面的html代码。
导入vue.js工具包:
<script src="vue-2.4.0.js"></script>
<body>
//vue的实例会控制该元素中的所有内容(V)
<div id="aa"><p>{{msg}}</p></div>
<script>
//导入vue包后，浏览器内存中多了一个vue构造函数,num对象即VM调度者
var num=new Vue({
el: '#aa', //vue要控制的区域
data:{ msg:'欢迎光临'}
//通过Vue提供的指令把数据渲染到页面上，无需手动操作DOM，data即MVVM中的M
})
</script>
</body>
v-cloak ----解决插值表达式的闪烁问题
<style>
[v-cloak]{
display: none;
}
</style>
<p v-cloak>{{ msg }}</p>
v-text -----默认没有闪烁问题，会覆盖元素中原本的内容，但插值表达式只会替换占位符。
<p v-text="msg"></p>
v-html -----用html格式显示元素内容
v-bind -----用于绑定属性，v-bind：可简写为： ，只能实现数据的单向绑定，从M绑定到V
<input type="button" value="按钮" v-bind:title="title" id="btn">
document.getElementById("btn").onclick=function(){
alert("hello");
}
v-on ----用于绑定事件，v-on： 可简写为 @
v-model -----实现表单元素和model中的双向绑定，只能用在表单元素中
<input type="button" value="按钮" v-on:click="show">
methods: {
show: function () {
alert("hello");
}
在VM实例中，访问数据用this.方法名或属性名。
制作字符串跑马灯与停止效果：
show(){
setInterval(()=>{
var start=this.msg.substring(0,1); //截取第一个字符
var end=this.msg.substring(1); //截取之后的字符
this.msg=end+start;
},400)
},
stop(){
clearInterval(this.intervalid);
this.intervalid=null;
}
事件修饰符：
.stop ----阻止冒泡
.prevent ----阻止默认行为
.capture ----实现捕获触发事件的机制
.self ----实现只有点击当前元素时才会触发事件
.once ----只触发一次事件处理函数
vue中使用样式：：
1、传递一个数组，数组中可以使用三元表达式（可以用对象代替），在为class使用v-bind绑定对象时，对象属性是类名。
<h1 :class="['thin', ‘italic’, flag?'active':'',
{'active':flag}]">哈哈哈</h1>
2、使用内联样式，
<h1 :style="{color:'#aaa','font-weight':200}">哈哈哈</h1>
<h1 :style="styleobj1, styleobj2">哈哈哈</h1>
data:{
styleobj1 : {color:'#aaa','font-weight':200}
}
在遍历对象的键值对时，除了有val和key，还有索引值i。
<p v-for="( item, i ) in list">索引值：{{ i }} --- 每一项：{{ item }}</p>
<p v-for="( val, key, i ) in list">值是：{{ val }} --- 键是：{{ key }}
---索引值：{{ i }}</p>
<p v-for="count in 10">这是第{{ count }}次循环</p>
//in后可以放普通数组，对象数组，对象和数字，用数字时，count值从1开始
<p v-for="user in list">索引值：{{ user.i }} --- 每一项：{{ user.item }}</p>
data:{
list:{
{id:1,name:'zs1'},
{id:2,name:'zs2'}
}}
v-for循环时，key属性只能用number获取string，只能用v-bind形式指定key的值。
<div>
<label>id:
<input type="text" v-model="id">
</label>
<label>name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" ,@click="add">
<p v-for="item in list" :key='item.id'><input type="checkbox">{{item.id}}
--- {{item.name}}</p>
</div>
add(){
this.list.push({ id : this.id, name :this.name})
}
v-if: 每次都会重新删除或创建元素，有较高的切换消耗
v-show: 每次都不会重新进行dom的删除或创建元素，只是切换display：none的样式，有较高的初始渲染消耗。
<h1 v-if='flag'>哈哈哈</h1>
data：{
flag：true
}