概述
Vue目前是国内市场上最流行的前端应用开发框架之一。目前主流的是Vue2.x,现在Vue3.x也开始有很多公司使用。
Vue2.x官方文档:https://v2.cn.vuejs.org | https://v2.cn.vuejs.org/v2/guide/
Vue3.x官方文档:https://cn.vuejs.org | https://cn.vuejs.org/guide/introduction.html
第一章 认识Vue
1.什么是Vue?
官方描述:Vue (读音 /vjuː/ ，类似于 view ) 是一套用于构建用户界面的渐进式
框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整
合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完
全能够为复杂的单页应用提供驱动。
结论：Vue (读音 /vjuː/ ，类似于 view )，是一个用于快捷、高效开发前端应
用的渐进式框架！
2.引入Vue支持
（1）下载Vue框架
https://v2.cn.vuejs.org/v2/guide/installation.html
（2）项目中引入
<!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>
<!-- 引入开发版本的vue框架 -->
<script src="./vue.js"></script>
</body>
</html>
第二章 Vue基础语法
1.基础语法
<!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>第一个Vue应用</title>
</head>
<body>
<div id="app">
<!-- 4.id="app"的div中，可以直接使用Vue实力的数据 -->
<h2>msg1: {{ message }}</h2>
</div>
<script src="./vue.js"></script>
<script>
// 1.创建一个Vue实例
const app = new Vue({
// 2.el:将实例挂载到id=app的div上
el: "#app",
// 3.data:声明使用的数据
data: {
message: "hello Vue!"
}
})
</script>
</body>
</html>
2.插值表达式
作用：通过插值表达式语法，可以将实例对象中data选项中的数据，在页面中进行渲染
语法:
{{ 变量名称 }}
练习代码:
<!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>插值表达式语法</title>
</head>
<body>
<div id="app">
<h3>插值表达式输出数据</h3>
<p>直接输出数据：{{ message }}</p>
<p>字符串拼接（简单运算）:{{ message + ":" + version}}</p>
<p>数据拼接(隐式转换):{{ times + "周" }}</p>
<p>数据运算：{{ (times-1) + "周" }}</p>
<p>内部函数：{{ times.toFixed(2) }}</p>
<p>自定义函数：{{ strReverse(message) }}</p>
<p>三元运算符：{{ times >= 2 ? '学习周期': '项目周期' }}</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
// 声明在实例中的数据
message: '学Vue',
version: 'V2.25',
times: 2
},
methods: {
// 声明自定义函数
strReverse(str) {
return str.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
注意 ：插值表达式可以直接渲染输出变量中的数据
3.内置指令
指令directive:描述了Vue中进行简单DOM操作的语法！
语法：
<div v-名称 v-名称="数据"></div>
（1）v-text/v/html
作用：网页中渲染数据
-
v-text:用于渲染普通文本数据 -
v-html:用于渲染富文本数据
<div>普通插值表达式：{{ message }}</div>
<div>v-text指令：<span v-text="message"></span></div>
<div>v-html指令：<span v-html="message"></span></div>
（2）v-once
作用：网页中一次性加载数据，一般配合其他指令一起使用
<div>v-once指令：<span v-html="message" v-once></span></div>
（3）v-show
作用：条件渲染指令,按照给定的条件通过控制display:none|block样式，让数据显示/隐藏进行切换
<div>v-show指令：<span v-show="isLogin">尊敬的管理员您好，欢迎访问系 统</span></div>
（4）v-if
作用：条件渲染指令,功能上支持多分支语法
<div>v-if指令：
<span v-if="isLogin">尊敬的会员您好，欢迎访问本系统</span>
<span v-else>您还没有登录 [登录] [注册]</span>
<p v-if="score > 80 && score <= 100">优秀</p>
<p v-else-if="score >= 60 && score <= 80">良好</p>
<p v-else-if="score >= 0 && score < 60">不合格</p>
<p v-else>分数不合法</p>
</div>
（5）v-for
作用：一种循环指令，用于数组/集合数据的循环，称为列表渲染指令
<div>
v-for指令：循环遍历数据<br />
<span v-for="name in jobs"> {{ name }} =</span><br />
<span v-for="(name, index) in jobs">{{index + ":" + name}} =
</span><br />
<span v-for="(name, index) in jobs" v-bind:key="name">
{{name}} =</span>
</div>
（6）v-bind
作用：给标签属性，动态设置数据
<div>
<p>v-bind指令：动态操作标签属性(属性的值不再是普通数据，而是一个变量)
</p>
<p>v-bind:src="单词"，这里的这个单词就会当成变量进行使用</p>
<p>v-bind:src=".."语法，可以简化为：:src="..." </p>
<img v-bind:src="img1" alt=""
style="width:200px;height:auto">
<img :src="img2" alt="" style="width:200px;height:auto">
</div>
（7）v-on
作用：给标签添加事件
<div>
v-on指令操作：
<button v-on:click="handler1">点击触发事件</button>
<button @click="handler2">简洁事件语法</button>
</div>
（8）v-model
作用：提供给表单数据双向绑定的指令
<div>
v-model指令：主要用于表单元素的双向绑定指令
<p>账号：<input type="text" v-model="username"></p>
<p>用户输入的数据：<strong>{{ username }}</strong></p>
</div>
4.样式操作
网页中标签的样式，就是通过行内样式和外联样式直接进行修饰；但是网页中经
常出现一些通过修改样式实现的动态特效，Vue中不推荐DOM 操作，需要借助变量完成标签样式的动态控制
代码练习：
<!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>
<style>
.inverse-bg {
background-color: #333;
color: white;
}
.bg {
background: aliceblue;
}
.fred {
color: orangered;
}
</style>
</head>
<body>
<div id="app">
<h2>class样式设置</h2>
<p :class="{'inverse-bg': isReverse}">class对象语法设置样式 【重点】</p>
<p :class="['bg', 'fred']">class 数组方式设置样式</p>
<p class="bg fred">class 普通语法样式</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isReverse: false,//是否显示反色样式
}
})
</script>
</body>
</html>
