菜单 搜索
首页 前端知识 Java前端 Vue零基础学习(特别完整版，建议收藏！！！)包括脚手架，组件库Element的使用等。

Java前端 Vue零基础学习(特别完整版，建议收藏！！！)包括脚手架，组件库Element的使用等。

2024-08-27 09:08:46 前端知识 前端哥 671 938 我要收藏

目录

1.什么是Vue

2.vue的设计思想MVVM

 2.1快速入门抓包处理

2.2注意事项及其说明 

3.数据单/双向渲染技术

 3.1数据单向渲染

3.2数据双向渲染 

 3.2.1数据双向渲染练习题

4.事件绑定机制 

4.1演示案例

4.2抓包处理 

4.3注意事项

4.4事件绑定机制的练习题

5.修饰符 

6.条件渲染(v-if/v-else-if/v-else/v-show)

6,1 用例题帮大家理解

 6.2 v-if 和v-else的区别

6.3 相关案例练习(有兴趣可以试试看)

7.列表渲染 (v-for)

7,1 列表渲染相关方法 

7.2列表渲染应用实例 

8.组件化编程 

8.1 全局组件

​编辑

8.2局部组件 

 8.3注意事项

9.生命周期和钩子函数

对重要阶段的钩子函数进行案例分析 

10.vue Cli脚手架模块化开发 

10.1用webpack来创建vue Cli脚手架项目 

​编辑10.2 Vue Cli中项目结构的分析 (如图所示)

!!!10.3Vue请求页面的执行流程 

11. vue-ElementUI

11.1安装Element-ui的指令

10.2初步使用Element-UI应用实例

希望小伙伴多多关注！ 

本文章-由韩顺平教育视频学习所得。供大家一起学习进步 ！

1.什么是Vue

就是渐进式的JavaScript！

1. Vue(读音/vju:/,类似于 view)是一个前端框架,易于构建用户界面。

2.Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合。

3.支持和其它类库结合使用。

4.开发复杂的单页应用非常方便。

5.Vue是Vue.js的简称。

官网文档：https://cn.vuejs.org/v2/guide/index.html 

Git下载 : https://cn.vuejs.org/v2/guide/installation.html

2.vue的设计思想MVVM

-M∶即Model，模型，包括数据和一些基本操作

-V:即View,视图,页面渲染结果

·VM∶即View-Model，模型与视图间的双向操作(无需开发人员干涉)

在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作 Model 渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据, 然后同步到Model中。

-而MVM中的VM要做的事情就是把DOM操作完封装起来,开发人员不用再关心 Model和View之间是如何互相影响的

-只要我们Model发生了改变,View上自然就会表现出来

-用户修改了View，Model中的数据也会跟着改变。。

·结果:把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上,大大提高开发效率

 

实现的数据和显示分离的技术，比JQuery更加的简洁！ 

 2.1快速入门抓包处理

代码演示：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue快速入门</title>
</head>
<body>
<!--
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div
2. 因为div更加适合做布局
3. id 不是必须为app , 是程序员指定,一般我们就使用app
-->
<div id="app">
  <!--
  1. {{message}} : 插值表达式
  2. message 就是从model的data数据池来设置
  3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换
     , 如果没有匹配上, 就是输出空
  -->
  <h1>欢迎你{{message}}-{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
  //创建Vue对象
  /**
   * 1. 创建Vue对象实例
   * 2. 我们在控制台输出vm对象，看看该对象的结构！(data/listeners)
   *
   */
  let vm = new Vue({
    el: "#app", //创建的vue实例挂载到 id=app的div
    data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
      message: "Hello-Vue!",
      name: "小明"
    }
  })
  console.log("vm=>", vm);
  console.log(vm._data.message);
  console.log(vm._data.name);
  console.log(vm.name);
  console.log(vm.message);
</script>

</body>
</html>

结果展示： 

抓包分析：

 

 

 改变Model的数据改变可直接修改前端

2.2注意事项及其说明 

1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div。

2. 因为div更加适合做布局容器。

3. id 不是必须为app , 是程序员指定,一般我们就使用app

4.注意代码的顺序，我们要求div在前，script在后，否则无法进行一个绑定。

5.Vue.js采用简洁的模板语法来声明式地将数据渲染进 DOM的系统,做到数据和显示分离

6. Vue没有繁琐的 DOM操作，如果使用jQuery，我们需要先找到 div节点，获取到 DOM 对象,然后进行节点操作,显然Vue更加简洁

3.数据单/双向渲染技术

