Vue概述
1.什么是Vue
官方网站：https://cn.vuejs.org
框架作者：尤雨溪
技术文档：https://cn.vuejs.org/v2/guide/
Vue(读音/vjuː/，类似于 view) 是一套 用于构建用户界面 的渐进式框架。与其它大型框架不同的是，Vue被设计为可以 自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
什么是Vue
Vue是一套用于快捷开发前端应用的框架技术！
2、Vue第一个应用
访问Vue官方网站，下载vue.js文件
<!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>Document</title> </head> <body> <div id="app"> <h1> {{ name }} </h1> </div> <script src="./vue.js"></script> <script> // 创建Vue实例，绑定页面中的一个标签 const vm = new Vue({ el: "#app", // 将实例绑定到一个标签上 data: { // 实例中的数据 name: '作者：尤雨溪' } }) </script> </body> </html>
代码总结：
传统的js数据渲染到页面中，需要通过dom操作(innerText/innerHTML)实现 vue应用中，可以直接通过Vue实例，使用固定语法( {{变量名称}} )将数据直接渲染到页面中，优化了DOM操作
3.Vue基础语法
（1） 插值表达式
插值表达式：是Vue中一种固定的语法：{{ 变量 }}，用于渲染输出变量的数据
-
插值表达式功能比较强大，实际使用时较为常用的，就是渲染输出变量数据
<body> <div id="app"> <p> {{ info }}</p> <p> {{ "插值表达式输出数据：" + info }}</p> <p> {{ info.toUpperCase() }}</p> <p> {{ reverse(info) }} </p> <p> {{ isLogin ? '尊敬的用户，欢迎您' : 'xxxx'}}</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> </html>
（2） 指令：v-text/v-html
什么是指令？
指令
(Directive)：Vue中的一个功能组件，用来封装简单的DOM操作的！实现了一些DOM操作功能！
Vue中指令的特点：都是v-字符开头的！
| 指令 | 描述 |
|---|---|
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>Hello Word</h2>"
}
})
</script>
</body>
</html>
（3） v-once
| 指令 | 描述 |
|---|---|
v-once | 一般和插值表达式或者数据渲染指令结合使用，用于一次性渲染数据 如果页面中有一些数据加载渲染后不再发生变化，可以结合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>
</html>
（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>
</html>
总结：关于v-show和v-if
v-show和v-if在页面上都能达到相同的效果，可以通过条件变量判断是否显示某些内容
v-show：通过display样式控制显示/隐藏
v-if：通过DOM操作加载/不加载控制显示/隐藏
（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>
</html>
（6） v-on
| 指令 | 描述 |
|---|---|
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>
</html>
（7）v-for
| 指令 | 描述 |
|---|---|
v-for | 列表渲染指令，循环遍历集合数据，如数组中的多项数据 |
注意：循环遍历的数据，每一条数据可能发生新增/修改/删除的操作，为了保持数据的状态需要添加一个key属性绑定数据状态
<!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>Document</title>
</head>
<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>
</html>
案例操作：关于状态保持，添加工作案例
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="jobname">
<button @click="addJob">添加工作</button>
<ul>
<li v-for="(job, index) in jobs" :key="job.id">
<input type="checkbox" name="" id="">
{{job.id}} - {{ job.name }}
<button @click="delJob(index)">删除</button>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
jobname: '',
jobs: [
{id: 1, name: "前端工程师"},
{id: 2, name: "UI工程师"},
{id: 3, name: "后端工程师"}
]
},
methods: {
addJob() {
// 数组的开头添加一个数据
this.jobs.unshift(this.jobname)
this.jobname = ''
},
delJob(index){
this.jobs.splice(index, 1)
}
}
})
</script>
</body>
</html>
思考：上述案例中
:key="index"为什么不能友好的支持数据选择状态的保持？
（8）v-model
| 指令 | 描述 |
|---|---|
v-model | 主要用于表单元素，用于数据双向绑定 |
关于数据双向绑定：
MVVM数据处理模式
4、样式处理
标签的样式处理，一般包含行内样式(属性style)、和外联样式(属性class)完成样式修饰，在Vue中如何进行动态的控制？
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用
v-bind处理它们：只需要通过表达式计算出字符串结果即可。（可参考技术文档https://cn.vuejs.org/v2/guide/）
（1） class样式处理(掌握)
样式的处理有两种操作方式
-
对象格式：通过变量控制某个样式是否生效【一定掌握】
-
数组格式：通过定义多个变量和样式名称映射的形式，使用数组表达式设置多个样式【使用较少】
（2） style样式处理(了解)
样式的处理有两种操作方式：行内样式的处理上，了解它的基本语法即可，一般项目处理中很少使用
-
对象格式
-
数组格式
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
