vue3学习与实践

最新推荐文章于 2024-08-12 23:09:11 发布

javaairman

最新推荐文章于 2024-08-12 23:09:11 发布

阅读量1k

点赞数 16

文章标签：学习 vue.js 前端

本文链接：https://blog.csdn.net/javaairman/article/details/141031594

版权

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>

输出内容为：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

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

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

这才是引用html的正确方式

效果图为

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

属性绑定

动态绑定属性

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

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

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

</script>

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

又开发者工具看出可见仍然为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>

该项目实现的内容为：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

通过图片可以看出，该标签的属性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都可对其进行列表显示