学习VUE3.0第二天

最新推荐文章于 2024-05-30 08:59:56 发布

Tom敲代码

最新推荐文章于 2024-05-30 08:59:56 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/zhongxu_yuan/article/details/124079005

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE3.0学习笔记

开始学习时间:2022-04-09

引入VUE的CSDN<script src="https://unpkg.com/vue@next"></script>

Vue官网:https://v3.cn.vuejs.org/

一、VUE语法初探-开始学习时间:`2022-04-09`

1.1 单页面基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue基本语法使用</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
            //创建vue实例并且使用mount挂载到id = app 节点下
			Vue.createApp({
				data() {
					return {
						content: "hello world vue3.0"
					}
				},
				template:`<div>{{content}}</div>`
				
			}).mount("#app");
		</script>
	</body>
</html>

1.2 定时器使用:setInterval

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>helloWorld 定时器</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			 count>>>{{count}}
		</div>
		<script>
		//创建vue实例
		const app = Vue.createApp({
			data() {
				return {
					count: 0,
					content:"hello world"
				}
			},
			mounted() {
				setInterval(()=>{
					this.count +=1;
				},1000);
			}
		});
		//把vue实例挂载到 id=app 的dom节点下
		app.mount("#app")
		</script>
	</body>
</html>

1.3 字符串翻转:@click

v-on:click='converStr’ 点击事件 ,可以简写@click="converStr"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		
		<script>
		const app = Vue.createApp({
			data() {
				return {
					content: "hello world vue"
				}
			},
			methods:{
				//点击触发翻转字符串的方法
				convertStr(){
					this.content = this.content.split('').reverse().join('');
				}
			},
			template: `<div>{{content}}  </div>
			<button v-on:click="convertStr">反转</button>
			<button @click="convertStr">反转</button>
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

1.4 隐藏和显示:v-if

v-if指令,作为逻辑判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示和隐藏</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					content: "hello world vue",
					show: true
				}
			},
			methods:{
				handlershow(){
					this.show = !this.show;
				}
			},
			template: `<div v-if="show">{{content}}</div>
				<button @click="handlershow">显示或隐藏</button>
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

1.5 数据双向绑定 :v-model

比如在输入框中使用v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					inputValue: "",
					list:["今天学习VUE3"]
				}
			},
			methods:{
				addValue(){
					this.list.push(this.inputValue);
					this.inputValue=""
				}
			},
			template: `
			<input v-model="inputValue" /><button @click="addValue">新增</button>
			 <ul>
				<li v-for="(item,index) of list">
				{{item}}
				</li>
			 </ul>
			 
			 `
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

