Vue简介

m0_740043732025-12-03 10:27

一、Vue 简介

1.1 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的 js 框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

1.2 MVVM 模式的实现者 ------ 双向数据绑定模式

  • Model：模型层，在这里表示 JavaScript 对象

  • View：视图层，在这里表示 DOM（HTML 操作的元素）

  • ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者

  • ViewModel 能够观察到数据的变化，并对视图下对应的内容进行更新
  • ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定

1.3 其它 MVVM 实现者

  • AngularJS简单介绍一下，AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
  • ReactJSReact 引入了虚拟 DOM（Virtual DOM）的机制：在浏览器端用 Javascript 实现了一套 DOM API。基于 React 进行开发时所有的 DOM 构造都是通过虚拟 DOM 进行，每当数据变化时，React 都会重新构建整个 DOM 树，然后 React 将当前整个 DOM 树和上一次的 DOM 树进行对比，得到 DOM 结构的区别，然后仅仅将需要变化的部分进行实际的浏览器 DOM 更新。
  • 微信小程序微信小程序的视图层和数据层就是通过 MVVM 进行绑定的。

1.4 为什么要使用 Vue.js

  • 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20 多 kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
  • 移动优先。更适合移动端，比如移动端的 Touch 事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高

1.5 Vue.js 的两大核心要素

1.5.1 数据驱动

1.5.2 组件化

  • 页面上每个独立的可交互的区域视为一个组件
  • 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
  • 页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面

二、Vue 的初体验

开发工具

  • VScode
  • HBuilder
  • WebStorm
  • IDEA

2.1 在页面引入 vue 的 js 文件

注意：cdn 是一种加速策略，能够快速的提供 js 文件

也可以自己下载到本地，自己引入 vue.js

javascript 复制代码 
// 在线cdn
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>


// 也可以自己下载到本地
<!--  引入js文件 -->
<script src="../js/vue-2.7.16.js"></script>

2.2 准备 dom

javascript 复制代码 
<!-- 创建一个div，id是app -->
<div id="app"></div>

2.3 创建 vue 对象，设计对象的内容

其中该 vue 对象，绑定了页面中 id 是 app 的那个 div

javascript 复制代码 
<script>
    // 创建Vue对象,注意大小写,构造器中是一个json
    new Vue({
        el:"#app", // 这是el是element缩写,目的是选择元素,所以此处是选择器
        data: {  // 这是data,数据,定义#app选中的区域可以使用的数据
            name:"哈喽 小尤"
        }
    })
</script>
  • el: element 的简称，也就是 Vue 实例挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。
  • data: 用于提供数据的对象，里面存放 json 数据。

2.4 在页面的元素中使用插值表达式来使用 vue 对象中的内容

javascript 复制代码 
<div id="app">
    {{ title }}
</div>

三、 插值表达式

插值表达式是 {{}}, 即双花括号

3.1 运算

html 复制代码 
<div id="app">
        {{ 1 + 1}}<br>
        {{ 1 - 1}}<br>
        {{ 2 * 2}}<br>
        {{ 2 / 2}}<br>
        {{ 2 +"--"+ 2}}<br> <!-- 字符串拼接 -->
        {{ 2 > 1 ? "2大":"1大"}}<br>
 </div>

3.2 取数据

插值表达式的可以是在 View 中获得 Model 中的内容

Model 中的内容如下：

javascript 复制代码 
<body>
  <div id="app">
    {{title }},
    {{arr}},
    {{user}},
    {{user.age}},
    {{user.username}}
  </div>
</body>
<scrip>
  new Vue({
    el:"#app",
    data:{
      title:"hello world!",
      arr:[11,22,33],
      user:{
        age:18,
        username:"taotie"
      }
    }
  });
</script>

3.3 获取数组中的内容

html 复制代码 
<div id="app">
    {{arr[2]}}
</div>

此时，页面上会显示 "33"，也就是数组中的第三个元素被获取。

3.4 获取对象中的属性

html 复制代码 
<div id="app">
    {{ user.username }}
</div>

此时，页面上会显示 "taotie"，也就是对象中 username 属性的值。

3.5 调用 Vue 中的方法

