vue第一周

vue的基础使用

<div id="box">
{{name}};//插值表达式
</div>
<script>
new Vue({
	el:"#box",//可操作的对象
	data:{
		
	},//存放数据
	methods:{
		
	},//存放方法
})
</script>

vue指令

1.v-html:可以渲染标签，类似innerHTML
如:
	<div v-html="变量名"></div>;
2.v-for:遍历数组
如:
	<li v-for="(v,i) in 数组名">{{v}}</li>;//(v,i)括号可以省略
3.v-model:双向数据绑定
如:
	<input v-model="val">{{val}}
	//当input里的value值发生变化时，{{val}}里的值也会变化
4.v-show:隐藏和显示，根据布尔值显示，设置display
5.v-if:是否渲染页面，根据布尔值显示，设置appendChild/remove
6.v-bind:或者":":操作动态属性，直接放在变量前
如:
	<a :class="变量" v-bind:href="变量"></a>
7.v-on:为标签绑定事件
如:
	<a @事件名="函数名()"></a>
注意:
	不传实参时，"()"可以省略，但会自动接收到一个形参event；
	想要传入实参并且得到event时，需写为
	@事件名="函数名($event,实参1,...)"
8.v-once:只需打开页面渲染一次时使用

vue样式操作

1.用class操作样式
如:
	假设下述样式已提前写好
	<button @click="change">点击</button>
	<div :class="obj">这是一个盒子</div>
	<div :class="arr">这是一个盒子</div>
	data:{
		obj:{
			a:true,
			b:true,
			c:false,
		}//对象方法不能直接添加和删除,虽然样式会生成，但是被vue拦截了
		arr:["a","b","c"]//数组方法可以随意删除和添加
	}
	methods:{
		change(){
			Vue.set(this.obj,"d",true);
			this.arr.push("dd");
		}
	}
	
2.用style内联样式操作
如:
	<button @click="change">点击</button>
	<div :style="obj">这是一个盒子</div>
	<div :sytle="arr">这是一个盒子</div>
	data:{
		obj:{
			background:"red",
			width:"100px",
			height:"100px",
		},//对象方法不能直接添加和删除,虽然样式会生成，但是被vue拦截了
		arr:[{background:"green",},{width:"100px",},{height:"100px",}]//数组方法可以随意删除和添加
	}
	methods:{
		change(){
			Vue.set(this.obj,"font-size","24px");
			this.arr.push("font-size":"50px");
		}
	}

vue3

创建方法不同
	Vue.createApp({
	}).mount("标签")
data的写法不同
	data(){
		return{
		变量:值
		}
	}
注意:vue3中对象可以直接用原来的js语法添加属性

事件修饰符

1.@事件名.stop="函数名()"//阻止冒泡
2.@事件名.self="函数名()"//跟冒泡类似，只有点击自己才会触发
3.@事件名.prevent="函数名()"//阻止默认行为
4.@keydown.enter="函数名()"//ctrl、esc、up、dowm、left、right、space、shift、delete或者键码

表单控件绑定

1.多选框
判断是否选中
如:
	<input type="checkbox" v-model="变量">
	变量为布尔值，true为选中，false为未选中
	多个多选框，设置选中时，传入v-model的为数组变量
	如:
		<input type="checkbox" v-model="数组变量" value="值1">
		<input type="checkbox" v-model="数组变量" value="值2">
		data:{
			数组变量:[值1，值2]
		}
2.单选框
选中时v-model中的变量会自动保存其value值
如:
	<input type="radio" v-model="变量" value="a">
	<input type="radio" v-model="变量" value="b">
注意:单选框和多选框避免使用点击事件，一般使用change事件

表单修饰符

1.v-model.lazy="变量"
	失去焦点时获取用户输入的内容
2.v-model.number="变量"
	自动实现隐式转换，转换为数字
3.v-model.trim="变量"
	自动去掉字符串开头、结尾的空白字符

计算属性

computed:{
	function(){
		return res
	}
}
注意:
	重复的只执行一次
	不支持异步;
	调用function时不加"()";
	函数内必须加return返回值;
	与计算有关的函数都放入computed中
	

监听属性

watch:{
	变量名(newval,oldval){
	}
}
注意:
	支持异步;
	监听data里的变量

组件

vue2
	Vue.component("自定义组件名",{
		template:`自定义模板标签`,
		data(){
			return {
				变量:"值";
			}
		},
		methods:{},
		components:{
			"子组件名":{
				template:``,
				...
			}
		}//局部组件，只能在全局组件内使用
	})
	注意:
		自定义组件名用驼峰命名时，在HTML中用横线连接符:navBar->nav-bar;
		template内只能包含一个根组件;
		data要写为函数式用法