1.6 数据循环遍历 : v- for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据循环遍历</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					books:["JAVA8实战","kafka指南","K8S"]
				}
			},
			template: `<ul>
				<li v-for="(item,index) of books">
					编号:{{index+1}}----名称：{{item}}
				</li>
			
			</ul>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

1.7 组件概念初探:component

如何创建组件，模板如何传值给组件基础使用

v-bind绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>07.组件概念初探使用</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			{{ counter }}
		</div>
		<script>
			const App = {
				data() {
					return {
						counter: 0,
						list:['java','Vue3.0','python']
					}
				},
				mounted() {
					//页面加载完毕之后 启动一个定时器
					setInterval(()=>{
						this.counter +=1;
					},1000)
				},
				template: `<ul>
					<to-do v-for="(index,item) of list" 
					v-bind:content="item" 
					v-bind:index="number" />
				
				</ul>`
			};
			//创建一个vue实例然后挂载到 #app下 [这样编写可以自定义组件]
			
			const vue=Vue.createApp(App)
			//自定义组件
			vue.component("to-do",{
				props:['content','number'],
				template:`<li>{{content}}---{{number}}</li>`
			})
			vue.mount('#app');
		</script>
	</body>
</html>

二、Vue基础语法-开始学习时间: `2022-04-10`

2.1 MVVM设计模式

M----model 数据; V—-view 视图;vm—-viewmodel视图数据连接层

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello world vue3.0</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root">
			{{message}}

		</div>
		<script>
		//app 表示vue应用,存储在app变量
		// mvvm 设计模式: m -->model 数据; v-view视图； vm-->viewmodel视图数据连接层
			const app = Vue.createApp({
				data() {
					return {
						message: "xxx"
					}
				}
			});
			//vm 表示vue应用的根组价
			//vm.$data.message="hello vue3.0"
			const vm = app.mount("#root")
		</script>
	</body>
</html>

2.2 Vue生命周期函数:vue2.x

vue3.x 创建Vue应用: Vue.createApp({})

2.3 常用模板语法使用

插值语法 : {{message}}

v-html指令 通过html 展示message 变量，不会转义 message的标签，直接渲染 message: <stronge>hello world </stronge>

v-bind:title 绑定一个属性为title

输入框是否可以输入: <input v-bind:disabled="disabled”/> data中有一个属性: disabled:true

js表达式: {{Math.max(1,2)}}

v-once: 变量只是用一次 <div v-once>{{message}}</div>

v-if: <div v-if="show”>{{message}}</div>

动态属性绑定: :[name]="message” / @[event]="handlerMehod” data中有一个属性： name: "title” event: "mouseenter”

阻止表达提交[事件修饰符]: @click.prevent="handlerClick” ,handlerClick是methods里面的一个方法，写我们自己的逻辑

2.3.1 插值表达式使用:{{message}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello world vue3.0</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		//app 表示vue应用,存储在app变量
		// mvvm 设计模式: m -->model 数据; v-view视图； vm-->viewmodel视图数据连接层
			const app = Vue.createApp({
				data() {
					return {
						message: "xxx"
					}
				},
				template:`<div>{{message}}</div>`
			});
			//vm 表示vue应用的根组价
			//vm.$data.message="hello vue3.0"
			const vm = app.mount("#root")
		</script>
	</body>
</html>

2.3.2 直接渲染数据，不用转义 :v-html

在使用插值表达式的时候默认是进行转义了的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello world vue3.0</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		//app 表示vue应用,存储在app变量
		// mvvm 设计模式: m -->model 数据; v-view视图； vm-->viewmodel视图数据连接层
			const app = Vue.createApp({
				data() {
					return {
						message: "<strong>hell world</strong>"
					}
				},
				// template:`<div v-html="message"></div>`
				template:`<div>{{message}}</div>`
			});
			//vm 表示vue应用的根组价
			//vm.$data.message="hello vue3.0"
			const vm = app.mount("#root")
            
            
            //直接输入: <strong>hell world</strong>
		</script>
	</body>
</html>

使用v-html 直接渲染message中的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello world vue3.0</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		//app 表示vue应用,存储在app变量
		// mvvm 设计模式: m -->model 数据; v-view视图； vm-->viewmodel视图数据连接层
			const app = Vue.createApp({
				data() {
					return {
						message: "<strong>hell world</strong>"
					}
				},
				template:`<div v-html="message"></div>`
				// template:`<div>{{message}}</div>`
			});
			//vm 表示vue应用的根组价
			//vm.$data.message="hello vue3.0"
			const vm = app.mount("#root")
		</script>
	</body>
</html>

2.3.3 给标签绑定属性 v-bind:title (或者简写`:title`)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello world vue3.0</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		//app 表示vue应用,存储在app变量
		// mvvm 设计模式: m -->model 数据; v-view视图； vm-->viewmodel视图数据连接层
			const app = Vue.createApp({
				data() {
					return {
						message: "<strong>hell world</strong>"
					}
				},
				template:`<div v-html="message" v-bind:title="hell"></div>`
				// template:`<div>{{message}}</div>`
			});
			//vm 表示vue应用的根组价
			//vm.$data.message="hello vue3.0"
			const vm = app.mount("#root")
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello world vue3.0</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		//app 表示vue应用,存储在app变量
		// mvvm 设计模式: m -->model 数据; v-view视图； vm-->viewmodel视图数据连接层
			const app = Vue.createApp({
				data() {
					return {
						message: "<strong>hell world</strong>",
						disabled: true
					}
				},
				methods:{
					handlerDisabled(){
						this.disabled = !this.disabled;
					}
				},
				template:`<div v-html="message" v-bind:title="hell"></div>
				
				<input v-bind:disabled="disabled"/> 
				<button @click="handlerDisabled">切换是否可以输入</button>
				`
				 
			});
			//vm 表示vue应用的根组价
			//vm.$data.message="hello vue3.0"
			const vm = app.mount("#root")
		</script>
	</body>
</html>

绑定的属性名称不确定的写法:—–动态属性

2.3.4 插值表达式使用JS表达式: {{Math.max(1,2)}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: "hello world vue"
				}
			},
			template: `<div>{{Math.max(12,33)}}</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.3.5 使用一次： v-once指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: "hello world vue"
				}
			},
			template: `<div v-once>{{msg}}</div>
			
			`
		});
		
		const vm = app.mount("#app")
		</script>
	</body>
