0
点赞
收藏
分享

微信扫一扫

Vue.js基础特性、生命周期及常用指令


目录

​​一、Vue构造选项​​

​​el根标签​​

​​data数据对象​​

​​methods定义方法​​

​​二、生命周期​​

​​三、常用指令​​

一、Vue构造选项

选项

说明

el

唯一根标签,决定Vue实例会管理哪一个DOM节点

data

Vue实例对应的数据对象

methods

定义Vue实例的方法,可以在其他地方调用,也可以在指令中使用

computed

定义Vue实例的计算属性,可以在其他地方调用,也可以在指令中使用,本质上是一个属性而不是一个函数,在电泳时不用加小括号

components

定义Vue实例的子组件

filters

定义Vue实例的过滤器

watch

监听数据变化,观察和响应Vue实例上的数据变动

el根标签

        在创建Vue实例时,必不可少的一个选项就是el。el表示唯一根标签,用于指定一个页面中已存在的DOM元素来挂载Vue实例,即通过class或id选择器将页面DOM元素与Vue实例进行绑定。

data数据对象

        data是Vue实例的数据对象,Vue.js会将data对象的属性转换为getter/setter,从而让data属性能够响应数据变化,格式如下:

var app = new Vue( { 数据 } )

(1)以对象(Object)的形式,代码如下:

<div id="app">{{content}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"Mustache表达式通过data为对象获取content的值"
}
})
</script>

(2)以函数(function)的形式,代码如下:

<div id="app">{{content}}</div>
<script>
var app = new Vue({
el:"#app",
data:function(){
return{
content:"Mustache表达式通过data为对象获取content的值"
}
}
})
</script>

methods定义方法

        methods用来定义Vue实例中的方法,可以通过Vue实例直接访问这些方法。通过methods定义的方法还可以作为页面中的事件处理方法使用,一旦事件被触发,即执行相应的方法进行处理。基本语法如下:

<script>
var app = new Vue({
methods:{
方法名:function(){ }
}
})
</script>

演示单击按钮修改文本:

<p>单击按钮修改文本</p>
<div id="app">
<p>{{msg}}</p>
<button @click="doChange">请单击</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"初始化文本!"
},
methods:{
doChange:function(){
this.msg="新的文本!" //改变data中msg属性的值
}
}
})
</script>

执行结果对比

Vue.js基础特性、生命周期及常用指令_javascript

Vue.js基础特性、生命周期及常用指令_Vue_02

二、生命周期

 一个Vue实例完整的生命周期可以分为4个阶段:

初始化阶段、模板编译阶段、挂载阶段、卸载阶段

生命周期流程详细介绍如下:

(1)实例化Vue: new Vue()

(2)初始化事件和生命周期:init events 和 init lifecycle

(3)执行beforeCreate钩子函数

(4)挂载数据(属性赋值)

(5)执行Created钩子函数

(6)检查

(7)执行beforeMount钩子函数

(8)模板编译

(9)执行Mounted钩子函数

(10)执行before Update钩子函数

(11)执行updated钩子函数:Vue实例销毁之前

(13)执行destroyed钩子函数:Vue实例销毁后

三、常用指令

1、v-text

        v-text用来在DOM元素内部插入文本内容,该指令以文本的方式更新元素的内容,即使是HTML代码,它也只当作普通字符串处理,不会解析标签,与插值表达式作用相同。

<div id="app" v-text="msg"></div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hello,v-text!"
}
})
</script>

 

Vue.js基础特性、生命周期及常用指令_javascript_03

注意:如果同时显示用户前台数据,那么就需要用插值表达式;如果只是单独显示Vue实例里的数据,建议使用“v-text”指令。

2、v-html

        v-html用来在DOM元素内部插入HTML代码内容

<div id="app" v-html="msg"></div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"<h1>Hello,v-html!</h1>"
}
})
</script>

Vue.js基础特性、生命周期及常用指令_数据_04

可以看出v-text与v-html指令不同的是,v-html绑定的数据可以是HTML结构 

3、v-cloak

        v-cloak指令可以隐藏未编译的Mustache标签直到关联实例结束编译

<style>
[v-cloak]{
display:none;
}
</style>
<div id="app"v-cloak>{{msg}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hello,v-cloak!"
}
})
</script>

Vue.js基础特性、生命周期及常用指令_数据_05

 4、v-bind

        v-bind指令用于实现单向动态数据绑定

<div id="app">
<input v-bind:value="msg">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hello,v-bind!"
}
})
</script>

Vue.js基础特性、生命周期及常用指令_前端_06

注意:当改变app.msg的值时,页面文本框中的数据会自动更新,但不能实现视图驱动数据变化,所以v-bind指令时单向数据绑定,而不是双向数据绑定

v-bind可以省略v-bind,简写为一个冒号“ :

<!-- 完整写法 -->
<img v-bind:src="src"></img>
<!-- 简写 -->
<img:src="src"></img>

5、v-on

        v-on指令用来绑定事件监听器

<div id="app">
<p>{{msg}}</p>
<button v-on:click="sayHello">请单击</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hi"
},
methods:{
sayHello:function(){
this.msg="Hello,v-on!"
}
}
})
</script>

Vue.js基础特性、生命周期及常用指令_数据_07

Vue.js基础特性、生命周期及常用指令_数据_08

@”简写:

<!-- 完整写法 -->
<a v-on:click="do"></a>
<!-- 简写 -->
<a @click="do"></a>

 所有支持Vue.js的浏览器中都能正确解析简写方式,并且它们不会出现在最终渲染的标签中

举报

相关推荐

0 条评论