vue特点
- 组件化：用户界面分解为可重用的组件，这些组件可以使开发的页面更加模块化和可维护=
- 双向数据绑定：vue提供了一种轻松绑定数据和DOM元素之间的机制，意味着数据发送变化时，视图会自动更新，反之亦然
- 虚拟DOM：vue使用虚拟DOM来最小化实际DOM更新的次数，从而提高性能
认知
在前端开发中，如果你要使用Vue框架你也需要进行框架的引入相关Vue依赖，在前端用于管理依赖的工具并没有像后端一样采用Maven来进行管理，而是引入了一个新的工具 --- 脚手架（也可以将脚手架直观地理解为maven）
因此，为了快速构建Vue项目，我们可以选择脚手架工具Vue CLI来创建vue项目。如果不想这么麻烦，还可以采用如下的方式来快速使用Vue：
使用CDN引入 在HTML文件中添加以下配置
//使用CDN引入 在HTML文件中添加以下配置
<!-- 开发版本，包含带有警告的调试模式 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>本地加载引入
//本地加载引入
将vue.js下载到本地，然后通过<script>引入vue的基础使用
如下代码展示了开发者该如何快速构建一个vue项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<div id="app">
<!-- 表达式 -->
<h1>{{message}}</h1>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 创建Vue的实例
new Vue({
// 绑定id为app的元素
el: "#app",
// 数据
data: {
message: "hello Vue!"
}
})
</script>
</body>
</html>
//运行上述代码，就能在页面上打印出Hello Vue
//上述代码做的工作
1.通过new关键字构建一个vue实例对象。这点就像Java中new构建一个实例没太大区别。
2.在构建vue实例对象时，可以传入一个对象信息。具体来看，其为el字段指定一个名为#app的属性。同时为data字段又配置的了一个对象信息。
事实上，在Vue中el和data是两个重要的选项，其主要用于定义Vue实例的根元素和数据。其中，
1.el选项：用于指定Vue实例关联的DOM元素。它定义了Vue实例在哪个DOM元素上渲染和控制。值通常为一个CSS选择器
2.data选项：主要用于定义Vue实例的数据。而数据属性可以是任何JavaScript数据类型，例如字符串、数字、对象、数组等。
不难发现，通过构建一个vue实例对象，然后对该实例配置el,data两个字段指定vue实例作用对象，以及存储的数据信息，然后再页面中使用{{}}语法即可获取到data字段中配置的内容。数据操作
在vue中与数据操作的操作息息相关的大致有计算属性、侦听器、方法三种常见手段
计算属性
Vue允许开发者定义计算属性，这些属性根据其他数据属性的值进行计算。而计算属性会缓存计算结果，只有在依赖的数据属性发生变化时才会重新计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<div id="app">
<input type="text" v-model="radius">
<p>圆的面积：{{ circleArea }}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
radius: 5
},
computed: {
circleArea: function() {
return Math.PI * Math.pow(this.radius, 2);
}
}
});
</script>
</body>
</html>监听属性（watch）
除了计算属性外，也可以使用 watch 选项来监听数据属性的变化，然后执行自定义的操作。上述逻辑改为侦听器则逻辑如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<div id="app">
<input type="text" v-model="radius">
<p>圆的面积：{{ circleArea }}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
radius: 0,
circleArea:0
},
watch: {
radius:function(newValue,oldVule){
console.log(newValue)
this.circleArea = Math.PI * Math.pow(newValue, 2);
}
}
});
</script>
</body>
</html>
指定操作
v-model
用于实现双向数据绑定，通常用于表单元素，使输入框的值与数据属性保持同步
<input v-model="message">v-for
用于循环渲染列表中的元素，通常与v-bind:key一起使用
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>v-if、v-else、v-else-if
用于条件渲染，根据条件决定是否渲染或显示DOM元素
<p v-if="isTrue">This is true</p>
<p v-else>This is false</p>v-show
用于根据条件切换元素的可见性，与v-if不同，仅使用CSS样式控制显示/隐藏，不会添加/删除元素
<p v-show="isVisible">This may be hidden</p>v-bind（缩写为:）
用于绑定HTML属性的值到Vue实例的数据属性，以实现动态属性绑定
<a :href="url">Visit Vue.js</a>v-on（缩写为@）
用于监听DOM事件，当事件触发时执行Vue实例的方法文章来源：https://www.toymoban.com/news/detail-825751.html
<button @click="doSomething">Click me</button>v-once
用于标记元素和其子元素只渲染一次，后续的数据变化不会影响它们文章来源地址https://www.toymoban.com/news/detail-825751.html
<p v-once>{{ message }}</p>到了这里，关于后端扫盲系列 - vue入门指南的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