重点 1: 在哪里定义方法？方法的定义语法？

html 复制代码 
<div id="app">
        {{ fun1() }} <!-- 注意还要加参数列表() -->
        {{ fun2(66) }}
</div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {  // 定义数据
            },
            methods: { // 定义函数
                // key:value
                fun1:function(){
                    alert("调用fun1执行")
                    console.log("fun1输出");
                },
                // 上面函数定义,有简化写法
                fun2(a){
                    console.log("fun2输出" , a)
                    // 返回值在页面展现
                    return  "fun22222"
                }
            }
        })
    </script>

调用了 vue 对象中的 fun2 方法，控制台输出内容，页面并展示了方法的返回值。

总结

html 复制代码 
1.插值表达式可以运算
2.插值表达式可以取data中的数据
3.插值表达式可以调用方法

五、Vue 的分支

vue 中有很多指令

形如： v-xxx

5.1 v-if

Vue 中的分支语句 v-if 非常好理解，逻辑跟 Java 中的 if-else 相同。

作用：根据 if 的对错来决定要不要展现该 标签内容

v-if 语句块包含以下内容：

  • v-if
  • v-else
  • v-else-if
    接下来以一个简单例子即可理解：

从这个例子可以看出，vue 对象中的 data 提供了分支的条件。根据条件，如果是 true，则 v-if 的内容就会 显示，反之 不显示。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue-2.7.16.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="score > 90">优秀</p>
        <p v-else-if="score > 80">良好</p>
        <p v-else-if="score > 70">及格</p>
        <p v-else>不及格</p>
        
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            score: 88
        }
    })
</script>
</html>

5.2 v-show

v-if 和 v-show 之间有着看似相同的效果，但优化上却有区别。先看下面这个例子：

html 复制代码 
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p v-show="rich">
                有钱！
            </p>
            <p v-if="rich">
                有钱！
            </p>
            <button type="button" @click="rich=!rich">今晚彩票开奖</button>
        </div>	
    </body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({	
            el:'#app',
            data:{
                rich:false
            },
            methods:{				
            }
        });
    </script>
</html>

通过点击 "今晚彩票开奖" 按钮，能切换 rich 的值，此时发现，v-if 和 v-show 的显示状态都会来回切换。看起来是一样的，但通过查看控制台代码发现，**v-show实际会将p标签的css样式的display属性设为none来达到隐藏的效果。

而v-if 是直接在页面上添加和删除 p 标签来达到效果

总结：因此 v-show 在反复切换的应用场景下，效率比 v-if 更高。

六、Vue 的循环 v-for【重点】

Vue 中的循环关键字并没有 Java 的那么多，只有 v-for，但用法上有多种。接下来我们来逐一介绍。

6.1 普通的 for 循环

我们需要定义数据源，然后通过 v-for 来遍历数据源，再使用插值表达式输出数据。