</html>

在控制台中去改变msg的内容: vm.$data.msg="xxxx" ,页面还是展示的是hell world vue

2.3.6 vue的判断指令: v-if和点击事件v-on:click (或者简写@click)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: "hello world vue",
					show: true
				}
			},
			methods:{
				showOrNotShow(){
					this.show  = !this.show;
				}
			},
			template: `<div v-if="show" >{{msg}}</div>
			<button @click="showOrNotShow">显示/隐藏</button>
			`
		});
		
		const vm = app.mount("#app")
		</script>
	</body>
</html>

2.3.7 动态属性写法 @[event]="handlerMthods”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态属性的绑定的写法</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: "hello world vue",
					name: "title",
					event: "mouseenter"
				}
			},
			methods:{
				handlerMethods(){
					alert("动态属性绑定写法")
				}
			},
			template: `
				<input v-bind:title="hellworld"/>
				
				<input :[title]="hellworld" @[event]="handlerMethods"/>
			
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.3.8 事件修饰符 @click.prevent="handlerClick”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>

		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						content: "hello world vue"
					}
				},
				methods: {
					handlerMenthods() {
						alert("点击事件修饰符 @click.prevent 阻止表单提交")
					}
				},
				template: `
			<form action="http://www.baidu.com">
				<button type="submit">提交</button>
			</form>
			<hr color="red"/>
			<h1>阻止表单提交</h1>
			<form action="http://www.baidu.com" @click.prevent="handlerMenthods">
				<button type="submit">提交</button>
			</form>	 
				`
			});

			app.mount("#app")
		</script>
	</body>
</html>

2.4 数据、方法、计算属性和监听器

computed 计算属性;

watch 监听器

插值表达式中使用方法 {{formateString(str)}} methods中定义一个formateString方法,比如: formateString(str){return str.toUpperCase()}

计算属性:

{{parseInt(count,10)*parseInt(price,10)}}

计算属性语义化: computed:{total(){this.count* this.price}}

计算属性computed 页面数据发生改变，计算属性里面的依赖属性发生改变的时候，才会重新计算【内部带有缓存效果】

methods里面的方法只要页面重新渲染，才会重新计算

监听器: wahtch:{}

wathc:{

//price 发生改变，函数会执行计算属性底层都是使用监听器

price(current,prev){

//setTimeOut(()=>{console.log("price change)},3000)

this.nowToatal = this.current;

}

2.4.1 数据 data:{return {//….}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					content: "hello world vue"
				}
			},
			template: `<div>{{content}}</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.4.1 方法 methods:{customerMthods(){}}

无参方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>方法</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					content: "hello world vue"
				}
			},
			methods:{
				handlerClick(){
					alert("hello vue methos....")
				}
			},
			template: `<div @click="handlerClick">{{content}}</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

有参方法和插值表达式中使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>方法</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					content: "hello world vue"
				}
			},
			methods:{
				handlerClick(){
					alert("hello vue methos....");
				},
				formatStr(str){
					return str.toUpperCase();
				}
			},
			template: `
				<h1>无参方法</h1>
				<div @click="handlerClick">{{content}}</div>
				<hr color="red"/>
				<h1>有参方法</h1>
				{{formatStr(content)}}
			
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>
<!--插值表达式中写的方法需要加上大括号 -->

2.4.2 计算属性 computed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性computed</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						msg: "hello world vue",
						count: 12,
						price: 10
					}
				},
				computed: {
					total() {
						return this.count * this.price;
					}
				},
				methods: {
					getGlobNum() {
						return this.count * this.price;
					}
				},
				template: `<div>{{parseInt(count,10)*parseInt(price,10)}}</div>
				
				<div>methods方法里面有一个getGlob计算总价的方法得到的值:{{getGlobNum()}}</div>
				<div>
				计算属性得到的值:{{total}}</div>
			`
			});

			app.mount("#app")
		</script>
	</body>
