（一）vue基础知识总汇

最新推荐文章于 2023-05-17 15:47:50 发布

伪成年_young

最新推荐文章于 2023-05-17 15:47:50 发布

阅读量216

点赞数

文章标签： vue基础知识

本文链接：https://blog.csdn.net/u012552674/article/details/100025944

版权

Vue是一套用于构建用户界面的渐进式框架。Vue被设计为自底向上逐层应用。
Vue的核心库只关注视图层，不仅易上手，还便于与第三方库或既有项目整合。

Vue实例
一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套、可复用的组件树组成。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 引入vue文件 -->
  <script src="./vue2.js"></script>
</head>
<body>
  <!-- 如果超过vue实例的管辖范围，这个{{}}作用就会失效 -->
  <div>{{msg}}</div>
  <div id="app">
    <!-- 5. 展示数据：通过插值表达式{{}} ，作用是专门用来渲染文本-->
    <h1>{{msg}}</h1>
  </div>
  <script>
    // 2. 创建vue实例，作用：他会监管我们的html代码
    var vm = new Vue({
      // 3. 通过一个el属性来指定vue实例的监管范围,后面跟一个id
      el: '#app',
      // 4. 用data属性将要展示的变量存起来,data后面跟一个对象
      data: {
        msg: 'hello world'
      }
    })
  </script>
</body>
</html>

实例声明周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程。在这个过程中也会运行一些叫做生命周期钩子的函数，

给用户在不同阶段添加自己代码的机会。

new Vue({
    data:{
        a:1
    },
    created:function(){
        //this指向vm实例
        console.log('a is:'+this.a)
    }
})

也有其他的钩子，在实例生命周期的不同阶段被调用，如：mounted、updated、和destroyed。

生命周期钩子的this上下文指向调用它的Vue实例。不要在选项属性或回调上使用箭头函数。

生命周期

vue生命周期最常用的钩子函数包括：

1、在beforeCreate和created钩子函数之间的生命周期

在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到created的时候数据已经和data属性进行绑定。

2、created和beforeMount钩子函数之间的生命周期

在这个生命周期，先判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，

也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。

3、beforeMount和mounted钩子函数间的生命周期

给vue实例对象添加$el成员，并且替换掉挂在DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el还是undefined。

4、mounted

在mounted之前h1通过{{message}}进行占位，因为此时还有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。

在mounted之后可以看到h1中的内容发生变化。

5、beforeUpdate和updated钩子函数间的生命周期

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

6、beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁前调用。在这一步，实例仍然完全可用。

destroyed钩子函数在vue实例销毁后调用。调用后，vue实例指示的所有东西都会解绑定，又有的事件监听器会被移除，子实例也会被销毁。

beforeCreate()——实例初始化自动调用
created()——实例创建后调用
beforeMount()——在mount之前运行,元素已经加载，但是属性值没渲染
mounted()——在编译结束时调用,加载完成
beforeUpdate()——在实例挂载后，再次更新实例时调用,属性值未渲染
updated()——在实例挂载之后，再次更新实例并更新完DOM。结构后调用,属性值修改后
beforeDestroy()——在开始销毁实例时调用
destroyed()——在实例销毁后调用
actived()——在动态组件初始化渲染的过程中调用
deactived()——在动态组件移除的过程中调用

伪成年_young

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（一）vue基础知识总汇

Vue是一套用于构建用户界面的渐进式框架。Vue被设计为自底向上逐层应用。Vue的核心库只关注视图层，不仅易上手，还便于与第三方库或既有项目整合。Vue实例一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套、可复用的组件树组成。<!DOCTYPE html><html lang="en"><head> <met...
复制链接

扫一扫