Vue-前端开发
目录
Vue 前端开发
Vue介绍
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
官网：
Vue 优点
响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作
可组合的视图组件：把视图按照功能切分成若干基本单元，可维护、可重用、可测试等
使用Vue的四种方式：
- 在HTML中以CDN包形式导入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>2 下载js文件保存至本地再导入
<script src="/存储路径/vue.global.js"></script>3使用npm安装 4使用官方VueCli脚手架构建项目（不建议新手直接用）
使用参考文档
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
</head>
<body>
<div id="hello-vue">
{{ message }} <!--引用变量-->
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
message: "hello Vue" //变量名和对应值
}
}
}
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
</head>
<body>
<div id="hello-vue">
{{ counter }} <!--引用变量-->
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
counter: 0 //变量名和对应值
}
},
// 打开页面执行的函数
mounted() {
setInterval(()=> { //周期性执行递加
this.counter++
},1000)
}
};
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式的将 DOM 绑定至底层组件实例的数据。所有 VUE,js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
数据绑定的常见形式就是使用"双大括号"语法在 HTML 中插入文本：
Message:{ {msg}}
{ {msg}}将被替代对应组件实例中 msg 属性的值。无论何时，绑定的组件实例上 msg 属性发生改变，插值处内容都会更新
常用指令
指令是指 V-前缀的特殊属性，它的作用是当表达式的值改变时，将其产生的连带影响，响应式的作用于 DOM
v-text
v-text 的效果与{ {}}的效果一样，将数据填充到标签中，但是没有闪烁问题！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
</head>
<body>
<div id="hello-vue">
<p v-text="msg"></p>
<p>{{ msg }}</p>
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
msg: "Hello Vue" //变量名和对应值
}
}
}
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>v-html
在某些情况下，从服务端请求的数据本身就是一个 HTML 代码，如果使用{ {}}会将将数据解析为普通文本而非 HTML 代码，为输出真正的 HTML，就需要使用 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
</head>
<body>
<div id="hello-vue">
{{ msg }}<br>
<span v-html="msg"></span>
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
msg: "<span style='color: red'>Hello Vue!</span>" //变量名和对应值
}
}
}
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>v-bind
用于动态绑定一个或者多个属性值，或者向另一个组件传递 props 值
应用场景：图片地址 src、超链接 herf、动态绑定一些类、样式等
v-bind 指令接受一个参数，以冒号分隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
</head>
<body>
<div id="hello-vue">
<a v-bind:href="url">百度</a>
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
url: "https://www.baidu.com" //变量名和对应值
}
}
}
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>v-bind: 绑定 Class
操作元素标签的 class 和 style 属性是数据绑定的一个常见需求
例如希望动态切换 class，为 div 显示不同背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
<style>
.test {
width: 200px;
height: 200px;
background: grey;
}
.active {
background: orange;
}
</style>
</head>
<body>
<div id="hello-vue">
<div v-bind:class="{active: isActive}" class="test"> <!--active 这个 class 存在与否取决于数据属性 isActive-->
</div>
<button type="button" @click="btn">增加样式</button>
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
isActive: false //变量名和对应值
}
},
methods: {
btn() {
// this.isActive = True;
// 实现动态切换
if (this.isActive) {
this.isActive = false
} else {
this.isActive = true
}
}
}
}
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>v-bind 绑定 style
v-bind:style 语法非常像 css,但其实是一个 JavaScript 对象。css 属性名可以用驼峰式或短横线分隔（kebab-case,记得用引号括起来）命名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
<style>
.test {
width: 200px;
height: 200px;
background: grey;
}
</style>
</head>
<body>
<div id="hello-vue">
<div v-bind:style="styleObject" class="test">
Hello Vue!
</div>
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
styleObject: {
background: 'orange', //变量名和对应值
fontSize: '24'
}
}
}
}
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>v-on
在前端开发中，经常监听用户发生的事件，例如点击、拖拽、键盘事件等，这个时候就需要使用 v-on
v-on: 冒号后面是 even 参数，例如 click、change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<script src="./vue.global.js"></script>
</head>
<body>
<div id="hello-vue">
<p>点击次数: {{ counter }}</p>
<button type="button" v-on:click="counter++">按钮</button>
</div>
<script type="text/javascript">
const HelloVue = {
data() {
return {
counter: 0 //变量名和对应值
}
}
}
Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
</script>
</body>
</html>指令缩写
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>常用指令之流程控制
v-if
判断一个元素是否显示
通过 seen 值的真假来插入/移除元素。
<div id="hello-vue">
<p v-if="seen">现在你能看到我</p>
<p v-else>看不到</p>
</div>
<script>
const HelloVue = {
// 定义数据区域
data() {
return {
seen: true
}
},
};
vm = Vue.createApp(HelloVue).mount('#hello-vue');多分支
<div id="hello-vue">
<div v-if="type === 1">
方式1
</div>
<div v-if="type === 2">
方式2
</div>
<div v-else="type === 3">
方式3
</div>
</div>
<script>
const HelloVue = {
// 定义数据区域
data() {
return {
type: 2
}
},
};
vm = Vue.createApp(HelloVue).mount('#hello-vue');
</script>v-show
与 v-if 不同的式，v-show 的元素始终会被渲染并保留在 DOM 中，所以 v-show 只是简单的切换元素 display CSS 属性
<div id="hello-vue">
<p v-if="seen">现在你能看到我</p>
<p v-else>看不到</p>
<p v-show="seen">看不到了</p>
</div>
<script>
const HelloVue = {
// 定义数据区域
data() {
return {
seen: false,
}
},
};
vm = Vue.createApp(HelloVue).mount('#hello-vue');
</script>
v-for
基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，
其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
// 循环数组
<div id="hello-vue">
<ul>
<li v-for="(c,j) in myArray">
{{ i }}-{{ c }}
</li>
</ul>
</div>
<script>
const HelloVue = {
// 定义数据区域
data() {
return {
myArray: [
'主机',
'键盘',
'鼠标'
]
}
},
};
vm = Vue.createApp(HelloVue).mount('#hello-vue');v-for维护状态：
当Vue正在更新使用v-for渲染的元素列表时，它默认使用"就地更新"的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并确保他们只在每个索引正确渲染。
为了给Vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有的元素，你需要为每项提供一个唯一的key属性
<div id="hello-vue">
<ul>
<li v-for="(v,k) in myArray" :key="k">
{{ k }}-{{ v }}
</li>
</ul>
</div>
<script>
const HelloVue = {
// 定义数据区域
data() {
return {
myArray: {
host: '主机',
displayer: '键盘',
keyboard: '鼠标'
}
}
},
};
vm = Vue.createApp(HelloVue).mount('#hello-vue');
</script>v-for 选择列表
获取用户选择并赋值另一个变量再实时展示：
<div id="hello-vue">
<select @change="selectComputer($event)">
<option value="None">未选择</option>
<option v-for="row in computer" :key="row.id" :value="row.id">
{{ row.name }}
</option>
</select>
<p>当前选择主机ID: {{ selectComputerId }}</p>
</div>
<script>
const HelloVue = {
// 定义数据区域
data() {
return {
computer: [
{id:1 , name: '联想'},
{id:2 , name: '惠普'},
{id:3 , name: '华为'}
],
selectComputerId: ""
}
},
methods: {
selectComputer(event){
console.log(event) //获取该事件的事件对象
this.selectComputerId = event.target.value; //获取事件的值
if (this.selectComputerId == "None") {
this.selectComputerId = "未选择！"
}
}
}
};
vm = Vue.createApp(HelloVue).mount('#hello-vue');
</script>v-model
双向数据绑定：当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会同步变化
v-model提供表单输入绑定，可以在、