Vue基础

1、基本Vue代码结构

2、模板语法

插值表达式{{ }}、v-cloak、v-text、v-html

总结：v-cloak配合插值表达式{{ msg }}使用；v-text、v-text直接赋值msg，其中v-text直接展示msg，而v-text则会先解析msg中的html代码再展示。

2、v-bind绑定属性

v-bind绑定data中属性的值
v-bind:title=“mytitle” 中v-bind使引号中的mytitle被解析为js表达式（变量），变量在data中定义:

其中，v-bind: 可简写为 :

3、v-on绑定事件

v-on:click=“show” 点击事件（或其他操作事件）绑定方法，引号中内容解析为js表达式（方法），方法在methods中定义：

同样的，v-on: 可简写为 @

注：若在Vue的实例内想要获取data中的数据，或想要调用methods中的方法，必须通过this，即this.数据属性名、this.方法名，例：

上图methods中使用了定时器setInterval( function(){}, 400 )，为解决function中this的指向问题，用箭头函数 () => {} 使setInterval内外的this保持一致。

4、事件修饰符

• .stop: 阻止冒泡。即阻止外层元素事件也被触发。
  （注：事件冒泡：指内层元素的事件，会触发包含着此元素的外层元素的事件，触发顺序：由内而外。例如：btn1包含在btn2中，点击了btn1，实际上btn1、2都点击到了，所以btn1,btn2点击事件都被触发，出发顺序是btn1 —> btn2）
• .prevent: 阻止默认事件。例如：在a标签中加入 @click.prevent=“func” 即可阻止a标签默认的跳转行为，而只触发func函数中的行为。
• .capture: 添加事件监听时使用事件捕获模式 （注：事件捕获：和事件冒泡类似，不过顺序相反，即由内而外）
• .self: 只当事件在该元素本身触发时触发回调。（注：stop阻止所有冒泡；self只阻止自己的冒泡，即父元素事件不触发但父元素外的元素事件仍会触发。）
• .once: 事件只触发一次

5、表单元素的数据双向绑定v-model

v-bind只能实现数据的单向绑定，只能实现M渲染到V。eg:v-bind:value=“msg”

v-model可实现 M <==> V 。eg:v-model=“msg”
（注：v-model只能用在表单元素中，例如input(radio/text/address/email),select,checkbox,textarea）

6、样式class

首先通过v-bind绑定class，绑定后：

1. 直接传class数组
2. 数组中使用三元表达式
3. 数组中使用对象（即无序键值对的集合）代替三元表达式
4. 直接使用对象
   赋给class对象本身的隐藏和展示：
   

7、内联样式style

1. 直接在元素中写样式对象:style = “{color: ‘res’, font-size: ‘40px’}”
2. :style引用data中的样式对象:

:style = "styleObj1"

data: { 
	styleObj1: {color: 'res', font-size: '40px'} 
}

3. :style通过数组引用data中的多个样式对象:

:style = "[styleObj1, styleObj2]"

data: { 
	styleObj1: {color: 'res', font-size: '40px'},
	styleObj2: {font-style: 'italic'}
}

8、列表渲染：v-for

v-for="i in x"中x可以是 普通数组、对象数组、对象、数字。

遍历数组： v-for=“item in list”，相当于与for item in list

↑ 元素

↑ 元素及索引
↑ 元素及索引（元素是对象时）

遍历对象： v-for="(val, key, i) in obj1"，(值, 键, 索引) in 对象

迭代数字： v-for=“count in 10”，count值从1开始，即相当于for count in range(1,11)

key属性： key值使元素唯一，避免产生混淆复用（2.2.0版本后，key为必选属性）

9、条件渲染：v-if和v-show

v-if 每次都会重新删除和创建元素。v-if还可配合v-else-if和v-else使用,要求else必须紧跟if，中间被其他行阻隔时会报错。
v-show 不会删除和创建元素 而只是改变元素的display:none样式
ps:教程中引入了bootstrap，此处用到bootstrap中的面板元素panel，如下：

