vue笔记
一、 Vue.js特性
1.MVVM模式
M: model 业务模型，用处：处理数据，提供数据
V: view 用户界面、用户视图、界面可视部分
业务模型model中的数据发生改变的时候，用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变。
2.指令系统
3.组件化
4.Vue.js 2.0开始支持虚拟DOM，虚拟DOM可以提升页面的刷新速度。（Vue.js 1.0 是操作的真是DOM，而不是虚拟DOM）
二、vue的优点
1.轻量级的框架
2.双向数据绑定
3.组件化
4.高性能
5.单页开发
三、常用指令
v-text/v-html:
使用方法:
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<div v-html="html"></div>
v-if:根据表达式的真假渲染dom元素
<h1 v-if="ok">Yes</h1>
相当于
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
v-else:
v-else不只是可以搭配v-if，还可以搭配v-show
必须注意 ：v-else元素必须紧跟在 v-if或 v-show元素的后面——否则它不能被识别
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
v-show:根据条件展示元素
用法跟v-if是一样的，不同的是有 v-show的元素会始终渲染并保持在 DOM 中。v-show是简单的切换元素的 CSS 属性 display。
v-if：是真实的条件渲染，切换时销毁和重建，第一次如果判断条件为假，是什么都不做的，官方称为懒惰性。
v-show：元素始终被编译并保留，只是简单地基于 CSS 切换
总结一下， v-if有更高的切换消耗而 v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用 v-if较好。
v-for:遍历数据，for循环
<!-- html -->
<ul id="example-1">
<li v-for="(item,index) in user">
{{ item.username }}
</li>
//第二种写法
<li v-for="(item,index) in user" v-html='item.username'></li>
</ul>
//javascript
//javascript
var example1 = new Vue({
el: '#example-1',
data(){
return {
user:[{
id:"1",
username:'张三',
pwd:"123"
},{
id:"2",
username:'李四',
pwd:"123"
},{
id:"3",
username:'小明',
pwd:"123"
}]
}
}
})
扩展应用：
给偶数行加上一个class为old
<ul style='width:40px'>
<li v-for='(item,index) in user' v-html="item.username" :class="{odd:index%2}"></li>
</ul>
v-on:事件绑定
<button type="button" v-on:click = "num += 1">点击增加1</button>
缩写:
<button type="button" @click = "num += 1">点击增加1</button>
在监听原生 DOM 事件时，方法以事件为唯一的参数:
<button v-on:click="doThis"></button>
// 在 `methods` 对象中定义方法
methods: {
doThis: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">
全部的按键别名：
enter
tab
delete (捕获 “删除” 和 “退格” 键)
esc
space
up
down
left
right
<input v-on:keyup.enter="submit">
对于不会触发页面渲染的方法，可以使用vue.set(要改变的数值，要改变的项，要改变的值)；
Vue.set(this.user,2,{
username:'小红',
pwd:'123'
})
v-bind:动态的绑定标签一个或多个属性
缩写（:）
<a v-bind:href="link" :title='biadu'>go to baidu</a>
v-module:双向绑定，一般用于表单