html 复制代码 
<body>
<div id="app">
    <ul>
        <!-- in是关键词,args是下方data中定义的数组,a是遍历出的结果变量 -->
        <li v-for="a in args">{{a}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>

在这个例子中，数据源提供了一个数组。视图层通过 v-for 来循环输出多个 li 标签，非常简单。

6.2 带着索引的 for

html 复制代码 
<body>
<div id="app">
    <ul>
        <li v-for=" (a,i) in args" :key='i'>{{i}}{{a}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>

(a,i) 顺序建议不要变, 第一个就是遍历的得到的值，第二个就是下标

此时的 i 就是每次循环的循环变量 ，从 0 开始一直到元素个数 - 1

6.3 遍历对象数组填充表格【特别重点】

List<User> users = new ArrayList<>();

users.add (new User (1, "张三"))；

users.add (new User (2, " 李四));

​ { ​ id:1, ​ name:"张三" ​ }, ​ { ​ id：2， ​ name："lsii " }

html 复制代码 
<!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">
    <h2>简单遍历数组</h2>
    <ul>
        <li v-for="e in arr">{{e}}</li>
    </ul>
    <hr>
    <h2>遍历,携带下标</h2>
     <ul>
        <li v-for="(e,i) in arr">{{e}}==>{{i+1}}</li>
    </ul>
    <h2>遍历,取出对象</h2>
    <table border="2">
        <tr>
            <td>序号</td>
            <td>用户id</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr v-for="(user,i) in userList">
            <td>{{i+1}}</td>
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.sex}}</td>
        </tr>
    </table>
 </div>   
 <script src="../js/vue-2.7.16.js"></script>
 <script>
    new Vue({
        el:"#app",
        data:{
            arr:[11,33,44,66],
            userList:[
                {id:1101,name:"老王",sex:"男"},
                {id:1102,name:"老李",sex:"女"},
                {id:1103,name:"老刘",sex:"女"},
            ]
        }
    })
 </script>   
</body>
</html>
页面效果

6.4 带着:key 遍历

列表渲染 --- Vue.js

html 复制代码 
    <!-- v-for是循环,所在标签会随着循环重复出现 -->
    <!-- in是关键词,右边是下方定义的数组,左边是遍历得到的数据-->
    <!-- 建议在给每个循环中,设置:key,key的值唯一即可 -->
    <div v-for="e in arr" v-bind:key="e">{{e}}</div>

七、Vue 的属性绑定【重点】

Vue 提供了多个关键字，能快速的将数据对象中的值绑定在视图层中，即 MVVM。

7.1 v-model

通过 v-model 将 input 标签的value 值与 vue 对象中的 data 属性值进行绑定。

ps: v-model 就是实现 Vue 的 mvvm 思想的方式

html 复制代码 
<body>
<div id="app">
    输入值 <input v-model="username">
    <hr>
    username={{username}}
</div>
<script src="../js/vue-2.7.16.js"></script>    
<script>
    new Vue({
        el:"#app",
        data:{
            username:"admin"
        },
        methods:{
            
        }
    })
</script>
</body>

此时 input 标签中加入了 "**v-model='username'**"，表示 input 的 value 值与 vue 对象 data 中的 username 属性绑定，当在 input 输入框中输入内容会实时修改 username 的值。于是 {{username}} 插值表达式能实时输出 input 输入框内的值。

** 页面效果如下：**

7.2 v-bind

我们知道插值表达式是不能写在 html 的标签的属性内的，那如果一定要用 vue 中的属性作为 html 标签的属性的内容，就可以通过 v-bind 进行属性绑定。

换句话，使用 v-bind, 将 html 中其他属性都变成变量来绑定

html 复制代码 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- <input v-bind:type="dyncType">
            <a v-bind:href="href">点击跳转</a>
            <img v-bind:src="src"> -->

            <input :type="dyncType">
            <a :href="href">点击跳转</a>
            <img :src="src">
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                dyncType:"radio",
                href:"http://www.jd.com",
                src:"../images/1.jpg"
            }
        })
    </script>
</html>

这样，a 标签内的 href 属性就可以使用 vue 对象中的属性值。

注意：v-bind 也可以简写，使用冒号 " :" 来代替。

html

预览

html 复制代码 
<a v-bind:href='link'></a>  等价于==>  <a :href='link'>

八、Vue 的事件绑定【重点】

语法：v-on: 事件名称

可以简写为： @事件名称

:::danger注意: v-on 都能绑定哪些事件？其实 vue 并没提供什么事件，只是换了写法而已。所以之前原生 js 有哪些 dom 事件，现在 vue 就可以使用哪些事件

:::

html 复制代码 
<button v-on:click="start()">开始</button>
<button @click="begin()">开始</button>

事件中触发的函数，在 vue 实例中的 methods 中进行定义，可以按照如下两种方式进行定义：

html 复制代码 
<script type="text/javascript">
  var vue = new Vue({
    el : "#app",
    data: {
    },
    methods:{
      // 方式1  
      // 函数名: function(参数)
      start:function(){
      },
      // 方式2
      // 函数名(参数)
      begin(){
      }			
    }
  })
</script>

** 练习 1: **

设计一个 div, 其中有数字，再设计一个按钮，点击按钮使数字递增 10

练习

输入 A,B 值后，点击计算按钮，在结果处展示相加后的结果