1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
2. v-model指令 是数据的双向渲染,
(1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】

 3.1数据单向渲染

1.v-bind指令可以用来绑定元素的属性

2.v-bind指令可以完成基本的数据渲染和绑定

3.v-bind指令的简写形式就是一个冒号(:)

举例： 

<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <meta charset="UTF-8">
  <title>单向数据渲染</title>
</head>
<body>
<div id="app">
  <h1>{{message}}</h1>
  <!--
  1. 使用插值表达式引用 data数据池数据是在标签体内
  2. 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式
  3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析
  4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind
  -->
  <!--<img src="{{img_src}}">-->
  <img v-bind:src="img_src" v-bind:width="img_width">
  <img :src="img_src" :width="img_width">
</div>
<script src="vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app", //创建的vue实例挂载到 id=app的div
    data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
      message: "hello, 你好呀",
      img_src: "1.jpg",
      img_width: "200px"
    }
  })
  console.log("vm=>", vm);
</script>
</body>
</html>

前端结果展示： 

3.2数据双向渲染 

代码展示： 

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>双向数据渲染</title>
</head>
<body>
<div id="app">
  <h1>{{message}}</h1>
  <!--
  1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
  2. v-model="hobby.val" 是数据的双向渲染,
      (1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
      (2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
  -->
  <input type="text" v-model="hobby.val"><br/><br/>
  <input type="text" :value="hobby.val"><br/><br/>
  <p>你输入的爱好是: {{hobby.val}}</p>
</div>
<script src="vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app", //创建的vue实例挂载到 id=app的div
    data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
      message: "hi, 输入你的爱好",
      hobby: {
        val: "吃饭"
      }
    }
  })
  console.log("vm=>", vm);
</script>
</body>
</html>

 3.2.1数据双向渲染练习题

要求：当在输入框中输入1.jpg/2.jpg/3.jpg的时候会显示不同的图片，用到数据绑定机制来实现

 

代码展示 

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据双向绑定机制练习题</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
请输入图片编号：<input type="text" v-model="id"><br>
  <img v-bind:src="id">
</div>

<script>
  let vm = new Vue({
    el:"#app",
    data:{
      id:"1.jpg"
    }
  })
</script>
</body>
</html>

4.事件绑定机制 

使用v-on进行事件处理,比:v-on:click表示处理鼠标点击事件。

事件调用的方法定义在vue对象声明的 methods节点中。

v-on:事件名可以绑定指定事件。

4.1演示案例

要求点击不同按钮，在控制台输出不同的信息 ，如下图

代码展示： 

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>事件处理</title>
</head>
<body>
<!--视图-->
<div id="app">
  <h1>{{message}}</h1>
  <!--
  1. v-on:click 表示我们要给button元素绑定一个click的事件
  2. sayHi() 表示绑定的方法, 在方法池 methods{} 定义的
  3. 底层仍然是dom处理
  4. 如果方法不需要传递参数，可以省略()
  5. v-on:click可以简写@, 但是需要浏览器支持
  -->
  <button v-on:click="sayHi()">点击输出</button>
  <button v-on:click="sayOk()">点击输出</button>

  <button v-on:click="sayHi">点击输出</button>
  <button @click="sayOk">点击输出</button>
</div>
<!--引入我们的vue.js-->
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>
  //这里创建的Vue实例, 你可以不去接收, 也可以接收
  //方便我们调试信息
  let vm = new Vue({
    el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
    data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
      message: "Vue事件处理的案例",
      name: "小名"
    },
    //
    // 1. 是一个methods属性, 对应的值是对象{}
    // 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池
    // 3. 这里需要小伙伴有js的基础=>java web第4章
    methods: {
      sayHi() {
        console.log("hi, 111");
      },
      sayOk() {
        console.log("ok, 222");
      }
    }
  })
</script>
</body>
</html>

4.2抓包处理 

我们上述案例中通过按钮，可以在控制台输出不同的内容，那么他和我们的传统js编程有什么区别呢？其实不然，他的核心底层依然是用传统的JavaScript实现的，不过不需要我们程序员去操作。下面我带大家去分析抓包处理一下。

控制台输入vm对象，可以看到vm对象的所有内容 

4.3注意事项

如果方法没有参数,可以省略()[需要浏览器支持]

v-on指令的写形式@[需要览器支持]

去相应挂载的vue实例下，查看可以绑定的事件

4.4事件绑定机制的练习题

 代码展示

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="add1()">增加1</button>
 <button v-on:click="add2()">增加2</button>
  <h2>你的按钮被点击了{{count}}次了</h2>