vue3
	var obj={
		data(){
			return{}
		}
	}
	var app=Vue.create(obj);
	app.component("自定义组件名",{
		template:``,
	})
	app.mount("#box");

组件通信

1. 父传子
	1.数组语法糖:
		props[自定义属性]
	2.对象语法糖:
		props:{
			自定义属性:{
				type:
				default:
				}
			}
2. 子传父
	methods(){
		函数名(){
		this.$emit("自定义事件名")
		}
	}
	注意:
		自定义事件名写在父组件上
3. bus
	1.创建
		var bus=new Vue();
	2.订阅者
		mounted(){
			bus.$on("自定义名称",(data)=>{})
		}
	3.发布者
		bus.$emit("自定义名称",数据)
4.res
	fun(){
		this.$refs	
	}
	this.$refs:得到了数组数据
	ref="自定义名称"
	绑定dom上，得到dom对象
	绑定组件上，得到组件对象
		this.$refs.自定义名称：子组件对象
		this.$refs.自定义名称.变量：子组件对象变量
5.动态预定义组件
	<keep-alive>
		<component :is=which></component>
	</keep-alive>

axios

axios.get("json数据路径").then(res=>{})

slot插槽

需要组件内、在DOM上创建元素时使用
<slot "name"="xx"></slot>//根组件元素
<span slot="xx"></span>//DOM元素
v-slot="xxx";//批量显示

过渡

<transition enter-active-class="xx" leave-active-class="xx">
	想要使用动画展示的元素
</transition>
<transition name="class的开头">
	想要使用动画展示的元素
</transition>

注意:
	打开页面动画就生效，在transition上加appear
	如:
		<transition appear></transition>
		v-if可以展示多个元素的过渡,可以组合使用v-else、v-else-if
列表过渡
	<transition-group name="xx" tag="ul"></transition>
	注意:
		列表过渡必须用transition-group，否则只会显示一个li
		tag不写时，默认把ul替换为<span></span>标签

生命周期

vue2
	beforeCreate(){}
	created(){}
	beforeMount(){}
	mounted(){}
	beforeUpdate(){}
	updated(){}
	beforedestroy(){}
	destroyed(){}
vue3
	onBeforeCreate(){}
	onCreated(){}
	onBeforeMount(){}
	onMounted(){}
	onBeforeUpdate(){}
	onUpdated(){}
	onBeforeUnmount(){}
	onUnmounted(){}
vue2与vue3对比
beforeCreate() -->setup()
create()       -->setup()
beforeMount()  -->onBeforeMount()
mounted()      -->onMounted()
deforeUpdate() -->onBeforeUpdate()
updated()      -->onUpdated()
beforeDestroy()--onBeforeUnmount()
destroy()      -->onUnMounted()
vue2和vue3可以同时用但是vue3的优先级更高

自定义指令

vue2
	Vue.directive("自定义指令名",{
		inserted(el,binding){},
		update(el,binding){}//指令的生命周期
	})
	简化：
	Vue.directive("自定义指令名",(el,binding)=>{})
	el可以得到带有v-自定义指令的dom元素
	binding.value可以得到v-自定义指令里的内容
	如：
		v-change="yellow"
		binding.value可以得到yellow
vue3
	app.directive("自定义指令名",{
		mounted(){}//指令的生命周期
	})
	除生命周期不同，其他类似vue2
另外：
	this.$nextTick(()=>{})//比updated执行得还要晚

setup函数

vue3 setup是vue3中的新配置，值为一个函数
var obj={
	setup(){
		let 变量="变量值";
		function 方法名(){}
		return{
			属性名:变量,
			方法名
		}
	}
}
注:
	要使用setup内的变量必须要return
	当属性名与变量一致时可以只写属性名
	执行比beforeCreate早

ref函数

响应式布局
	let 变量=Vue.ref("xxx")
	变量.value可以设置值
	html上不用.value
	当使用import {ref} from "vue"引用vue时
	可以直接写let 变量=ref("xxx")

reactive函数

let 代理对象=reactive(源对象)
如：
	let obj=reactive({
		name="xxx",
		age=18,
		a:{
			b:{
				c:{}
			}
		}
	})
	return{
		obj,
	}
与ref得区别：不用.value

watchEffect
不用规定监听对象，更智能