html 复制代码 
<body>
<div id="app">
    <h2>简易加法计算器</h2>
    数组A <input v-model="num1"> <br>
    数组B <input v-model="num2"> <br>
    <button @click="add">+</button> 
    <button @click="clear">clear</button>
    <br>
    结果: {{result}} <span></span>
</div>
<script src="../js/vue-2.7.16.js"></script>    
<script>
    new Vue({
        el:"#app",
        data:{
            num1: null,
            num2: null,
            result: null
        },
        methods:{
            add(){
               this.result = parseInt(this.num1) + parseInt(this.num2)
            },
            clear(){
                this.num1 = null
                this.num2 = null
                this.result = null
            }
        }
    })
</script>
</body>
</html>

扩展：表单修饰符

练习中涉及到表单数据转字符串问题，++获取的表单数据是字符串++, 需要使用 **parseInt ()** 转成数字

vue 提供了表单修饰符表单输入绑定 --- Vue.js (vuejs.org)

其中: **number**, 可以使表单的输入的数据直接就是数字，不需要再解析

html 复制代码 
<input v-model.number="age" type="number">

除了.number 修饰符外，还有其他的修饰符，比如.trim .lazy
练习

动态添加对象

效果图如下，输入数据，动态的添加到页面中

ps: 列表初始数据有 3 个 1-zs,2-ls,3-ww

html 复制代码 
<body>
  <div id="app">
    <!-- 输入框 -->
    <div>
      <label>ID
        <input type="text" v-model="id">
      </label>
      <label>Name
        <input type="text" v-model="name">
      </label>
      <button v-on:click="add">添加</button>
    </div>
    <!-- 列表 -->
    <div>
      <ul>
        <li v-for="item in list">{{item.id +'---'+item.name}}</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.min.js"></script>
  <script type="text/javascript">
    var app = new Vue({
      el:'#app',
      data:{
        id: 0,
        name:'',
        list:[
          {id:1,name:'zs'},
          {id:2,name:'ls'},
          {id:3,name:'ww'}
        ]
      },
      methods:{
        add:function(){
          // 获得输入的值
          var id_ = this.id;
          var name_ = this.name;
          // 向数组中添加元素
          this.list.push({id:id_,name:name_});
        }
      }
    });
  </script>

九、计算属性：computed

9.1 什么是计算属性

计算属性的重点突出在 属性 两个字上（属性是名词，就是存储数据的），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；

为什么要用，什么时候用计算属性？

  • ++当 {{}} 表达式内写很多复杂代码时使用计算属性来抽取代码++

9.2 演示

官网演示很详细...计算属性 --- Vue.js (vuejs.org)

html 复制代码 
<!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">
    展示内容:{{message}}
    <hr>
    <!-- 反转后1 先拆分得到数组:{{message.split("")}} <br>[a, b, c] -->
    <!-- 反转后2 数组反转:{{message.split("").reverse()}} <br>[c, b, a] -->
    <!-- 数组再变字符串: -->
    <!-- 使用{{}}做运算,代码复杂cba -->
     {{message.split("").reverse().join("-")}} <br>
    <hr>
    <!-- 使用计算属性,将代码抽取到计算属性中,这里只需要调用即可,简单方便 -->
    {{reverseString}}
</div>
<script src="../js/vue-2.7.16.js"></script>    
<script>
    new Vue({
        el:"#app",
        data:{
            message:"abc"
        },
        methods:{},
        computed:{ // 计算属性
            reverseString(){
                // 计算,返回该结果,上方使用{{}}取出结果
                return this.message.split("").reverse().join("")
            }
        }
    })
</script>
</body>
</html>

9.3 计算属性与方法的区别

看下面这个例子

html 复制代码 
<!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">
    展示内容:{{message}}
    <hr>
    <!-- 反转后1 先拆分得到数组:{{message.split("")}} <br> -->
    <!-- 反转后2 数组反转:{{message.split("").reverse()}} <br> -->
    <!-- 数组再变字符串: -->
    <!-- 使用{{}}做运算,代码复杂 -->
     {{message.split("").reverse().join("")}} <br>
    <hr>
    <!-- 使用计算属性,将代码抽取到计算属性中,这里只需要调用即可,简单方便 -->
    {{reverseString}}
    <hr>
    <h2>演示计算属性和函数的区别</h2>
    函数获取时间:{{getCurrentTime()}} <br>
    计算属性获取数据:{{getCurrentTime2}}
