Vue入门到实战之第一篇【超基础】
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 for3. 不能在标签属性中使用 {{}}
-->
<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栏，即可查看修改数据，进行调试。
