vue3学习与实践

vue学习

vue特点

• 无需构建步骤，渐进增强html
• 任何页面都可嵌入web
• 单页应用
• 全栈服务渲染
• 开发桌面端，移动端

vue版本

主要vue2与vue3

vue的组件包括两种：

选项式API（vue 2）

组合式API（vue 3）

.vscode ---VSCode工具的配置文件
node_moduless  ---vue项目的运行依赖文件夹
public ---资源文件夹
src 源码文件夹
.gitignore ---git忽略文件（协同办公）
index.html ---html文件：入口
package.json ---信息描述文件
README.MD ---注释文件
vite.congif.js ---vue配置文件

模板语法

文字插值

最基础的数据绑定模式，使用的是"Mustache"语法（双花括号语法）

<script >
	export default{
		data(){
			return{
				msg:"神奇语法"
			}
		}
	}

</script>

<template>
	<h3>模板语法</h3>
	<p>{{ msg }}</p>
	

</template>

使用js表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的js代码，一个简单的判断方法可以卸载return后面

<script >
	export default{
		data(){
			return{
				msg:"神奇语法",
				number:10,
				ok:true,
				message1:"大家好 "
			}
		}
	}

</script>

<template>
	<h3>模板语法</h3>
	<p>{{ msg }}</p>
	<p>{{ number + 1 }}</p>
	<p>{{ ok?"yes":"no" }}</p>
	<p>{{ message1.split("").reverse("").join("")}}</p>
<!-- 	日后可以动态显示 -->
	

</template>

运行结果

模板语法
神奇语法

11

yes

好家大

注释：

仅支持单行代码 ，例如if else无效

原始HTML文件

若文件中设置头文件为rawhtml文件后，双花括号直接输出原内容

<script >
	export default{
		data(){
			return{
				msg:"神奇语法",
				number:10,
				ok:true,
				message1:"大家好 ",
				rawhtml:"<a herf='http://itbanzhan.com'>百战程序员</a>"
			}
		}
	}

</script>

<template>
	<h3>模板语法</h3>
	<p>{{ msg }}</p>
	<p>{{ number + 1 }}</p>
	<p>{{ ok?"yes":"no" }}</p>
	<p>{{ message1.split("").reverse("").join("")}}</p>
	<p>{{rawhtml}}</p>
<!-- 	日后可以动态显示 -->
	

</template>

输出内容为：

[外链图片转存中…(img-vBO0xchS-1723712306362)]

可见输出的为raw的源文本，但这种并非我们想要的

我们想要的是带有超链接的百战程序员文字

因此若事原始html文件则加入

<p v-html="rawhtml"></p>

这才是引用html的正确方式

效果图为

[外链图片转存中…(img-AeZYFQBX-1723712306363)]

属性绑定

动态绑定属性

若进行直接绑定，则不会生成想要的结果，例如给某个标签附带id或者class

<template>
<p class="msg">测试</p>

</template>
<script >
export default{
	data() { 
		return{
			msg:"active",
			msgid:"testid"
		}
	}
}

</script>

由此可见，若打开源代码则应该p标签应该class为active，但实际效果为

[外链图片转存中…(img-WWnjYdeh-1723712306364)]

又开发者工具看出可见仍然为msg，则说明属性绑定失败，但使用v-bind则可以实现这种功能

<template>
<p v-bind:id="msg" v-bind:class="msgid">测试</p>

</template>
<script >
export default{
	data() { 
		return{
			msg:"active",
			msgid:"testid"
		}
	}
}

</script>

该项目实现的内容为：

[外链图片转存中…(img-q0qPCXz1-1723712306364)]

通过图片可以看出，该标签的属性id成功修改为active，class为 testid 成功将vue属性绑定

vue中可以进行简写 v-bind：直接简写成为：

属性可绑定为布尔值

<template>
<p v-bind:id="msg" v-bind:class="msgid" v-bind:title="msgmull" >测试</p>
<div><button :disabled="isButtonDisabled">button</button></div>

</template>
<script >
export default{
	data() { 
		return{
			msg:"active",
			msgid:"testid",
			msgmull:null,
			isButtonDisabled:true
		}
	}
}

</script>

条件渲染

多个条件使用方法与应用场景

• v-if="***"

  判断是否为true或者false，进行检验

  <template>
  	<h1>条件渲染</h1>
  	<div v-if="flag">Can u see me </div>
  	
  </template>
  
  <script>
  	export default {
  		data(){
  			return{
  			flag:false
  		}
  		}
  	}
  </script>
  
  

输出结果则不带有div元素

• v-else=“***”

  <template>
  	<h1>条件渲染</h1>
  	<div v-if="flag">Can u see me </div>
  	<div v-else="flag"> u see me </div>
  	
  </template>
  
  <script>
  	export default {
  		data(){
  			return{
  			flag:false
  		}
  		}
  	}
  </script>
  
  

该模块与v-if的作用相反，若是false则可以输出

