前端【VUE】01-vue入门【概念、创建实例、插值表达式、响应式特性、开发者工具】

① 概念

　　VUE官网：https://cn.vuejs.org/

② 创建Vue实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <title>Document</title>
 8 </head>
 9 <body>
10 
11 <!-- 
12   创建Vue实例，初始化渲染
13   1. 准备容器 (Vue所管理的范围)
14   2. 引包 (开发版本包 / 生产版本包) 官网
15   3. 创建实例
16   4. 添加配置项 => 完成渲染
17 -->
18 
19 <!-- 不是Vue管理的范围 -->
20 <div class="box2">
21   box2 -- {{ count }}
22 </div>
23 <div class="box">
24   box -- {{ msg }}
25 </div>
26 
27 -----------------------------------------------------
28 <!-- Vue所管理的范围, 创建Vue实例的时候指定要管理的容器范围 -->
29 <div id="app">
30   <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
31   <h1>{{ msg }}</h1>
32   <a href="#">{{ count }}</a>
33 </div>
34 
35 <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
36 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
37 
38 <script>
39   // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
40   const app = new Vue({
41     // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
42     el: '#app',
43     // 通过 data 提供数据
44     data: {
45       msg: 'Hello 嘿嘿',
46       count: 666
47     }
48   })
49 </script>
50 </body>
51 </html>

③ 插值表达式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <title>Document</title>
 8 </head>
 9 <body>
10 <!-- 
11   插值表达式：Vue的一种模板语法
12   作用：利用 表达式 进行插值渲染
13   语法：{{ 表达式 }}
14 
15   注意点：
16     1. 使用的数据要存在
17     2. 支持的是表达式，不是语句  if  for
18     3. 不能在标签属性中使用 {{ }}
19  -->
20 <div id="app">
21   <p>{{ nickname }}</p>
22   <p>{{ nickname.toUpperCase() }}</p>
23   <p>{{ nickname + '你好' }}</p>
24   <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
25   <p>{{ friend.name }}</p>
26   <p>{{ friend.desc }}</p>
27 
28   <!-- ----------------------- -->
29   <!-- <p>{{ hobby }}</p> -->
30   <!-- <p>{{ if }}</p> -->
31   <!-- <p title="{{ nickname }}">我是p标签</p> -->
32 </div>
33 
34 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
35 <script>
36   const app = new Vue({
37     el: '#app',
38     data: {
39       nickname: 'tony',
40       age: 18,
41       friend: {
42         name: 'jepson',
43         desc: '热爱学习 Vue'
44       }
45     }
46   })
47 </script>
48 </body>
49 </html>

④ 响应式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <title>Document</title>
 8 </head>
 9 <body>
10 
11 <div id="app">
12   {{ msg }}
13   {{ count }}
14 </div>
15 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
16 <script>
17   const app = new Vue({
18     el: '#app',
19     data: {
20       // 响应式数据 → 数据变化了，视图自动更新
21       msg: '你好，黑马',
22       count: 100
23     }
24   })
25 
26   // data中的数据，是会被添加到实例上
27   // 1. 访问数据  实例.属性名
28   // 2. 修改数据  实例.属性名 = 新值
29 </script>
30 </body>
31 </html>
32