</div>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      count:0
    },
    methods:{
      add1:function (){
        this.count+=1
      },
      add2(){
        this.count+=2
      }
    }
  })
</script>
</body>
</html>

题目2:当点击按钮过后，会弹窗出对应的书名：运用到双向绑定。 

 代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue时间处理2</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <h1>{{message}}</h1>
  <input placeholder="请输入书名" v-model="bookName">
  <button v-on:click="show()">显示{{bookName}}</button>
</div>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      bookName:"开心超人",
      message:"Vue的事件绑定"
    },
    methods:{
      show(){
        alert("显示书名："+this.bookName);
      }
    }
  })
</script>
</body>
</html>

5.修饰符 

对于事件修饰符的详细信息请按官网查看

1.修饰符(Modifiers)是以(.)指明的后缀,指出某个指令以特殊方式绑定。

2.例如, .prevent修饰符告诉 v-on指令对于触发的事件调用 event.preventDefault()即阻 止事件原本的默认行为

例如：

.stop 组织事件继续传播

.prevent 阻止标签默认行为

.capture 使用事件获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进 行处理

.self 当在 event.target当前元素自身时触处理函数

.once 事件将会触一次

.passive 告诉浏览器你不想阻止事件的默认行为

案例：

演示 v-on:submit.prevent 的使用, 如果没有输入名字，控制台输出 "请输入名
字"，否则输出 "提交表单"

代码展示： 


<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue修饰符使用</title>
</head>
<body>
<div id="app">
    <!--
            1. 修饰符用于指出一个指令应该以特殊方式绑定。
            2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为
            3. 执行 程序员指定的方法
     -->
    <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
        妖怪名: <input type="text" v-model="monster.name"><br/><br/>
        <button type="submit">注册</button>
    </form>
    <p>服务返回的数据是{{count}}</p>
    <h1>修饰符扩展案例</h1>
    <button v-on:click.once="onMySubmit">点击一次</button><br/>
    <input type="text" v-on:keyup.enter="onMySubmit">
    <input type="text" v-on:keyup.down="onMySubmit">
    <input type="text" v-model.trim="count">//将前后默认的空格拿掉,比较实用
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {//数据池
            monster: {//monster数据(对象)的属性, 可以动态生成
            },
            count: 0
        },
        methods: {//方法池
            onMySubmit() {
                //console.log("我们自己的表单提交处理...");
                //"", null, undefined都是false
                if(this.monster.name) {
                    console.log("提交表单 name=", this.monster.name);
                    //这里，程序员就可以根据自己的业务发出ajax请求到后端
                    //得到数据后，在进行数据更新
                    this.count = 666;
                } else {
                    console.log("请输入名字..");
                }
            }
        }
    })
</script>
</body>
</html>

6.条件渲染(v-if/v-else-if/v-else/v-show)

6,1 用例题帮大家理解

解释一下条件渲染： v-if="awesome" 的时候，会去挂载到这个容器的vue的实例，去对应的数据池里面寻找awesome是否为真，如果为真就会显示h1标签相应的内容。就是我们编程中的if-else语句。

注意！在js中，false的情况有：0   undifine  null   “” 这些都是为false的情况。

写一个案例： 

当点击或不点击复选框的时候，会显示出不同的内容。

代码展示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <input type="checkbox" v-model="sel">是否同意该条款<br>
  <h1 v-if="sel">同意该条款</h1>
  <h1 v-else>不同意该条款</h1>
</div>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      sel:"fasle"
    }
  })
</script>
</body>
</html>

如果将v-if 用v-show去实现，如下代码所示：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <input type="checkbox" v-model="sel">是否同意该条款<br>
  <h1 v-show="sel">同意该条款</h1>
  <h1 v-show="!sel">不同意该条款</h1>
</div>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      sel:"fasle"
    }
  })
</script>
</body>
</html>

 6.2 v-if 和v-else的区别

1、v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建

2、v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建

3、使用建议：如果要频繁地切换，建议使用 v-show ；如果运行时条件很少改变，使用 v-if 较好

下面对我们的区别进行抓包的详细解释：

对于v-if是真正的实现组件的销毁和重建，所消耗的性能比较大【只有一个h1标签】

对于v-show 仅仅就是css样式的改变(也可以调用相应的vue实例去看底层的属性，加强理解)

【这里有两个h1标签】

6.3 相关案例练习(有兴趣可以试试看)