</html>

2.4.3 监听器 watch

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					count: 3,
					price: 10,
					newTotal: 30
				}
			},
			watch:{
				//price 是定义在data的属性
				price(current,prev){
					this.newTotal = current * this.count;
				}
			},
			template: `<div>{{newTotal}}</div>`
		});
		
		const vm = app.mount("#app")
		</script>
	</body>
</html>

2.5 Vue样式绑定语法

2.5.1 基础原始样式绑定—使用class类样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue绑定样式</title>
		<style type="text/css">
			.red {
				color: red;
			}
			.green {
				color: green;
			}
		</style>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
		
			template: `<div class="red">hello world-one</div>
			          <div class="green">hello world-tow</div>			
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.5.2 vue绑定样式之：字符串形式+绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue绑定样式</title>
		<style type="text/css">
			.red {
				color: red;
			}
			.green {
				color: green;
			}
		</style>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					classStr: 'green'
				}
			},
		
			template: `<div :class="classStr">hello world-one</div>
			         
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.5.3 vue绑定样式之：对象形式+绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue绑定样式</title>
		<style type="text/css">
			.green {
				color: green;
			}

			.red {
				color: red;
			}
		</style>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						classStr: "green",
						classObject: {
                            //这里编写的顺序和定义的样式的顺序保持一直。那么red会覆盖green
							green: true,
							red: true
						}
					}
				},

				template: `<div :class="classStr">hello world-one</div>
							<div :class="classObject">hello world-tow</div>
			         
			`
			});

			app.mount("#app")
		</script>
	</body>
</html>

2.5.4 vue绑定样式之：数组形式+绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue绑定样式</title>
		<style type="text/css">
			.green {
				color: green;
			}

			.red {
				color: red;
			}
			
			.blue {
				color: blue
			}
			.brown {
				color: brown;
			}
		</style>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						classStr: "green",
						classObject: {
							green: true,
							red: true
						},
						//数组嵌套对象
						classArray: ['green','red','blue',{brown: true}]
					}
				},

				template: `<div :class="classStr">hello world-one</div>
							<div :class="classObject">hello world-tow</div>
							<div :class="classArray">hello world-tow</div>
			         
			`
			});

			app.mount("#app")
		</script>
	</body>
</html>

2.5.5 组件之间的样式传递 :class="$attrs.class”

子组件绑定父组件传递的值: $attrs.class

子组件模板中只有一层元素的时候，可以把样式直接绑定在父组件上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子组件如何绑定样式</title>
		<style type="text/css">
			.green {
				color: green;
			}

			.red {
				color: red;
			}
		</style>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						classStr: "green",
						classObject: {
							green: true,
							red: true
						},
						//数组嵌套对象
						classArray: ['green', 'red', 'blue', {
							brown: true
						}]
					}
				},

				template: ` 
							<div :class="classObject">
							hello world-tow
							<demo :class="classStr"/>
							</div>
							 
			         
			`
			});

			app.component("demo",{
				
				template: `<div>single</div>`
			})

			app.mount("#app")
		</script>
	</body>
</html>

如果子组件有多个相同层级的元素的时候需要使用 $attrs.class 表示使用父组件的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子组件如何绑定样式</title>
		<style type="text/css">
			.green {
				color: green;
			}

			.red {
				color: red;
			}
		</style>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						classStr: "green",
						classObject: {
							green: true,
							red: true
						},
						//数组嵌套对象
						classArray: ['green', 'red', 'blue', {
							brown: true
						}]
					}
				},

				template: ` 
							<div :class="classObject">
							hello world-tow
							<demo :class="classStr"/>
							</div>
							 
			         
			`
			});

			app.component("demo",{
				
				template: `
				//使用父组件样式即 <demo :class="classStr"/>
				<div :class="$attrs.class">one</div>
				//使用的是最外层 <div :class="classObject"></div>的样式
				<div>tow</div>
				
				`
			})

			app.mount("#app")
		</script>
	</body>
</html>