</div>
<script src="../js/vue-2.7.16.js"></script>    
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:"abc"
        },
        methods:{
            getCurrentTime(){ // 次次调用次次执行
                return Date.now();
            }
        },
        computed:{ // 计算属性,只会在加载时计算一次,结果缓存存储,后续使用直接取值不会再运算
            reverseString(){
                // 计算,返回该结果,上方使用{{}}取出结果
                return this.message.split("").reverse().join("")
            },
            getCurrentTime2(){
                return Date.now();
            }
        }
    })
</script>
</body>
</html>

计算属性和函数长得类似，需要注意 设计时二者名字不能重复
说明

  • methods：定义方法，调用方法使用 currentTime1 ()，需要带括号，每次都会重新执行
  • computed：定义计算属性，调用属性使用 currentTime2，不需要带括号，计算一次重复使用 (将结果缓存起来重复使用)；

注意：methods 和 computed 里不能重名

测试效果

仔细看图中说明，观察其中的差异

9.4 结论

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

计算属性的执行时机是在 created 钩子函数之前执行！且只执行一次！

  • 函数每次调用都会执行
  • 计算属性是页面加载时执行一次，后续每次调用都是之前的值不再计算

十、Vue 的组件化【理解】

Vue 的组件化设计思想借鉴了 Java 的面向对象思想：封装的思想！

也就是说，在实际的 vue 项目中，以及使用了 Vue 框架的项目中，Vue 的对象都会以组件的形式出现，能被反复使用。

也可以这么理解 **,Vue 的组件是将一些代码封装到组件中 **, 使用时只需要通过一个组件名既可使用该组件的功能

要想实现组件化，需要在页面中注册组件：

  • 全局注册
  • 本地注册

组件其实就是页面内的部分代码，完成某个功能

10.1 组件的全局注册

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的全局注册</title>
</head>
<body>
    <div id="app">
        <model1></model1>
        <model1></model1>
        <model1></model1>
    </div>
        <hr/>
    <div id="app1">
        <model1></model1>
        <model1></model1>
        <model1></model1>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    //通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。
    Vue.component("model1",{
        template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
        data:function(){
            return {
                title:"hello vue"
            }
        },
        methods:{
            btnfn:function(){
                alert("hello !!!");
            }
        }
    });

    new Vue({
        el:'#app'
    })
    new Vue({
        el:'#app1'
    })
</script>
</html>

10.2 组件的本地注册

vue 的全局注册，也就意味着在页面的任意一个被 vue 绑定过的 div 中，都可以使用全局注册了的 vue 组件。

但是，如果是对 vue 组件进行本地注册，那么在其他被 vue 绑定的 div 中，不能使用该组件。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的本地(局部)注册</title>
</head>
<body>
    <div id="app">
        <model11></model11>
    </div>
    <hr/>
    <!--在这里使用组件model11会报错-->
    <div id="app1">
        <model11></model11>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        components:{
            "model11":{
                template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
                data:function(){
                    return {
                        title:"hello vue"
                    }
                },
                methods:{
                    btnfn:function(){
                        alert("hello !!!");
                    }
                }
            }
        }
    })
    new Vue({
        el:'#app1'
    })
</script>

10.3 注意特性【重点】

  • 组件是一段完整的页面代码，包括 html 标签，js 数据和函数
  • 组件要设置名字，使用时是将名字作为标签使用
  • componet 中注册的组件中的 data，必须是以函数的形式，且 return 返回数据
  • template 标签内，必须有且只能有一个根标签，且一般都是 div 标签。
  • template 支持模板字符串
javascript 复制代码 
data:function(){
  return {
    title:"hello vue"
  }
}
data:{}
// 简化成
data(){
  return {
    title:"hello vue"
  }
}

十一、 组件的生命周期【面试】