输入不同的成绩显示不同的优秀程度，并且当超出输入值的范围，进行文本框中的值进行修改 

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>练习题</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <h1>{{message}}</h1>
  请输入1-100的成绩：<input v-on:blur="s" type="text" v-model="score"><br>
  <p>您输入的成绩是{{score}}</p>
  <span v-if="score>=90">优秀</span>
  <span v-else-if="score>=80">良好</span>
  <span v-else-if="score>=70">中</span>
  <span v-else-if="score>=60">及格</span>
  <span v-else-if="score<60">不及格</span>
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            message:"条件渲染案例",
            score:0
        },
        methods:{
            s(){
                if(this.score > 100)
                {
                    this.score = 100;
                }
                if(this.score < 0)
                {
                    this.score = 0;
                }
            }
        }
    })
</script>
</body>
</html>

7.列表渲染 (v-for)

这里我们会去官网上查看

列表渲染官方文档

7,1 列表渲染相关方法 

7.2列表渲染应用实例 

1.输出列表相应的值，包括索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
  <li v-for="(item,index) in array">
    {{item.message}}--{{index}}
  </li>
</ul>
</div>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      mes:"列表渲染技术",
      array:[
        {message:1},
        {message:2},
        {message:3}
      ]
    }
  })
</script>

</body>
</html>

2.遍历输出数组中各个对象的属性值 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
<table width="400px" border="1=px">
 <tr v-for="item in array">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
     <td>{{item.price}}</td>
 </tr>
</table>
</div>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      mes:"列表渲染技术",
      array:[
        {id:1,name:"小王",price:200},
        {id:2,name:"小红",price:400},
        {id:3,name:"小明",price:300}
      ]
    }
  })
</script>

</body>
</html>

8.组件化编程 

1.    在大型应用开发的时候，页面可以划分成很多部分，往往不同的页面，也会有相同的部 分。例如可能会有相同的头部导航。 2.    但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不 同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发
组件 (Component) 是 Vue.js 最强大的功能之一 ( 可以提高复用性 [1. 界面 2. 业务处理 ]) 组件也是一个 Vue 实例，也包括∶ data 、 methods 、生命周期函数等 组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 对于全局组件，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件 data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象 / 数据

8.1 全局组件

全局组件就相当于java中的一个类，当你用到该组件的时候，就相当于创建了一个实例，里面的数据是独占的，不是共享的，用的vue实例的数据池是共享的。

有许多微小的差别具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件化编程-全局组件</title>
</head>
<body>
<div id="app">
  <h1>组件化编程-全局组件</h1>
  <!--使用全局组件-->
  <counter></counter>
  <br/>
  <counter></counter>

</div>


<script src="vue.js"></script>
<script>
  //1、定义一个全局组件, 名称为 counter
  //2. {} 表示就是我们的组件相关的内容
  //3. template 指定该组件的界面, 因为会引用到数据池的数据，所以需要是模板字符串
  //4. 要把组件视为一个Vue实例，也有自己的数据池和methods
  //5. 对于组件，我们的数据池的数据，是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式
  //6. 这时我们达到目前，界面通过template实现共享,业务处理也复用
  //7. 全局组件是属于所有vue实例，因此，可以在所有的vue实例使用
  Vue.component("counter", {
    template: `<button v-on:click="click()">点击次数= {{count}} 次【全局组件化】</button>`,
    data() {//这里需要注意，和原来的方式不一样!!!!
      return {
        count: 10
      }
    },
    methods: {
      click() {
        this.count++;
      }
    }
  })
  //创建Vue实例，必须有
  let vm = new Vue({
    el: "#app"//Vue实例的挂载点
  })


</script>
</body>
</html>

8.2局部组件 

局部组件：不同于全局组件，局部组件是要引入到某个vue实例中，由挂载了这个vue实例的容器去使用（可以将局部组件放入到js文件中，当我们要用到该组件的时候就导入包即可）


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件化编程-局部组件</title>
</head>
<body>
<div id="app">
  <h1>组件化编程-局部组件</h1>
  <!--使用局部组件 ,该组件是从挂载到app的vue中的-->
  <my_counter></my_counter><br/>
  <my_counter></my_counter><br/>
  <my_counter></my_counter><br/>
</div>

