vue实例、指令、生命周期

曾经终败给现在 2022-11-21 09:53 315阅读 0赞

vue实例、指令、生命周期

本章重点

1、生命周期

2、插值

3、指令

一、创建一个实例vue实例

每一个vue应用都是通过vue函数创建一个新的vue实例开始的

语法: ver vm = new Vue({

​ //选项

})

当我们创建一个vue实例,我们就可以传入一个选项对象。

二、数据与方法

当一个vue是实例被创建的时候,它的data对象中所有的属性加入vue的响应式系统中,当这些属性值发生改变的时候,系统就会产生相应(匹配、更新我们的值)

  1. <script>
  2. var data = {a:'张国荣'}
  3. var vm= new Vue({
  4. data:data
  5. })
  6. </script>

当这些数据发生改变的时候,视图会进行重新渲染。注意:只有当实例被创建的时候,data中存在的属性才是响应式的。

三、vue的生命周期

什么是生命周期

从vue实例创建、运行、销毁期间,各种发生各种各样的事件,这些统称生命周期。

生命周期钩子:

就是生命周期事件的别名。

生命周期钩子 == 生命周期函数 == 生命周期事件

创建事件的生命周期函数:

beforeCreate :实例刚被创建出来,data或者methods属性没有初始化

created:实例在内存中创建成功,打他或者methods也已经OK

beforeMount:完成模板编译

beforeUpdate:状态更新之前执行的函数

beforeDestroy:实例销毁之前执行的函数

  1. <script>
  2. new Vue({
  3. data:{
  4. a:1
  5. },
  6. created:function(){
  7. console.log('a的值:'+this.a)
  8. }
  9. })
  10. </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cEkjqhy2-1604128412462)(C:\Users\ADMINI~1\AppData\Local\Temp\1564039512446.png)]

四、模板语法

vue.js 使用了基于html的模板语法,允许开发者声明式的将DOM绑定到底层vue实例的数据。

插值

文本:

文本插值语法 {{msg}}将实例对象上的值进行代替,绑定对象上的msg属性发生改变,插值处内容也会更新。

原始html:

双大括号会将数据解析为普通文本,并非html代码,输出html代码用到一个指令 : v-html

  1. <body>
  2. <div id="aaa">{
  3. {msg}}
  4. <span v-html="msg"></span>
  5. </div>
  6. <script>
  7. new Vue({
  8. el:"#aaa",
  9. data:{
  10. msg:"<span style='color:red'>111</span>"
  11. }
  12. })
  13. </script>
  14. </body>

vue指令

带有-v前缀的特殊特性。指令特性的值预期是单个JavaScript表达式(v-for例外)指令的职责,当表达式的值改变的时候,会产生连带的影响,响应式的作用于DOM。

v-if:根据表达式的真假,删除或者插入元素的。

  1. <body>
  2. <div id="app">
  3. <h2 v-if="yes">yes</h2>
  4. <h2 v-if="no">no</h2>
  5. <h2 v-if="age >= 18">age:{
  6. {age}}</h2>
  7. </div>
  8. <script>
  9. new Vue({
  10. el:"#app",
  11. data:{
  12. yes:true,
  13. no:false,
  14. age:12
  15. }
  16. })
  17. </script>
  18. </body>

v-show也是条件渲染指令,使用v-show指令的元素始终会被渲染到html页面,它只是简单的为元素设置css的style属性。

  1. <div id="app">
  2. <h2 v-show="yes">yes</h2>
  3. <h2 v-show="no">no</h2>
  4. <h2 v-show="age >= 18">age:{
  5. {age}}</h2>
  6. </div>
  7. <script>
  8. new Vue({
  9. el:"#app",
  10. data:{
  11. yes:true,
  12. no:false,
  13. age:20
  14. }
  15. })

作业:

1、了解vue的生命周期

2、使用vue的插值

ue({
el:”#app”,
data:{
yes:true,
no:false,
age:20
}
})

  1. ## 作业:
  2. 1、了解vue的生命周期
  3. 2、使用vue的插值
  4. 3v-no v-ifv-bind

发表评论

表情:
评论列表 (有 0 条评论,315人围观)

还没有评论,来说两句吧...

相关阅读

    相关 VUE 实例生命周期

    什么是VUE生命周期 从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! vue把整个生命周期划分为 创建 、更新、挂载、销毁 等

    相关 Vue 实例生命周期

    一、生命周期 Vue 应用都是通过 [Vue 实例][Vue](ViewModel)完成的,Vue 创建实例需要一系列的初始化动作,需要设置数据监听、编译模板、将实例挂载

    相关 Vue实例生命周期

    实例生命周期 实例生命周期钩子 生命周期图示 实例生命周期钩子   每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、