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实例完整的生命周期可以分为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实例里的数据,建议使用“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>
可以看出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>
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>
注意:当改变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>
v-on可以直接使用“@”简写:
<!-- 完整写法 -->
<a v-on:click="do"></a>
<!-- 简写 -->
<a @click="do"></a>
所有支持Vue.js的浏览器中都能正确解析简写方式,并且它们不会出现在最终渲染的标签中
Vue.js基础特性、生命周期及常用指令相关推荐
- vue.js框架的生命周期:常用钩子函数
//组件实例化之前执行的函数 beforeCreate:function () { alert("组件实例化之前执行的函数") }, //组件实例化完毕执行的函数 created: ...
- 【Vue.js学习】生命周期及数据绑定
一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({el:"#app", beforeCreate: function(){console. ...
- Vue.js函数的生命周期
一.vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 二.vue.js里面的钩子函数 钩子函数 昰什么 相当于回调函数 即让开发者在特定的时候 执行自定义逻辑 1.自定义 ...
- vue:基础:生命周期
1.vue 的生命周期[8个,作用:更好的实现逻辑] [创建前后.加载前后.更新前后.销毁前后] beforeCreated:在实例初始化之后,当前阶段 data.methods.watch.comp ...
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- maven生命周期及常用指令
Maven有三套相互独立的生命周期,请注意这里说的是"三套",而且"相互独立",初学者容易将Maven的生命周期看成一个整体,其实不然. 这三套生命周期分别是 ...
- Vue 进阶系列丨生命周期
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
- [Vue.js] 基础 -- Vue常用特性
Vue常用特性 常用特性概览 表单操作 自定义指令 计算属性 过滤器 侦听器 生命周期 表单操作 基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 rad ...
- # vue.js 之 对vue.js基础理解
vue.js 之 对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
最新文章
- An Edge-Guided Image Interpolation Algorithm via Directional Filtering and Data Fusion【翻译】
- 网站robots.txt探测工具Parsero
- 【记录】 安装qflow on ubuntu 16.04
- ElasticSearch启动报错,bootstrap checks failed
- 交换机接口trunk的配置和vlan的划分
- moosefs分布式文件系统
- SAP Spartacus 如何取得某个table字段对应的Angular Component
- PLSQL Developer远程连接oracle数据库
- spring mvc学习(8):springmvc常用注解代码
- c++ primer 第六版 pdf_A3N630	塑壳断路器如何更换.pdf
- Java案例:Log4J基本使用
- 计算机办公应用总结,2017年办公自动化实习报告总结
- ubuntu下vim配置成c++开发编辑器
- Building a Better Vocabulary: Lecture 1 Five Principles for Learning Vocabulary
- java百度云盘,看完直呼内行
- Vue项目使用v-drag实现拖拽功能
- 广东最美的历史古村落,再不去就没了
- 高效率科研神器——小软件、大能量
- 回忆2018年高教杯数学建模大赛
- 图片的高频与低频分量 初识 与 相关博客