Vue

Vue.js简介

渐进式JavaScript框架: 数据驱动+组件化的前端开发

常用指令

1. 什么是指令

用来扩展html标签的功能

2. vue中常用的指令

• v-model 双向数据绑定, 一般用于表单元素
• v-for 对数组或对象进行循环操作
• v-on 用来绑定事件, 用法 v-on:事件="函数"
• v-show/v-if 显示或隐藏元素, v-show是通过display实现, v-if是每次删除再创建

指令封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相应DOM操作的绑定

• v-text 等价于 {{}} 实现原理: innerText

• v-html 实现原理: innerHTML

• v-if/v-show v-if="Math.random() > 0.5";v-if="isShow" ;v-if="func()";

• v-for 遍历数组或对象

  • v-for="(item, index) for item in menuList" :
  • v-for="(value, key) in object" -- =

• v-bind 进行属性绑定 缩写 := 得是数据属性中的值，如data

  • v-bind:calss='{active: true}'
  • v-bind:src="url"
  • :class, :src, :id

• v-on 事件三步走：1. 事件源 2. 事件类型 3. 事件驱动程序

  • v-on:click 对当前DOM绑定click事件
  • v-on:click <--> @click

• v-model 来实现vue的双向数据绑定，只允许在表单控件中使用 data <--> view

  • input
  • textarea
  • select

v-model 实现原理

<input type="text", :value="msg", @input="changeHandler($event)">
data: {
	msg: '数据'
},
methods: {
	changeHandler(event){
		this.msg = event.target.value;
	}
}

v-text v-html {{}} 对页面的dom进行赋值运算 相当于js中的innerText innerHTML

v-if 实现原理

v-if='true'
var oP = document.createElement('p');
oDiv.appendChild(op);

v-if='false'
oDiv.removeChild(op)

v-show 实现原理

v-show='true'
oDiv.style.display='block';

v-show='false'
oDiv.style.display='none';

v-bind:class 实现原理

oDiv.className += ' active'

发送AJAX请求

1. 简介

vue本身不支持发送AJAX请求, 需要使用vue-resource、axios等插件
axios是一个基于Promise的HTTP请求客户端, 用来发送请求, 也是vue2.0官方推荐, 同时不再对vue-resouce进行更新维护

参考: GitHub axios, 查看API (opens new window)

2. 使用axios发送AJAX请求

2.1 安装axios并引入

https://github.com/axios/axios.git

2.2 基本用法

axios([options]);

axios.get(url, [options]);
传参方式

• url?key=value
• 通过选项 {params: {key: "value"}}

axios.post(url, data, [options]);
传参方式

• data
• 如果使用模块化开发, 可以使用qs模块进行转换

3. 使用vue-resouce发送跨域请求

3.1 安装vue-resouce并引入

git clone https://github.com/pagekit/vue-resource.git

Vue生命周期

Vue实例从创建到销毁的过程, 称为生命周期, 共有八个阶段
统一作为new Vue(options)中options选项, 与el, data, methods, filters同级别

• beforeCreate()
• created()
• beforeMount()
• mounted()
• beforeUpdate()
• updated()
• beforeDestroy()
• destroyed()

计算属性

1. 基本用法

计算属性也是用来存储数据, 但具有以下几个特点:

• 数据可以进行逻辑处理操作
• 对计算属性中的数据进行监视

2. 计算属性 vs 方法

将计算属性的get函数定义为一个方法也可以类似的功能
区别:

• 计算属性是基于它的依赖进行更新的, 只有在相关依赖发生改变时才能更新变化
• 计算属性是有缓存的, 只要相关依赖没有改变, 多次访问计算属性得到的值是之前缓存的计算效果, 不会多次执行

3. get和set

计算属性由两部分组成: get和set, 默认只有get, set需要添加

Vue实例的属性和方法

1. 属性

• vm.属性名
• vm.$el
• vm.$data
• vm.$options
• vm.$ref

2. 方法

• vm.$mount()

• vm.$destroy()

• vm.nextTrick()

• vm.$set()

• vm.$delete()

• vm.$watch()