<script src="vue.js"></script>
<script>

  //定义一个组件, 组件的名称为 buttonCounter
  //1. 可以把常用的组件，定义在某个commons.js中 export
  //2. 如果某个页面需要使用， 直接import
  const buttonCounter = {
    template: `<button v-on:click="click()">点击次数= {{count}} 次【局部组件化】</button>`,
    data() {//这里需要注意，和原来的方式不一样!!!!
      return {
        count: 10
      }
    },
    methods: {
      click() {
        this.count++;
      }
    }
  }

  //创建Vue实例，必须有
  let vm = new Vue({
    el: "#app",//Vue实例的挂载点
    components: { //引入/注册某个组件, 此时my_counter就是一个组件, 是一个局部组件,他的使用范围在当前vue
      'my_counter': buttonCounter
    }
  })

</script>
</body>
</html>

 8.3注意事项

1. 如果方法体 , 只有简单的语句 , 比如 count++, 那么可以进行简写 如： < button v-on :click ="count++" > 点 击 次 数 = {{count}} 次< button> 2. 组件定义需要放置在 new Vue() 前，否则组件注册会失败 3. 组件也是一个 Vue 实例，因此它的定义是也存在∶ data、methods、生命周期函数等
4. data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象/数据
5. 组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 6. 全局组件是属于所有vue实例，因此，只有被vue实例挂载了过后才能使用全局组件

9.生命周期和钩子函数

1. Vue 实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载 DOM 、渲染 - 更新 - 渲染、卸载等一系列过程，我们称为 Vue 实例的生命周期 2. 钩子函数 ( 监听函数 ): Vue 实例在完整的生命周期过程中 ( 比如设置数据监听、编译模 板、将实例挂载到 DOM 、在数据变化时更新 DOM 等 ), 也会运行叫做生命周期钩子的函 数 3. 钩子函数的作用 就是在某个阶段 , 给程序员一个做某些处理的机会

 vue实例的生命周期图

 解释生命周期图：

1 在new vue()的时候，vue实例被创建，他会在内存里面维护一个编译模版。此时在beforeCreate只有比如data数据池，methods方法池的加载，但此时并没有具体数据的初始化。

2 在created的时候里面的数据才被真正的初始化

3 接下来判断vue实例是否有el属性，并且有template模版，有的话，在内存的编译模版里面，先将template模版进行解析，形成内存编译模版结构，也就是vue在内存里面维护了一个这样的模版，但是此时并没有将内存模版挂载到div上所以用户看不到。

如果没有template就会编译一些vue的一些基础的属性。

在beforeMount前都没有挂载到div上，前端界面看不到，但是在内存里面已经编译好了

4 在Mount过后，将内存的模版挂载到前端界面，此时用户看到了渲染后的结果

5. 在Mount时，会时刻监听vue实例中的数据池是否发生变化，如果发生变化在beforeUpdate函数中，就会将内存中的数据加以改变，在重新将模版挂载到div上，updated函数进行更新渲染。

6.就是实例销毁时，调用beforeDestory，和destory函数。

以上就是一个完整的vue的生命周期，请参照链接的图理解，讲的不好，多多指教！

 下面是老师解读！

1) new Vue()
new 了一个 Vue 的实例对象，此时就会进入组件的创建过程。
2) Init Events & Lifecycle
初始化组件的事件和生命周期函数
3) beforeCreate
组件创建之后遇到的第一个生命周期函数，这个阶段 data 和 methods 以及 dom 结构都未
被初始化，也就是获取不到 data 的值，不能调用 methods 中的函数
4) Init injections & reactivity
这个阶段中, 正在初始化 data 和 methods 中的方法
5) created
- 这个阶段组件的 data 和 methods 中的方法已初始化结束，可以访问，但是 dom 结构未
初始化，页面未渲染
- 老师说明：在这个阶段，经常会发起 Ajax 请求
6) 编译模板结构(在内存)
7) beforeMount
当模板在内存中编译完成，此时内存中的模板结构还未渲染至页面上，看不到真实的数据
8) Create vm.$el and replace ‘el’ with it
这一步，再在把内存中渲染好的模板结构替换至真实的 dom 结构也就是页面上
9) mounted
此时，页面渲染好，用户看到的是真实的页面数据， 生命周期创建阶段完毕，进入到了运
行中的阶段
10) 生命周期运行中
10.1 beforeUpdate
当执行此函数，数据池的数据新的，但是页面是旧的
10.2 Virtual DOM re-render and patch
根据最新的 data 数据，重新渲染内存中的模板结构，并把渲染好的模板结构，替换至页面
上
10.3 updated
页面已经完成了更新，此时，data 数据和页面的数据都是新的
11) beforeDestroy
当执行此函数时，组件即将被销毁，但是还没有真正开始销毁，此时组件的 data、methods
数据或方法 还可被调用
12) Teardown…… 注销组件和事件监听
13) destroyed
组件已经完成了销毁