2.5.6 行内样式使用 style=“color:red;”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子组件如何绑定样式</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						styleStr: "color: green",
						styleObjec: {
							color: "yellow",
							background: "red"
						}
					}
				},

				template: ` 
							//html中行内样式的写法
							<div style="color: red;">hello world-tow</div>
							//行内样式字符串的写法
							<div :style="styleStr">hello world-tow</div>
							//行内样式对象的写法
							<div :style="styleObjec">hello world-tow</div>
							 
			         
			`
			});

		

			app.mount("#app")
		</script>
	</body>
</html>

2.6 条件渲染:v-if | v-else /v-show

v-if 控制dom节点是否存在

v-if /v-else 必须挨着一起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					show: false
				}
			},
			template: `<div v-if="show">hello world v-if</div>
						<div v-else>hello world v-else</div>
						`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

v-show 通过 style="display:none” 样式来控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串翻转</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					show: true
				}
			},
			template: `<div v-if="show">hello world v-if</div>
						<div v-else>hello world v-else</div>
						<hr color="red"/>
						//<div style="display: none;">hello world v-show</div>
						<div v-show="show">hello world v-show</div>
						`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.7 列表循环渲染：v-for

循环数组、对象；循环指定key提高vue效率, :key="index” ,这个key值是唯一

数组的变更函数：

push("h”)–从数组中添加 / pop()–从数组中减少一个(从尾开始减) shift()(从头开始减)

从头部添加 unshift("h”)

splice,sort,reverse()取反

直接替换一个数组 this.listArray = ['x’,’y’]

this.listArray = ['x’,’y’].concat('z’)

过滤： this.listArray=['x’,’y’].filter(item => item === 'x’)

直接更新数组的内容: this.listArray[1]='m’

循环对象:

直接添加对象的内容，也可以自动的展示出来。【vue新版才支持】

直接循环一个数字: <div v-for="item in 10”>{{item}}</div>

循环里面的逻辑判断

<template></template>

2.7.1 循环遍历数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if循环渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					listArray: ['x','y','z']
				}
			},
			template: `
			  <div v-for="item of listArray">{{item}}</div>
				
				<hr/>
				<div v-for="(item,index) in listArray">
				{{item}}---{{index}}
				</div>
			`
		});
		
		const vm = app.mount("#root");
		
		</script>
	</body>
</html>

2.7.2 往数组里面添加元素 push("X”) / unshift("Y“)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if循环渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					listArray: ['x','y','z']
				}
			},
			
			methods:{
				add(){
					//1.push方法 【把元素添加到尾部】
					//this.listArray.push("m");
					
					//2.直接替换
					//this.listArray = ['x','y','z','m','n']
					
					//3.unshift 把元素添加到头部
					//this.listArray.unshift("J");
					
					//4.concat 
					this.listArray =['B','A'].concat("C");
				}
			},
			template: `
			 
				<div v-for="(item,index) in listArray">
				{{item}}---{{index}}
				</div>
				<button @click="add">新增元素到数组中</button>
			`
		});
		
		const vm = app.mount("#root");
		
		</script>
	</body>
</html>

2.7.2 数组翻转 reverse/排序 sort / 分割split

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if循环渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					listArray: ['x','y','z']
				}
			},
			
			methods:{
				reverse(){
					 //把数组进行反转
                    //reverse/排序 sort / 分割split
					 this.listArray.reverse();
					 
				}
			},
			template: `
			 
				<div v-for="(item,index) in listArray">
				{{item}}---{{index}}
				</div>
				<button @click="reverse()">把数组元素进行反转</button>
			`
		});
		
		const vm = app.mount("#root");
		
		</script>
	</body>
</html>

2.7.3 数组过滤 filter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if循环渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					listArray: ['X','y','z','X']
				}
			},
			
			methods:{
				reverse(){
					 //把数组进行反转
					 //this.listArray.reverse();
					 
				},
				filterArray(){
					this.listArray = this.listArray.filter(item => item ==='X');
				}
			},
			template: `
				<!-- :key="index" 如果往数组中添加了元素，使用改key 之后
				告诉vue 不用渲染以前，把新增渲染出来都可以了 -->

				<div v-for="(item,index) in listArray" :key="index">
				{{item}}---{{index}}
				</div>
				<button @click="filterArray()">过滤出X的元素</button>
			`
		});
		
		const vm = app.mount("#root");
		
		</script>
	</body>
