本文作为Vue快速入门指南，介绍了Vue的特点、与其他框架的区别，以及如何创建第一个应用和数据处理应用。详细讲解了Vue的基础语法，包括插值表达式、指令、数据绑定和样式处理等关键概念，为初学者提供了全面的学习路径。
Vue快速入门
1、Vue概述
(1) 什么是Vue
vue是一套用于快捷开发前端应用的框架技术。它的特点用于构建用户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手。
（2）Vue和其他框架
使用vue可以实现视图页面上的组件重复使用，提高了开发和维护的效率！同时优化了页面的加载和 渲染的效率，提高了用户体验。
--React：
- 重量级框架，一般中大型项目、大厂会直接使用React技术开发项目
- 封装较为彻底，定制化功能较差，需要有一定的技术门槛
- 运行时性能得到了优化
2、Vue第一个应用
vue应用中，可以直接通过vue实例，使用固定语法{{变量名称}}将数据直接渲染到页面中，优化了DOM操作
<body>
<div id="app">
<h1> {{ name }}</h1>
</div>
<script src="../vue.js"></script>
<script>
//创建vue实例化，绑定页面中一个标签呢
const app = new Vue({
el:"#app",
data:{
name: '作者：慕心瑶'
}
})
</script>
</body>
3、Vue第一个数据处理应用
开发一个简易的密码提取器，完成用户输入数据的同步。
<body>
<div id="app">
输入密码：<input type="text" v-model="password"><br />
<p>密码提取：{{ password }} </p>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app", //绑定到指定的标签上
data:{
password: "待输入密码"
})
</script>
</body>
4、Vue实例选项
vue项目中，vue实例是项目的核心对象。
//创建实例
const vm = new Vue({选项})
实例选项：
- el：element缩写，表示实例绑定那个标签，该标签内部数据由vue实例管理
- data：数据的意思，用来声明当前vue实例管理的所有数据
- methods：函数‘方法的意思，用来声明当前实例管理的所有函数
- filters：过滤器的意思，用来声明按照条件进行数据处理的函数
- created()/mounted()/updated()...生命周期选项
- components：组件的意思，用来声明子组件
5、Vue基础语法
（1） 插值表达式
是vue中一种固定的语法:{{变量}},用于渲染输出变量的数据
插值表达式功能比较强大，实际使用时较为常见的，就是渲染输出变量数据
<body>
<div id="app">
<p> {{ info }}</p>
<p> {{ "插值表达式输出数据：" + info }}</p>
<p> {{ info.toUpperCase() }}</p>
<p> {{ reverse(info) }} </p>
<p> {{ isLogin ? '尊敬的用户，冬奥会欢迎您' : '先做核酸'}}</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
info: "hello vue 2.x!",
isLogin: false
},
methods: {
reverse(str) {
return str.split('').reverse().join('');
}
}
})
</script>
</body>
（2） 指令：v-text/v-html
v-text：将数据渲染到指定的标签中进行文本展示，不识别标签v-html：将数据渲染到指定的标签中进行解释展示，识别标签-
<body> <div id="app"> <p> {{ info }} </p> <p v-text="info"></p> <p v-html="info"></p> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { info: "<h2>谷爱凌</h2>" } }) </script> </body>
（3） v-once
一般和差值表达式或者数据渲染指令结合使用，用于一次性渲染数据
<body>
<div id="app>
<p> {{ name }} </p>
<p v-text="name"></p>
<p v-html="name"></p>
<hr>
<p v-once> {{ name }} </p>
<p v-text="name" v-once></p>
<p v-html="name" v-once></p>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "齐广璞"
}
})
</script>
</body>
（4） v-show、v-if
v-show:根据判断条件是否为true，设置包含内容的 显示/隐藏v-if：根据判断条件是否为true，设置包含内容的加载渲染/不加载渲染<body> <div id="app"> <h2 v-if="isLogin">尊敬的管理员，欢迎访问本系统</h2> <h2 v-show="isLogin">XX会员您好，欢迎访问本系统</h2> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { isLogin: false } }) </script> </body>
（5） v-bind
v-bind：动态操作标签属性的指令，让标签属性可以接受变量数据
为了简化属性操作语法，可以简化v-bind：attr="value"为 :attr="value"<body> <div id="app"> <!-- v-bind:title="..." 表示属性值是一个变量或者表达式 --> <div v-bind:title="info">苏翊鸣</div> <div :title="info">苏翊鸣</div> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { info: "单板滑雪 男子大跳台 金牌得主" } }) </script> </body>
（6） v-on
v-on:用于给标签添加时间处理的指令
语法上优化v-on:click="fn"为@click="fn"<body> <div id="app"> <button v-on:click="mySay">点击我试试</button> <button @click="mySay">点击我试试</button> <input type="text" v-on:keyup="record"> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: "#app", data: {}, methods: { mySay() { alert("用户点击了按钮") }, record(e) { console.log("用户输入了数据", e.target.value) } } }) </script> </body>
（7）v-for
v-for:列表渲染指令，遍历循环集合数据，如数组中的多项数据
- 循环遍历的数据，每一条数据可能发生新增/修改/删除的操作，为了保持数据的状态需要添加一个
key属性绑定数据状态<body> <div id="app"> <ul> <li v-for="(job, index) in jobs" :key="index"> <input type="checkbox" name="" id=""> {{index+1}} - {{ job }} </li> </ul> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { jobs: [ "前端工程师", "UI工程师", "后端工程师", "运维工程师", "测试工程师" ] } }) </script> </body>
（8）v-model
v-model:主要用于表单元素，用于数据双向绑定
9、样式处理
（1） class样式处理(掌握)
-
对象格式：通过变量控制某个样式是否生效【一定掌握】
-
数组格式：通过定义多个变量和样式名称映射的形式，使用数组表达式设置多个样式【使用较少】
<html lang="en"> <head> <style> #title{ width: 200px; height: 50px; line-height: 50px; text-align: center; background: #ccc; color: black; } #title.active{ background: orangered; color: white; } .dbg{background: #069;} .dfont{color: white;} .dfontsize{font-size: 22px;} </style> </head> <body> //对象格式 <div id="app"> <div id="title" :class="{active:isActive}" @click="isActive=true"> 选项卡标题 </div> //数组格式 <div :class="[dbg, dfont, dfontsize]"> 2022 中国冬奥运会 </div> </div> <script src="../vue.min.js"></script> <script> const vm = new Vue({ el: "#app", data: { isActive: false, dbg: "dbg", dfont: "dfont", dfontsize: "dfontsize" } }) </script> </body> </html>
（2） style样式处理(了解)
行内样式的处理上，了解它的基本语法即可，一般项目处理中很少使用
<body>
<div id="app">
<div style="background-color: orangered;color: white;">7枚金牌 4枚银牌 2枚铜牌.. 持续增长中</div>
<div :style="{backgroundColor:sbackground, color: scolor, fontSize:ssize}">7枚金牌 4枚银牌 2枚铜牌.. 持续增长中</div>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
sbackground: "orangered",
scolor: "white",
ssize: "22px"
}
})
</script>
</body>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