10、list的一些操作

操作list的函数：push\pop\shift\unshift\splice\sort\reverse

以 对list的删除、添加操作为例：

var vm = new vue({
el: '#app'
data: {
id: ' ',
name: ' ',
list: [
{ id : 1, name : '奔驰', ctime: new Date() },
{ id : 2, name : '宝马', ctime: new Date() }
]
}，
methods: {
delete(id) { //根据传入的ID来删除数据
// 1.根据ID来找到要删除的这一项的索引
// 2. 找到索引后，调用数组的splice方法
// 方法一
this.list.some((item, i) => {
if (item.id == id ){
this.list.splice(i,1)
// 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环,所以相比较foreach，如果想要终止循环，那么建议使用some
return true；
}
})
// 方法二
var index = this.list.findIndex(item => {
if ( item.id == id) {
return true;
}
})
this.list.splice(index,1)
}
// 方法三(不推荐，因为无法被终止)
this.list.forEach(item => {
if (item.id == id){
this.list.splice(i,1)
}
})
}
})

// 对list的添加操作
var car = { id : this.id, name: this.name} 
this.list.push(car)

this.list.some(item, i) 把id值赋给item.id，比较list中每一项的id值，i即为index，如果返回true，就不再往后执行，i即为所找id的位置
this.list.splice(index,1) 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。array.splice(index,num)，返回值为删除内容，array为结果值
this.list.findIndex(item) 遍历list,item.id就是list中的id值
this.list.forEach(item) 把id值赋给item.id，比较list中每一项的id值，无返回值

11、vue-devtools

浏览器插件。方便在浏览器查看vue实例中的所有数据。

12、生命周期函数（钩子函数）

13、计算属性computed

优点：缓存机制。即当计算结果不变时，不会重新执行计算过程。对应的，如果是直接在methods中写方法实现计算，就不会有缓存机制，没刷新一次页面就会计算一次。

getter、setter方法：

14、侦听器watch

15、vue中的set方法

16、Vue组件

（1）前端组件化
创建全局组件的方法：Vue.component()

Vue.component( '组件名', {
	props: [], // 用于定义外部传的数据
	template: ''
})

创建局部组件的方法：
（2）子组件
子组件中data的定义必须以 function(){ return{} } 的形式。

Vue.component( '组件名', {
	data: function() {
		return {
			data1: ''
		}
	},
	template: ''
})

（3）父子组件间传值
父->子组件：通过 属性 的方式传值
子->父组件：执行 this.$emit(“自定义事件”, 数据) 触发事件/携带数据

Vue单项数据流：子组件不可随意修改父组件的值(Vue warning)

（4）组件参数校验
props中数据定义：

props: [data1]

给数据加类型约束：

props: {
	data1: String // 允许多个类型时通过数组添加,eg:[String, Number]
}

添加其他约束：

props: {
	data1: {
		type: String,
		required: false, // true时数据必传，没传会报错，默认false
		default: 'defaultValue' // 数据无传递的值时，使用该默认值
	}
}

自定义校验器：

props: {
	data1: {
		type: String,
		validator: function(value) { 
			// return为true时校验通过，否则校验失败报warning
			return (value.length > 5)
		}
	}
}

（5）给组件绑定原生事件
给组件绑定原生事件，需添加 .native，如下：
（6）非父子组件间传值
通过总线机制（bus）实现传值：
（mounted:组件被挂载时触发的生命周期函数）
（7）插槽（slot）
在组件Vue.component的template中使用<slot> </slot>来代替该组件中的插槽内容，也可设置默认值<slot>默认内容</slot>，当该组件中无内容时展示默认内容。
具名插槽：组件中的标签设置了slot属性,如<p slot = 'slotName1'></p>，此时对应的template即为<slot name = 'slotName1'></slot>。
作用域插槽：
（8）动态组件与v-once指令
v-once指令：给组件添加v-once，实现组件的缓存，组件被多次使用时，就避免了多次的销毁与创建，提高性能。