1.Vue实例和模板语法

本文介绍了Vue实例的创建和数据双向绑定原理,探讨了Vue实例的常用选项如el、data、computed和methods,并强调了ES6简写的使用。同时,讲解了Vue实例的生命周期钩子,包括beforeCreate、created、beforeMount等。在模板语法部分,阐述了Vue的插值、指令(如v-if、v-bind)以及动态参数的使用,最后提到了Vue的虚拟DOM概念。
摘要由CSDN通过智能技术生成

1.Vue实例和模板语法

Vue实例

1.如何创建一个Vue实例

var vue对象名 = new Vue({
    //选项:如下面这些
    el:,
    data:{},
    methods:{},
    computed:{},
    //...
});

2.Vue实例是怎么实现数据的双向绑定的?

  • 视图层:获取Vue实例中data中对象的属性

  • 模型层: 在Vue实例的data中定义对象属性,编写值

  • 如何更改这个对象的值?使用vue对象名.属性 = 新的值

  • 只有在一种情况下不可更改对象的值:Object.freeze(对象名);

3.Vue中有哪些常用的 选项(属性和方法)?

1.el:绑定的id或class标签

2.data:元素的数据

3.computed:计算属性

4.methods:方法

注意点:

  • 1.使用这些属性和方法时候,es6的对象简写可以用上,不要看不懂!

  • 2.调用的是属性还是方法?注意区分 computed是属性 methods是方法

4.了解实例生命周期中的钩子

beforeCreate:

在Vue实例创建之前执行的函数

created:

实例创建完成后调用

beforeMount:

在Vue实例创建之后,数据未渲染负责接管DOM之前执行的函数

muonted:

el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。

beforeDestroy:

实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

destroyed:

Vue实例在执行vm.destroyed()命令之后,销毁之后执行的函数

beforeUpdate:

在Vue实例数据更新之前执行的函数

updated:

在Vue实例数据更新之后执行的函数

模板语法

1.Vue中如何进行插值?

三种方式:

1.文本:{{data中对象的属性}} //Mustache

2.原始HTML:v-html="data中对象的属性"

3.javascript表达式: {{javascript表达式}} //注意点:必须是表达式,否则不生效!

2.Vue的指令是什么?

1.是什么?

指的带有"v-"前缀的特殊特性!(值预期是单个表达式–v-for例外)

2.作用?

当表达式的值改变时,将其产生的连带影响响应式的作用于DOM

3.常见指令:

​ v-if:根据表达式布尔值的真假来产生影响

​ v-bind:用于响应式的更新HTML特性

​ v-on:1.用于监听DOM事件??后面再学

3.Vue中一些指令缩写代表的是什么?

v-bind: 缩写之后(:)

v-on: 缩写之后(@)

4.Vue中的动态参数?

Vue2.6.0版本开始,可以用方括号括起来的javascript表达式作为一个指令的参数

5.Vue中的虚拟DOM是什么?

虚拟DOM其实就是JavaScript对象,以JavaScript对象的形式去添加DOM元素

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值