# 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()

上次更新: 5/9/2021, 4:17:56 PM