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


目录
相关文章
|
2天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
54 7
使用 Vue CLI 脚手架生成 Vue 项目
|
3天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
3天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
9 1
|
5天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
19 0
|
5天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
JavaScript
vue实例-vue官网学习笔记
1、构造器 ①每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的: var vm=new Vue({ //选项 }); ②在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板挂载元素、方法、生命周期钩子等选项。
880 0
|
11天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
5天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
13 3
|
5天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
19 2
|
5天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
13 2