</html>

2.7.4 循环遍历对象：v-for = (value,key,index) of listObje

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if循环渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						listArray: ['X', 'y', 'z', 'X'],
						listObj: {
							name: "TOM",
							age: 34,
							sex: "男"
						}
					}
				},

				 
				template: `<div v-for="(value,key,index) of listObj" :key="index" >
					{{value}}---{{key}}---{{index}}
				</div>
				`
			});

			const vm = app.mount("#root");
		</script>
	</body>
</html>

2.7.5 循环遍历的条件判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if循环渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						listArray: ['X', 'y', 'z', 'X'],
						listObj: {
							name: "TOM",
							age: 34,
							sex: "男"
						}
					}
				},

				 
				template: `
				
				<div v-for="(value,key,index) of listObj" :key="index" >
					<div v-if="value !=34">
						{{value}}---{{key}}---{{index}}
					</div>
				</div>
				
				<hr/>
				<!--
				//template 表示占位符， 
				//查看dom 元素结构可以发现 比上面这种少了一层div
				-->
				<template 
					v-for="(value,key,index) of listObj" 
					:key="index"  >
					<div v-if="value !=34">
						{{value}}---{{key}}---{{index}}
					</div>
				</template>
				
				`
			});

			const vm = app.mount("#root");
		</script>
	</body>
</html>

2.8 事件绑定

在事件这里可以写简单的js表达式: <div @click="count +=1>点击新增</div>

<div @click="add(2,$event)">点击新增</div>

点击原生事件获取:add(num,event){}

触发多个方法 : <div @click="add(),add2()">点击新增</div>

事件修饰符:

防止事件冒泡 @click.stop="add()”

@click.self 点击自己dom元素触发的才触发

阻止默认行为: @click.prevent

@click.capture

事件执行一次: @click.once

2.8.1 绑定事件和传递event

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					count: 0
				}
			},
			methods:{
				add(num,event){
					console.log(event.target);
					this.count +=num;
				}
			},
			template: `<div>{{count}}
			
			<button @click="count+=2">添加1</button>
			<button @click="add(2,$event)">添加2</button>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.8.2 绑定事件调用多个方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					count: 0
				}
			},
			methods:{
				add(){
					alert("add ....")
				},
				add2(){
					alert("add2 ....")
				}
			},
			template: `<div>{{count}}
			
			 
			<button @click="add(),add2()">添加</button>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.8.3 事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					count: 0
				}
			},
			methods:{
				add(){
					this.count +=1;
				},
				addDiv(){
					alert("div add")
				}
				
			},
			template: `
			{{count}}
			<div @click="addDiv">
				//时间向外传播行为，  事件冒泡
				<button @click="add()">添加2</button>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.8.4 阻止事件冒泡修饰符 @click.stop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					count: 0
				}
			},
			methods:{
				add(){
					this.count +=1;
				},
				addDiv(){
					alert("div add")
				}
				
			},
			template: `
			{{count}}
			<div @click="addDiv">
				//@click.stop 停止事件向外冒泡
				<button @click.stop="add()">添加2</button>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.8.5 阻止事件冒泡 @click.self

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					count: 0
				}
			},
			methods:{
				add(){
					this.count +=1;
				},
				addDiv(){
					alert("div add")
				}
				
			},
			template: `
			//自己的标签dom才会触发   
			<div @click.self="addDiv">
				{{count}}
				<button @click="add()">添加2</button>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</bo

prevent 阻止默认行为 / capture 捕获 /once 事件绑定执行一次

2.8.6 按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
		 
			methods:{
				keydownHandler(){
					alert("x")
				} 
				
			},
			template: `
			
			 <div>
				<!-- 按键按下的时候触发keydownHandler方法 -->
				<input @keydown="keydownHandler"/>
			 </div>
			
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

修改成按下enter键才会触发keydownHandler方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
		 
			methods:{
				keydownHandler(){
					alert("x")
				} 
				
			},
			template: `
			
			 <div>
				<!-- 按键按下的时候触发keydownHandler方法
tab/delte/tab 
-->
				<input @keydown.enter="keydownHandler"/>
			 </div>
			
			`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.9 表单双向绑定指定