Vue 中的组件也是有生命周期的。一个 Vue 组件会经历：初始化、创建、绑定、更新、销毁等阶段，不同的阶段，都会有相应的 **++生命周期钩子 hook 函数++** 被调用。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue-2.7.16.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p id="n1">{{name}}</p>
        <button @click="update">更新name</button>
        <button @click="destroye()">销毁按钮</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            name: 'zhangsan'
        },
        methods: {
            update() {
                this.name = Math.random() + "李四";
            },
            destroye() {
                this.$destroy()
            }
        },
        beforeCreate() {//创建vue之前
            console.log('beforeCreate')
            console.log(this.msg)//undefined    创建vue实例之前，数据还没有被初始化
        },
        created() {//创建vue实例之后
            console.log('created')
            console.log(this.msg)//hello world
        },
        beforeMount() {//挂载之前
            console.log('beforeMount')
        },
        mounted() {//挂载之后
            console.log('mounted')
        },
        beforeUpdate() {//更新之前
            console.log(this.name)
            console.log(document.getElementById('n1').innerText)//老数据
            console.log('data更新之前执行')
            
        },
        updated() {//更新之后
            console.log('data更新之后执行')
            console.log(document.getElementById('n1').innerText)//新数据
            console.log(this.name)
        },
        beforeDestroy() {//销毁之前
            console.log('beforeDestroy')
        },
        destroyed() {//销毁之后
            console.log('destroyed')
        },

       
    })
</script>
</html>
** 钩子函数 ** 解释
beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时 data 和 methods 以及页面的 DOM 结构都没有初始化 什么都做不了
**created ** 在实例创建完成后被立即调用此时 data 和 methods 已经可以使用 但是页面还没有渲染出来，可以在这里进行数据的初始化、异步请求数据、监听事件等操作
beforeMount 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted mounted 钩子函数是组件挂载到 DOM 后被调用的。在这个阶段可以访问到组件所依赖的 DOM 元素，进行 DOM 操作、绑定事件等
beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。 页面上数据还是旧的
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用
组件的生命周期钩子

十二、Vue-Cli 搭建 Vue 项目【重点】

12.1 什么是 vue-cli

cli: Command Line 命令行工具，vue-cli 就是 vue 的命令行工具，也称之为脚手架，使用 vue-cli 提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如 webpack、Element UI、Element Admin 等等。那么要想使用 vue-cli 命令，需要先安装 node.js。

12.2 node.js 的介绍及安装

node.js 的介绍

node.js 提供了前端程序的运行环境，可以把 node.js 理解成是运行前端程序的服务器。

node.js 的安装

从官网下载安装即可：http://nodejs.cn/download/

首先自己手动创建一个文件夹 nodejs

然后再选择该路径安装

这个切换路径是，需要自己手动创建一个文件夹 nodejs

不要勾选这个，否则会下载很多东西

| 测试 node.js 是否安装成功： 在 DOS 窗口中输入 "node -v" 查看版本，如果看到版本，就表示安装成功。(环境变量已经自动配置好) |---------------------------------------------------------------------------------| | | |
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

  • node -v 是 查看 node 的版本

  • npm -v 是 查看 npm 版本

解释:

npm 是安装工具的工具包，类似于 Linux 中 yum,Linux 中安装软件 yum install

node 中安装软件使用 npm install

设置 npm 源，配置镜像后，下载资源就会很快.

html 复制代码 
npm config set registry https://registry.npmmirror.com

12.3 使用 node.js 安装 vue-cli

(管理员权限) 使用如下命令安装 vue-cli

复制代码 
npm install @vue/cli -g

# 如果出错,可以卸载,重新执行上一步安装
npm uninstall @vue/cli -g
  • npm： 使用 node.js 的命令
  • install： 安装
  • @vue/cli： 要安装的 vue-cli
  • -g： 全局安装
    当出现以下界面，表示正在安装：

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| |

安装 vue-cli 检测

  • vue -V

12.4 使用 vue-cli 命令创建项目

进入工作空间，执行命令创建

  • vue create 项目名

注意 bug: 创建项目时如果出现报错，提示no permitted 即没有权限在此处创建项目，这个是因为磁盘权限不够，需要修改硬盘权限

