vue实例、指令、生命周期

简介: vue实例、指令、生命周期

vue实例、指令、生命周期

本章重点

1、生命周期

2、插值

3、指令

一、创建一个实例vue实例

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

语法: ver vm = new Vue({
 //选项
})

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

二、数据与方法

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

<script>
    var data = {a:'张国荣'}
    var vm= new Vue({
      data:data
    })
  </script>

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

三、vue的生命周期

什么是生命周期

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

生命周期钩子:

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

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

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

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

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

beforeMount:完成模板编译

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

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

<script>
  new Vue({
    data:{
      a:1
    },
    created:function(){
      console.log('a的值:'+this.a)
    }
  })
  </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

<body>
    <div id="aaa">{{msg}}
      <span v-html="msg"></span>
    </div>
  <script>
  new Vue({
    el:"#aaa",
    data:{
      msg:"<span style='color:red'>111</span>"
    }
  })
  </script>
  </body>

vue指令

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

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

<body>
  <div id="app">
    <h2 v-if="yes">yes</h2>
    <h2 v-if="no">no</h2>
    <h2 v-if="age >= 18">age:{{age}}</h2>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        yes:true,
        no:false,
        age:12
      }
    })
  </script>
  </body>

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

<div id="app">
    <h2 v-show="yes">yes</h2>
    <h2 v-show="no">no</h2>
    <h2 v-show="age >= 18">age:{{age}}</h2>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        yes:true,
        no:false,
        age:20
      }
    })

作业:

1、了解vue的生命周期

2、使用vue的插值

ue({
el:"#app",
data:{
yes:true,
no:false,
age:20
}
})
## 作业:
1、了解vue的生命周期
2、使用vue的插值
3、v-no 、v-if、v-bind


目录
打赏
0
1
1
0
9
分享
相关文章
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
68 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
vue 的实例生命周期
vue 的实例生命周期
71 0
08Vue - Vue实例(实例生命周期)
08Vue - Vue实例(实例生命周期)
48 0
08Vue - Vue实例(实例生命周期)
Vue实例的生命周期详解,从创建到销毁全过程
Vue的生命周期一直以来都是重中之重,虽然在实际开发中经常用到的就几个,但是你对生命周期的掌握程度决定着你写的程序好不好,并且这一块也一直是面试Vue部分的重要考点。
370 0

热门文章

最新文章