Vue初步认知

1.Vue
        Vue是渐进式的JavaScript库,基于mvvm模式即
        

 m    model  
 v    view 
vm    viewModel(m<--->v)  
Vue也是数据驱动框架

jQuery与Vue中
Vue彻底摆脱了dom操作 
jQuery帮助进行都dom操作

2.模板语法
Vue实例和模板
数据模型和模板
将数据模型渲染,进行Vue帮助进行dom操作或自己进行dom操作

1)双大括号:一般用在标签内部
{{}}中放置变量如: {{message}}
方法的调用如: {{message.split("").reverse().join("")}}
放表达式如:{{a + b}}
2)指令:一般用于标签的属性中
v-html :用于将一段HTML代码渲染到页面中
v-if  v-else-if v-else :条件渲染,if当中的值为true时当前元素才能显示,为Flase时不予显示
v-show ,if当中的值为true时当前元素才能显示,为Flase时则display : none; 仍存在
v-for 做迭代
v-model表单元素当中
v-bind属性绑定 简写:   :
v-on方法绑定 简写 :    @
v-slot slotName插槽名称 :  #
3)应用模板 组件
1.功能组件
2.页面组件
自己做组件
<template>
</template>
<script>
      export default {
      
      }
</script>
<style scoped>  //局部样式只在当前模块有效

</style>

elementui 提供了一套完整的组件库

3.Vue实例
无数个Vue实例,只有一个根实例,每一个组件都有一个Vue实例与之对应
1)根组件的实例对象由用户自己创建
根组件
new Vue({
el:"#app",
data:{
}
})
组件定义,子组件
let myAlert = {
template:``,
data(){
return{
}
},
methods:{}
}
Vue.component('my-alert',myAlert)
调用my-alert,实际就是创建了一个myAlert的实例
2)Vue实例对象可以直接访问
Vue实例对象可以直接访问data,methods,props,computed定义的属性或者方法;
methods中的方法,构造函数,计算属性中的方法中的this指向当前Vue实例

4.生命周期
初始化Vue实例对象
beforeCreate
created
编译模板,将模板转化为dom对象$el
beforeMount
将Vue实例中的data,method绑定到$el
mounted
设置监听,data中值发生变化,模板就会重新渲染
beforeUpdate
updated
销毁
beforeDestory
destoryed

5.style与class绑定
style
1)style属性的绑定
静态绑定 Vue不会进行二次处理 无动态效果
<div style = "color:red"></div>
<div :style="style"></div>
data:{
style:{
style:'color:red'
}
2)style属性的绑定拓展语法
<div :style="style"></div>
data:{
style:{
color : 'red'
}
}
=>
<div :style="{color:'red'}"></div>

<div :style="[style,a]"></div>
data:{
style:{
color:'red'
}
a:{
background:"lightblue"
}
}


class
1)class属性
<div class="basic current"></div>
<div :class="cc"></div>
data:{
cc:"basic current"
}
2)class属性的拓展语法(Vue)
<div :class = "{basic:true,current:false}"></div>
<div :class="[a,b]"></div>
data:{
a:"basic",
b:"current"
}

6.事件机制
三要素
事件源
事件处理函数
事件对象
2)事件绑定
<div @click="handler">添加</div>
methods:{
handler(event){
}
}
div   事件源
事件处理函数  handler
事件对象   event
<div @click="handler(a,'a',$event)">添加<div>
data:{
a:"b"
}
methods:{
handler(a,b,event){}
}
3)事件修饰符
1.事件对象修饰符
.prevent    .stop   .once   .self
2.按键修饰符
.enter   .space   .delete
3.系统修饰符
.ctrl   .shift   .meta

7.组件
1)定义
let myAlert = {
template:``,
data(){
return {} 
}
props:["a","b"]
}

2)注册
1.局部注册
new Vue ({
components:{
'my-alert':mtAlert
}
})
2.全局注册
Vue.component('my---alert',myAlert)
3)使用
<my-alert a="hello" :b="   'world'   "></my-alert>

4)交互
1.自定义参数
父->子
<my-alert a="hello" :b="'world'"></my-alert>

			props:["a","b"]
			props:{
				a:{
					type:"String",
					default:""
				},
				b:{
					type:"String",
					required:true
				}
			}


2.自定义事件
子 -> 父
			<my-alert @foo="handler"></my-alert>

			let myAlert = {
				template:`<div @click="handler">ok</div>`,
				methods:{
					handler(){
						this.$emit("foo")
					}
				}
			}

3.插槽
1) 匿名插槽
				<my-alert>hello world</my-alert>
				<my-alert>
					<template v-slot:default>
						hello world
					</template>
				</my-alert>
				let myAlert = {
					template:`<div><slot></slot></div>`,
				}
			2) 具名插槽
				<my-alert>
					<template v-slot:one>
						hello world
					</template>
				</my-alert>
				let myAlert = {
					template:`<div><slot name="one"></slot></div>`,
				}
			3) 作用域插槽
				<my-alert>
					<template v-slot:one="slot">
						hello world {{slot.row}}
					</template>
				</my-alert>
				let myAlert = {
					template:`<div><slot name="one" :row="'hello'"></slot></div>`,
				}

8.表单处理(双向数据绑定)
9. 计算属性
	1) methods中的方法在模板中被调用，如果这个方法依赖data，data的值发生了变化，这个方法就会重新执行；计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致！！！

	2) 计算属性计算出来的结果会被缓存起来，下次无需计算直接显示，而方法不是，每次调用都会重新执行。

10. 监听器
	可以监听data中值的变化