目录
2.2.2 computed 计算属性 VS methods 方法
一、Vue2.x：快速上手+插值表达式+指令上
1.1 Vue快速上手
1.1.1 Vue概念
Vue 是什么？
概念：Vue是一个用于 ①构建用户界面的 ②渐进式 ③框架
解释如下：
①构建用户界面的 ：基于数据渲染出用户看到的页面
②渐进式：循序渐进
Vue的两种使用方式：
①Vue核心包开发
- 场景：局部模块改造
②Vue核心包 & Vue插件工程化开发
- 场景：整站开发
③框架：一套完整的项目解决方案
优点：大大提升开发效率(70%↑)
缺点：需要理解记忆规则→官网
Vue2官网：https://v2.cn.vuejs.org/
Vue3官网：https://cn.vuejs.org/
总结：
Vue是什么?
Vue是一个用于 构建用户界面 的 渐进式 框架
- 构建用户界面：基于数据动态渲染页面
- 渐进式：循序渐进的学习
- 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则) 规则→官网
1.1.2 创建实例
创建Vue实例，初始化渲染
<!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实例，初始化渲染
1.准备容器(Vue所管理的范围)
2.引包 (开发版本包 /生产版本包) 官网
3.创建实例
4.添加配置项=>完成渲染 -->
<div id="app">
<h1>{
{ msg }}</h1>
<a href="#">{
{ count }}</a>
</div>
<!-- 引入的是开发版本包-包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 一旦引入VueJS核心包，在全局环境，就有了 Vue 构造函数
const app = new Vue({
// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
el: "#app",
// 通过 data 提供数据
data: {
msg: "Hello",
count: 666,
},
});
</script>
</body>
</html>
总结：
创建Vue实例，初始化渲染的核心步骤：
- 准备容器
- 引包(官网) - 开发版本 / 生产版本
- 创建Vue实例 new Vue()
- 指定配置项 el data =>渲染数据
① el 指定挂载点，选择器指定控制的是哪个盒子
② data提供数据
1.1.3 插值表达式 { { }}
插值表达式是一种 Vue 的模板语法
1. 作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2. 语法：{ { 表达式 }}
3. 注意点：
(1) 使用的数据必须存在(data)
(2) 支持的是表达式，而非语句，比如：if、for ...
(3) 不能在标签属性中使用 { { }} 插值
<!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的一种模板语法
作用:利用 表达式 进行插值渲染
语法: {
{ 表达式 }}
注意点：
1.使用的数据要存在
2.支持的表达式，不是语句 if for
3.不能在标签属性中使用 {
{ }}
-->
<div id="app">
<p>{
{nickname}}</p>
<p>{
{nickname.toUpperCase()}}</p>
<p>{
{nickname + "你好"}}</p>
<p>{
{age>=18 ? "成年":"未成年"}}</p>
<p>{
{friend.name}}</p>
<p>{
{friend.desc}}</p>
</div>
<!-- 引入的是开发版本包-包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
nickname: "tony",
age: 18,
friend: {
name: "小明",
desc: "喜欢唱歌",
},
},
});
</script>
</body>
</html>
总结：
1. 插值表达式的作用是什么?
- 利用表达式进行插值，将数据渲染页面中
2. 语法格式?
- { { 表达式 }}
3. 插值表达式的注意点：
①使用的数据要存在(data)
②支持的是表达式，而非语句 if ... for
③不能在标签属性里面使用
1.1.4 响应式特性
Vue核心特性：响应式
我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。
比如：数据的响应式处理 → 响应式：数据变化，视图自动更新
数据改变，视图会自动更新
聚焦于数据 → 数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可
总结：
1. 什么是响应式呢?
- 数据改变，视图自动更新
- 使用Vue开发→专注于业务核心逻辑即可
2. 如何访问或修改数据呢?
- data中的数据，最终会被添加到实例上
- ①访问数据："实例.属性名"
- ②修改数据："实例.属性名"= "值"
1.1.5 开发者工具
安装Vue开发者工具：装插件调试Vue应用
(1)通过谷歌应用商店安装(国外网站)
(2)极简插件：下载→开发者模式→拖拽安装→插件详情允许访问文件
打开 Vue 运行的页面，调试工具中 Vue栏，即可查看修改数据，进行调试。
1.2 Vue指令
Vue 会根据不同的【指令】，针对标签实现不同的【功能】
指令：带有 v-前缀 的 特殊 标签属性
1.2.1 v-html
作用：设置元素的 innerHTML
语法：v-html= "表达式"
总结：
1. 什么是Vue指令呢?
- 指令就是带有 v-前缀 的特殊 属性，不同属性 对应 不同的功能
- 学习不同指令 → 解决不同业务场景需求
2.如果需要动态解析标签,可以用哪个指令?语法?
v-html="表达式"→动态设置元素 innerHTML
1.2.3 v-show / v-if
v-show
作用：控制元素显示隐藏
语法：v-show= "表达式" 表达式值 true显示，false隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景
v-if
作用：控制元素显示隐藏(条件渲染)
语法：v-if="表达式" 表达式值true显示，false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示， 要么隐藏，不频繁切换的场景
总结：
- v-show 底层原理：切换 CSS 的 display:none 来控制显示隐藏
- v-if 底层原理：根据判断条件控制元素的 创建 和 移除
1.2.4 v-else / v-else-if
作用：辅助 v-if 进行判断渲染
语法：v-else v-else-if = "表达式"
注意：需要紧挨着 v-if 一起使用
1.2.5 v-on
作用：注册事件 = 添加监听 + 提供处理逻辑
语法：① v-on：事件名= "内联语句" ② v-on：事件名= "methods中的函数名"
简写：@事件名
注意：methods函数内的 this指向Vue实例
v-on 调用传参
<!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>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
h3 {
margin: 10px 0 20px 0;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<h3>小黑自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
</div>
<p>银行卡余额：{
{ money }}元</p>
</div>
<!-- 引入的是开发版本包-包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
money: 100,
},
methods: {
buy(price) {
this.money -= price;
}
最低0.47元/天 解锁文章
扫一扫
5959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