对重要阶段的钩子函数进行案例分析 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--这里可以视为用户看到的页面-对应前面讲解的页面dom-->
<div id="app">
  <span id="num">{{num}}</span>
  <button @click="num++">赞！</button>
  <h2>{{name}}，有{{num}}次点赞</h2>
</div>
<script src="vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {//数据池
      name: "kristina",
      num: 0
    },
    methods: {
      show() {
        return this.name;
      },
      add() {
        this.num++;
      }
    },
    beforeCreate() {//生命周期函数-创建vue实例前
      console.log("=============beforeCreate==========");
      console.log("数据模型/数据池的数据是否加载/使用?[no]", this.name, " ", this.num);
      //console.log("自定义方法是否加载/使用?[no]", this.show());
      console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
      console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText);
    },
    created() {//生命周期函数-创建vue实例
      console.log("=============created==========");
      console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
      console.log("自定义方法是否加载/使用?[yes]", this.show());
      console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
      console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText);
      //可以发出Ajax
      //接收返回的数据
      //再次去更新data数据池的数据
      //编译内存模板结构
      //.....

    },
    beforeMount() {//生命周期函数-挂载前
      console.log("=============beforeMount==========");
      console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
      console.log("自定义方法是否加载/使用?[yes]", this.show());
      console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
      console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText);

    },
    mounted() {//生命周期函数-挂载后
      console.log("=============mounted==========");
      console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
      console.log("自定义方法是否加载/使用?[yes]", this.show());
      console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
      console.log("用户页面dom是否被渲染?[yes]", document.getElementById("num").innerText);

    },
    beforeUpdate() {//生命周期函数-数据池数据更新前
      console.log("=============beforeUpdate==========");
      console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
      console.log("自定义方法是否加载/使用?[yes]", this.show());
      console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
      console.log("用户页面dom数据是否被更新?[no]", document.getElementById("num").innerText);
      //验证数据==>修正
      // if(this.num < 10 ) {
      //     this.num = 8;
      // }
    },
    updated() {//生命周期函数-数据池数据更新后
      console.log("=============updated==========");
      console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
      console.log("自定义方法是否加载/使用?[yes]", this.show());
      console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
      console.log("用户页面dom数据是否被更新?[yes]", document.getElementById("num").innerText);

    }

  })
</script>
</body>
</html>

抓包分析 

10.vue Cli脚手架模块化开发 

目前开发模式的问题 1. 开发效率低 2. 不够规范 3. 维护和升级 , 可读性比较差 vue Cli脚手架可以帮我们搭建框架，程序员只需要将框架的内容写完就好了。易于开发和维护。

10.1用webpack来创建vue Cli脚手架项目 

最后看到的界面如下所示： 

10.2 Vue Cli中项目结构的分析 (如图所示)

!!!10.3Vue请求页面的执行流程 

 

由上述三个图片，可以了解vue Cli脚手架请求页面的流程：

首先就是main,js是程序的入口，创建了一个vue的实例，并将该实例挂载到id=app的容器中。

再去router路由找到目录router/index,js：上面导出默认的路由（可以看成组件默认导出），路由中的component组件去HelloWord.vue中寻找里面就是对文字及其内容的一个渲染、。最后渲染后的路由界面，会以路由视图的形似返回到vue实例中。

vue实例中的component和template模版是这个vue实例的渲染模版，在里面就是一张图片。当vue实例在内存中维护的编译模版完成后，将vue实例挂载到index.html前端界面中进行挂载。

11. vue-ElementUI

Element-UI的官网

 ElementUI 是组件库，网站快速成型工具

 

11.1安装Element-ui的指令

 安装 element-ui 组件库, cmd 下进入到项目，指令 npm i element-ui@2.12.0

 

 

10.2初步使用Element-UI应用实例

1.  首先第一步，要引入Element-UI

2. 比如我要引用提供的icon图标

3.  在vue组件的代码中引入上述代码运行即可得到

 

希望小伙伴多多关注！ 

 

 

 

 

 

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17038.html
标签
intellij-idea
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

jquery.datetimepicker无法添加清除按钮的问题

2024-06-13 21:06:58

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

vue使用datav echarts

2024-09-06 00:09:381000
3

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
4

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
5

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
6

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
7

npm的使用

2024-08-18 00:08:131000
8

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
9

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
10

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！