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:双向绑定，一般用于表单