Vue入门到实战之第一篇
- 学习路线
- 1. Vue 概念
- 1.1 Vue 是什么
- 2. 创建Vue实例，初始化渲染
- 3. 插值表达式 {{ }}
- 4. Vue响应式特性
- 5. 开发者工具
学习路线
1. Vue 概念
1.1 Vue 是什么
概念： Vue是一个用于 构建用户界面1 的 渐进式2 框架3
1：基于数据渲染出用户看到的页面
2：循序渐进
3：一套完整的项目解决方案
优点: 大大提升开发效率（70%↑）
缺点：需要理解记忆规则 → 官网
2. 创建Vue实例，初始化渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
创建Vue实例，初始化渲染
1. 准备容器（Vue所管理的范围）
2. 引包（开发版本包 / 生产版本包）官网 v2:http://v2.cn.vuejs.org/ v3:http://cn.vuejs.org/
3. 创建实例
4. 添加配置项 => 完成渲染
-->
<div class="box2">
box2 -- {{ count }}
</div>
<div class="box">
box -- {{msg}}
</div>
-------------------------------------------------------------------------
<div id="app">
<!-- 这里将来会编写一些用于渲染的代码逻辑 -->
<h1>{{ msg }}</h1>
<a href="#">{{ count }}</a>
</div>
<!-- 引入的是开发版本包 - 包含完整的注释和警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
// 一旦引入 VUEJS核心包，在全局环境，就有了 Vue 构造函数
const app = new Vue({
// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
el: '#app',
//通过 data 提供数据
data:{
msg: 'Hello 小黑',
count: 666
}
})
</script>
</body>
</html>
3. 插值表达式 {{ }}
插值表达式是一种 Vue 的模板语法
-
作用： 利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
-
语法： {{ 表达式 }}
-
注意点：
（1）使用的数据必须存在（data）
（2）支持的是表达式。而非语句，比如：if for …
（3）不能在标签属性中使用 {{ }} 插值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<!--------------------------->
<!-- <p>{{ hobby }}</p> -->
<!-- <p>{{ if }}</p> -->
<!-- <p tittle="{{ nickname }}">我是p标签</p> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
nickname: 'tony',
age: 18,
friend: {
name: 'jepson',
desc: '热爱学习 Vue'
}
}
})
</script>
</body>
</html>
4. Vue响应式特性
数据改变，视图会自动更新
聚焦于数据 → 数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ msg }}
{{ count }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app', //用于指定容器
data: {
//响应式数据 → 数据变化了，视图自动更新
msg: '你好，黑马',
count: 100
}
})
// data中的数据，是会被添加到实例上
// 1. 访问数据 实例.属性名
// 2. 修改数据 实例.属性名 = 新值
</script>
</body>
</html>
5. 开发者工具
安装Vue开发者工具：装插件调试Vue应用
(1) 通过谷歌应用商店安装（国外网站）
(2) 极简插件：下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件
htttps://chrome.zzzmh.cn/index
打开Vue运行的页面，调试工具中Vue栏，即可查看修改数据，进行调试。