选择具体 features

选择 vue 版本

如果选择了 Router, 那么就会有这个

一般选择第一项，为的是将文件分离打包

是否将此操作存储为模板，本例选择 n, 选择为 y 就会在下次创建时使用

创建完毕

运行项目

12.6 项目结构

文件名 解释
build webpack 的一些配置
config 不同环境的配置，比如开发环境，生产环境等
node_modules npm install 下载的依赖包
public 用于存放公共 js 文件夹、json 文件和图片等
dist 存放项目打包后的文件
src 项目的源码
src/assets 存放静态资源文件，如图片等
src/components 存放公共组件
src/router 静态路由表
src/store vuex
src/views 开发的页面资源，路由页面相关的
src/main.js 对应 App.vue 创建 vue 实例，也是 **入口文件**
src/App.vue 入口页面
gitignore git 管理时，忽略的文件或文件夹
package.json 项目的核心配置记录，可以查看当前安装依赖的版本号
index.html 首页的入口
vue.config.js 可选的配置文件，存放在根目录中，@vue/cli-service 启动的时候会自动加载

可以在 package.json 中修改端口

12.7 启动项目

进入项目，使用命令行输入**npm run serve**启动

ps:

  • 可以使用 vscode 打开项目，再在 vscode 终端敲命令 启动
  • 也可以使用 idea 打开项目，在终端敲命令 启动

总结

牢记 Vue 的基本结构\

html 复制代码 
<body>
<div id="app">
    {{}}
    <div v-if="变量" v-for=""></div>
    <img v-bind:src="" @click="">
</div>
<script src="../js/vue-2.7.16.js"></script>   
<script>
    new Vue({
        el:"#app",
        data:{}, // 定义变量
        methods:{}, // 定义函数
        computed:{}, // 定义计算属性
        components:{} // 定义组件
    })
</script>
</body>
  1. 记住每个指令的作用
    1. v-if 和 v-show
    2. v-for
    3. v-bind 和 v-model
    4. v-on
  2. 记住计算属性的
    1. 目的
    2. 写法
    3. 和函数的区别
  3. 知道组件
    1. 为什么需要组件？有什么作用？
    2. 怎么写的？
      1. 需要有组件名
      2. 组件模版有 templet 写标签，data 定义数据，methods 定义函数
    3. 怎么用的？
      1. 组件名当标签名
    4. 有什么需要注意的语法要求？
      1. templet 中写标签只能有标签
      2. ...
  4. 会使用 vue-cli 创建项目
    1. 会用命令创建项目
    2. 运行项目
    3. 点开项目的每个文件看看
    4. 记住 src 下的每个文件的作用
相关推荐
重铸码农荣光35 分钟前
从零实现一个「就地编辑」组件：深入理解 OOP 封装与复用的艺术
前端·javascript·前端框架
攻心的子乐36 分钟前
redission 分布式锁
前端·bootstrap·mybatis
前端老宋Running36 分钟前
拒绝“无效焦虑”：为什么你 80% 的 useMemo 都在做负优化？
前端·javascript·react.js
品克缤37 分钟前
vue项目配置代理，解决跨域问题
前端·javascript·vue.js
我叫张小白。37 分钟前
Vue3 v-model：组件通信的语法糖
开发语言·前端·javascript·vue.js·elementui·前端框架·vue
北辰alk37 分钟前
Vue 的 keep-alive 生命周期钩子全解析：让你的组件“起死回生”
vue.js
undsky38 分钟前
【RuoYi-SpringBoot3-UniApp】：一套代码，多端运行的移动端开发方案
前端·uni-app
Tonychen39 分钟前
【React 源码阅读】useEffectEvent 详解
前端·react.js·源码
天天向上102439 分钟前
vue3 封装一个在el-table中回显字典的组件
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04BongoCat - 跨平台键盘猫动画工具05本地部署阿里最新开源的Z-Image06Linux下V2Ray安装配置指南07Meta第三代“分割一切”模型——SAM 3本地部署教程：首支持文本提示分割，400万概念、30毫秒响应，检测分割追踪一网打尽08【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连09Labelme从安装到标注：零基础完整指南10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）