2.9.1 input 双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: "hello world vue"
				}
			},
			template: `<div>
			{{msg}}
			
				<input v-model="msg"/>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

input 双向绑定不用写value了。

2.9.2 textarea数据双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: "hello world vue"
				}
			},
			template: `<div>
			{{msg}}
			
				<textarea v-model="msg"/>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.9.3 checkbox 双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>checkbox数据双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
				msg: true
				}
			},
			template: `<div>
			{{msg}}
			
				  <input type="checkbox" v-model="msg" value="TOM"/>TOM
				  <div>
					选择的内容: {{msg}}
				  </div>
				 
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
				msg: []
				}
			},
			template: `<div>
			{{msg}}
				//使用数组来接收选择的值
				tom <input type="checkbox" v-model="msg" value="tom"/>
				kevin <input type="checkbox" v-model="msg" value="kevin"/>
				dd <input type="checkbox" v-model="msg" value="dd"/>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.9.4 radio 双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						msg: ''
					}
				},
				template: `<div>
			{{msg}}
				<!-- 使用字符串存储单选按钮选择的值 -->
				tom <input type="radio" v-model="msg" value="tom"/>
				kevin <input type="radio" v-model="msg" value="kevin"/>
				dd <input type="radio" v-model="msg" value="dd"/>
			</div>`
			});

			app.mount("#app")
		</script>
	</body>
</html>

2.9.5 select 双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: ''
				}
			},
			template: `<div>
					<select v-model="msg">
						<option disabled value="">----请选择----</option>
						<option value="A">A</option>
						<option value="B">B</option>
						<option value="C">C</option>
					</select>
			
				 选择的内容: {{msg}}
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.9.6 select 进行多选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: []
				}
			},
			template: `<div>
					<select v-model="msg" multiple>
						 
						<option value="A">A</option>
						<option value="B">B</option>
						<option value="C">C</option>
					</select>
			
				 选择的内容: {{msg}}
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.9.7 循环遍历option进行数据展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						options: [{
							{text: 'A',
								value: 'A'
							},
							{
								text: 'B',
								value: 'B'
							},
							{
								text: 'C',
								value: 'C'
							}

						],
						msg: []
					}
				},
				template: `<div>
					<select v-model="msg" multiple>
						 
						<option  v-for="item of options " :value="item.value">{{item.text}}</option>
						 
					</select>
			
				 选择的内容: {{msg}}
			</div>`
			});

			app.mount("#app")
		</script>
	</body>
</html>

选择的A，存放的是{value: A},可以定义数据格式为:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input框双向绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: '',
					options: [
						{text:'A',value:{value:'A'}}
						]
				}
			},
			template: `<div>
					<select v-model="msg">
						<option disabled value="">----请选择----</option>
						<option v-for="item of options" :value="item.value">{{item.text}}</option>
						 
					</select>
			
				 选择的内容: {{msg}}
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.9.8 v-model.lazy 修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model.lazy修饰符</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: ""
				}
			},
			template: `<div>
			{{msg}}
			
				<input v-model.lazy="msg"/>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

2.9.9 v-model.number 类型转换修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model.lazy修饰符</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: 123
				}
			},
			template: `<div>
			{{ typeof msg}}
			
				<input v-model.number="msg" type="number"/>
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

我测试了不用number修饰符，打印的类型也是number？？？？？

2.9.10 v-model.trim 去除前后空格修饰符

去除前后空格，如果字符串中间有空格是去除不了的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model.lazy修饰符</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
		const app = Vue.createApp({
			data() {
				return {
					msg: 123
				}
			},
			template: `<div>
			{{msg}}
			
				<input v-model.trim="msg" />
			</div>`
		});
		
		app.mount("#app")
		</script>
	</body>
</html>

三、探索组件的概念

Tom敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习VUE3.0第二天

VUE3.0学习笔记开始学习时间:2022-04-09引入VUE的CSDN<script src="https://unpkg.com/vue@next"></script>Vue官网:https://v3.cn.vuejs.org/一、VUE语法初探-开始学习时间:2022-04-091.1 单页面基本使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> &
复制链接

扫一扫