1 Vue 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 引入 Vue.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'vue'
}
})
</script>
</body>
</html>el 属性用于指定 Vue 实例所控制的 DOM 元素
测试
2 插值表达式
通过插值表达式，可以将 Vue 实例中的数据渲染到 DOM 中的元素上
1、
{{ message }}
2、
{{ 2 + 2 }}3、
{{ new Date().toLocaleDateString() }}插值表达式可以调用 JavaScript 的日期函数并显示结果，显示当前日期
4、
{{ age>=18? 'adult' : 'youngster }}2.1 Vue的响应式特性
数据变化，视图自动更新
3 Vue 指令
Vue 指令：带有 v- 前缀的特殊 标签属性
3.1 v-html
将 HTML 内容动态插入到页面中的元素里
与普通的插值表达式不同，v-html 可以解析并渲染 HTML 标签，而不是将它们作为普通文本显示
3.2 v-show 和 v-if
v-show：控制元素显示/隐藏
语法：v-show = "表达式" （true 显示，flase 隐藏）
原理：切换 css 的 display: none 来控制显示隐藏
场景：频繁切换显示隐藏的场景
v-if：控制元素显示/隐藏（条件渲染）
语法：v-if = "表达式" （true 显示，flase 隐藏）
原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
场景：要么显示，要么隐藏，不频繁切换的场景
用法一致，以 show 为例：
3.3 v-else 和 v-else-if
3.4 v-on
作用：注册事件 = 添加监听 + 提供处理逻辑
语法：
- v-on:事件名 = "内联语句"
- v-on:事件名 = "methods 中的函数名"
简写：@事件名
内联语句：可执行代码，如 count++
<input type="button" v-on:click="count++" value="count++">等价于：
<input type="button" @click="count++" value="count++">methods 方法：
3.5 v-bind
作用：动态设置 html 的 标签属性（src、url、title）
语法：v-bind: 属性名 = "表达式"
简写：: 属性名 = "表达式"
等价于
3.6 v-for
作用：基于数据循环，多次渲染 整个元素
语法：v-for = "(item,index) in 数组"
3.7 v-model
作用：给 表单元素 使用，双向数据绑定
数据变化->视图自动更新
视图变化->数据自动更新
语法：v-model = '变量'
4 指令修饰符
指令修饰符是特殊的后缀，用于增强指令的功能。修饰符以点（.）开头，紧跟在指令名称之后。不同的修饰符提供了不同的功能
如 v-model.number
4.1 v-model 修饰符
.lazy 只有当输入框失去焦点时才更新数据，而不是每次输入时更新
.number 自动将用户的输入值转换为数值类型
.trim 自动移除用户输入的首尾空格
4.2 v-on 修饰符
.stop 阻止 事件冒泡，等同于调用 event.stopPropagation()
（@click.stop）
.prevent 阻止默认事件，等同于调用 event.preventDefault()
.capture 以捕获模式监听事件，事件在目标的所有子元素处理前触发
.self 只有事件在绑定的元素本身触发时才执行回调，避免子元素触发
.once 事件只触发一次，之后不会再触发
4.3 v-bind 修饰符
.prop 强制绑定 DOM 属性，而不是 HTML 特性
.sync 创建一个父组件与子组件之间的双向绑定（仅适用于 Vue 2.x）
4.4 键盘事件修饰符
.enter 监听 enter 键
.tab 监听 tab 键
.delete 监听 delete 键
.esc 监听 esc 键
.space 监听空格键
.up、.down、.left、.right 监听方向键
5 v-bind 样式控制
为了方便开发者进行 样式控制，Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制
语法 :class = "对象/数组"
对象
适用场景：一个类名，来回切换
<div class="box" :class="{ 类名1:布尔值, 类名2:布尔值 }"></div>
数组
适用场景：批量添加或删除类
<div class="box" :class="[ 类名1, 类名2, 类名3]"></div>
在 <head> 标签里面设置 <style>
案例
6 v-model 应用于其他表单元素
<form>
<label for="student_number">student_number: </label>
<input type="text" id="student_number" v-model="student.student_number"><br><br>
<label for="name">name: </label>
<input type="text" id="name" v-model="student.name" value="name"><br><br>
<label>gender: </label>
<input type="radio" v-model="student.gender" id="male" value="male" name="gender">
<label for="male">male</label>
<input type="radio" v-model="student.gender" id="female" value="female" name="gender">
<label for="female">female</label><br><br>
<input type="checkbox" id="tennis" value="tennis" v-model="student.hobbies">
<label for="tennis">Tennis</label><br>
<input type="checkbox" id="run" value="run" v-model="student.hobbies">
<label for="run">Run</label><br>
<input type="checkbox" id="sing" value="sing" v-model="student.hobbies">
<label for="sing">Sing</label><br><br>
<label for="city">city: </label>
<select id="city" v-model="student.city" style="width: 100px;">
<option value="beijing" name="city">beijing</option>
<option value="herbin" name="city">herbin</option>
<option value="wuhan" name="city">wuhan</option>
<option value="qingdao" name="city">qingdao</option>
<option value="chengdu" name="city">chengdu</option>
</select><br><br>
<label>description</label><br>
<textarea v-model="student.description"></textarea><br><br>
<input type="submit" value="submit">
</form>
<br><br>
{{ student }}
7 计算属性
7.1 get 读
概念：基于 现有的数据，计算出来的 新属性。依赖的数据变化，自动重新计算
语法：
① 声明在 computed 配置项中，一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}
<div>
<table>
<tr>
<td>num idx</td>
<td>val</td>
</tr>
<tr v-for="(item,) in nums">
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</table>
totalNum: {{ totalNum }}
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
nums: [
{ name: 'num1', value: 7 },
{ name: 'num2', value: 8 },
{ name: 'num3', value: 9 },
]
},
computed: {
totalNum() {
let sum = this.nums.reduce((sum, item) => sum + item.value, 0);
return sum;
}
}
</script>
7.2 get 读 和 set 写
<div id="app">
<p>First Name: {{ student.firstName }}</p>
<p>Last Name: {{ student.lastName }}</p>
<!-- 使用计算属性 -->
<p>Full Name: {{ fullName }}</p>
<!-- 通过计算属性更新 fullName -->
<input type="text" v-model="fullName" placeholder="修改 Full Name">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data() {
return {
student: {
firstName: 'John',
lastName: 'Doe'
}
};
},
computed: {
// 计算属性 fullName，带有 getter 和 setter
fullName: {
// 读取 fullName（get）
get() {
return this.student.firstName + ' ' + this.student.lastName;
},
// 修改 fullName 时，更新 firstName 和 lastName（set）
set(newValue) {
const names = newValue.split(' ');
this.student.firstName = names[0];
this.student.lastName = names.length > 1 ? names[1] : '';
}
}
}
});
</script>
8 watch
监听器（监视器）
作用：监视数据变化，执行一些 业务逻辑 或 异步操作
语法：
1、简单写法 → 简单类型数据，直接监视
2、完整写法 → 添加额外配置项
简单写法
注：如果data是对象，则
这里obj是对象，正常的watch的写法：
'obj(newValue){}'
但是如果需要监视整个对象，监视对象所有数据 ---> 深度监视：
9 购物车案例（to do）
034-水果购物车-基本渲染_哔哩哔哩_bilibili