• v-if-else的使用方法不同，该用法对一个多个模块进行使用

  <template>
  	<h1>条件渲染</h1>
  	<div v-if="flag">Can u see me </div>
  	<div v-else="flag"> u see me </div>
  	<div v-if="F">A</div>
  	<div v-else-if="F">B</div>
  	<div v-else-if="F">C</div>
  	<div v-else="F">NOA/B/C</div>
  	
  </template>
  
  <script>
  	export default {
  		data(){
  			return{
  			flag:false
  		}
  		}
  	}
  </script>
  
  

  输出结果则

  条件渲染
  u see me
  NOA/B/C
  

• v-show

该用法与v-if的使用方法相同，但两者存在区别

v-if：是按照真实条件进行渲染，确保切换时，条件区块的事件监听器与子组件都会被销毁与重建，因此该语法也是有惰性的，如果再false的条件下则不会做任何事情，只有条件变为true时则会被重新渲染

v-show：无论条件如何，该语法无论如何都会预渲染

相比之下，v-if又更高的切换开销，而v-show则有更大的渲染开销，因此，如需要更频繁的切换则使用v-show，若绑定的条件很少改变则使用v-if

列表渲染

简答数据

我们通常通过v-for指令对一个数组进行列表渲染，v-for需要item in items的形式的特殊语法，其中items为元数据的数组，而item为迭代想的别名

<template>
	<h3>列表渲染</h3>
	<p v-for="items in names">{{items}}</p>
</template>

<script>
	export default{
		data() {
			return{
				names:["百战程序员","尚学堂","it"]
			}
		}
	}
</script>

复杂数据

大部分情况下，我们的数据来源都是来自数据请求，也是就JSON格式

<template>
	<h3>列表渲染</h3>
	<p v-for="items in names">{{items}}</p>
	<div v-for="item in result">
		<p>{{item.title}}</p>
	</div>

</template>

<script>
	export default{
		data() {
			return{
				names:["百战程序员","尚学堂","it"],
				result:[{
					"id":2261677,
					"title":"测试一下"
				},
				{
					"id":2261566,
					"title":"测试两下",
				
					
				},
				{
					"id":2261662,
					"title":"测试三下",
				
					
				}
				]
			}
		}
	}
</script>

改代码result文件是自己敲得，通过id或者title都可对其进行列表显示

事件传参

时间参数可以通过event对象和通过事件传递数据

获取event对象

<template>
	<button @click="addcount">ADD </button>
	<p >{{ count }}</p>
</template>

<script>
	export default{
		data() {
			return{
				count:0
			}
		},
		methods:{
			addcount(e){
				console.log(e)
				e.target.innerHTML="ADD"+this.count
				//vue中的event对象就是原生JS的EVENT对象
				this.count++
			}
		}
	}
</script>

传递参数

• 传递event对象
• 传递数据

<template>
	<h3>事件传参</h3>
	<p  @click="getNameHandler(item)" v-for="(item,index) of names" key="index">{{item}}</p>
</template>

<script>
	export default{
		data() {
			return{
				names:["iwen","ime","frank"]
			}
			
			
		},
		methods:{
			getNameHandler(name){
				console.log(name);
				console.log(e);
				
			}
			
		}
	}
</script>

时间修饰符

在处理事件时调用evnet.preventDefault或者event.stopPropagation是很常见的。尽管我们可以直接在方法内调用，但如果方法更专注于数据逻辑而不用梳理Dom事件的细节回更好

为解决这个问题，Vue为v-on提供了事件修饰符，常用的为一下这几个：

• .stop 单击事件将停止传递
• .prevent 提交事件将不再重新加载页面
• .once 时间只会被触发一次
• .enter 回车摁键触发

阻止默认事件

<template>
	<h3>时间修饰符</h3>
	<a  @click.prevent="clickHandle"  href="http://baidu.com">有事找度娘</a>
</template>

<script>
	export default{
		data() {
			return{
				
			}
			
		},
		methods:{
			// clickHandle(e){
			// 	//阻止默认事件发生
			// 	e.preventDefault(e);
			// 	console.log(e);
				
			// }
				
			}
			
		}
	
</script>

事件冒泡

触发子元素的同时，父元素的事件也同时触发

<template>
	<h3>时间修饰符</h3>
	<a  @click.prevent="clickHandle"  href="http://baidu.com">有事找度娘</a>
	<div @click="clickDiv">
		<p @click.stop="clickP">测试冒泡</p>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				
			}
			
		},
		methods:{
			clickHandle(e){
				//阻止默认事件发生
				e.preventDefault(e);
				console.log(e);
				
			}
			clickDiv(e){
				// e.stopPrapagation();
				console.log("div");
			},
			clickP(){
				
				console.log("P");
			}
				
			}
			
		}
	
</script>

两种方法都能处理

• 在p标签中建立关于其对象，再对象中设置其属性
• 在在其标签中中直接设置其属性