Vue基础第二章
1、数据绑定与数据声明
Vue中的数据绑定就是让与Vue实例绑定的DOM节点或script标签内的变量之间数据更新互相影响，即数据绑定后Vue实例的数据修改会使DOM节点的数据或者script标签内的变量的数据一起修改，反之亦然，实现数据绑定的方式为Vue中的v-model指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--v-model跟v-for一样是Vue的指令，v-model用于数据绑定，数据绑定可以是Vue实例与HTML标签间的数据绑定，也可以是Vue实例与script标签内的变量间的数据绑定-->
<!--无论是HTML标签还是script标签内的变量，只要与Vue实例存在数据绑定，那么数据绑定双方中任意一方的数据改动都会使另一方的数据同时产生变化-->
<!--此例中如Vue数据声明为显式声明则数据绑定双方为Vue实例与input标签，如Vue数据声明为隐式声明则数据绑定为input标签与Vue实例，Vue实例与变量myData，此时三者中任意一方修改数据，另外两方都会随之修改数据-->
<input type='text' v-model="name" placeholder="你的名字">
<h1>你好，{{ name }}</h1>
</div>
<script>
var myData={
name:'魅力宁波'
}
var app=new Vue({
el:'#app',
<!--在data属性中引用外部变量即为隐式声明数据，此时该变量与Vue实例间存在数据绑定-->
<!-- data:myData -->
<!--直接将数据写在data属性中即为显式声明数据-->
data:{
name:''
}
})
</script>
</body>
</html>
2、Vue实例生命周期
每个Vue实例都存在一个创建前、创建后、挂在前、挂载后、更新前、更新后、销毁前、销毁后的生命周期，每一个生命周期阶段都有对应的钩子属性用于在对应的生命周期阶段做一些操作，它们分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。在所有的生命周期钩子属性中最常用的为created、mounted和beforeDestroy
完整的生命周期实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<divid="app">
{{data}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
data:"aaaaa",
info:"nono"
},
<!--此时Vue实例未创建，输出分别为'undefined','undefined'-->
beforeCreate:function(){
console.log("创建前========")；
console.log(this.data)；
console.log(this.$el)；
},
<!--此时Vue实例已创建，输出分别为'nono','undefined'-->
created:function(){
console.log("已创建========")；
console.log(this.info)；
console.log(this.$el)；
},
<!--此时Vue实例未挂载至HTML标签，输出分别为'nono','<section id="app">{{ data }}</section>',此时$el中的数据还未渲染-->
beforeMount:function(){
console.log("mount之前========")；
console.log(this.info)；
console.log(this.$el)；
},
<!--此时Vue实例已挂载至HTML标签上，输出分别为'nono','<section id="app">aaaaa</section>',此时$el中的数据已渲染完毕-->
mounted:function(){
console.log("mounted========")；
console.log(this.info)；
console.log(this.$el)；
},
<!--在Vue实例的数据被修改前比如在控制台执行'app.data=bbbbb'更新数据前，执行该步操作-->
beforeUpdate:function(){
console.log("更新前========"); },
<!--在Vue实例的数据被修改之后执行该步操作-->
updated:function(){
console.log("更新完成========");
},
<!--在Vue实例被销毁前比如在控制台执行'app.$destroy()'销毁Vue实例前，执行该步操作，输出分别为'nono','<section id="app">aaaaa</section>'-->
beforeDestroy:function(){
console.log("销毁前========")；
console.log(this.info)；
console.log(this.$el)；
},
<!--在Vue实例被销毁后执行该步操作，输出分别为'nono','<section id="app">aaaaa</section>',此时在控制台输出console.log(this.info),输出为'undefined'-->
destroyed:function(){
console.log("已销毁========")；
console.log(this.info)；
console.log(this.$el)；
}
})
</script>
</body>
</html>
3、Vue插值
插值就是将数据放到你指定的位置去显示，Vue有{{}}双花括号的插值方式和v-html指令的插值方式，花括号的方式只单纯的显示数据，而v-html则在遇到HTML的字符串时会将其转化为HTML标签进行显示而不是纯文本，具体示例如下
{{}}插值方式示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<divid="app">
<!--{{}}双花括号是Vue插值的一种方式，就是把Vue实例data属性中的数据放在花括号的位置显示-->
{{ date }}
<!--如果想将花括号显示出来可以用v-pre指令，此时date不会被替换为Vue实例中的数据-->
<span v-pre>{{ date }}</span>
</div>
<script>
var app=new Vue({
el:"#app",
<!--new Date()用于取当前的日期时间-->
data:{
data:new Date()
},
<!--在Vue实例挂载到HTML标签之后每隔一秒执行定时器更新data属性中的值，此处的this指向当前的Vue实例-->
mounted:function(){
var _this=this;
this.timer=setInterval(function() {
_this.date=new Date();
},1000);
},
beforeDestroy:function() {
if (this.timer) {
clearInterval(this.timer);
}
}
})
</script>
</body>
</html>
v-html插值示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--v-html指令用于将Vue实例data属性中的html字符串转换为HTML标签插入指定标签内部，这种插值方式容易遭到XSS攻击，所以需要将尖括号转义-->
<span v-html="link"></span>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
link:'<a href="#">这是一个链接</a>'
}
})
</script>
</body>
</html>
4、表达式
{{}}除了可以用于插值还可以用于一些简单的表达式运算，比如简单的算术运算、三元运算、链式方法调用执行，不能支持语句和流程控制，并且在花括号中只能调用Vue白名单中的全局变量如Math、Date，不能调用用户自定义的全局变量。
表达式示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--这是算术运算-->
{{ number / 10 }}
<!--这是三元运算-->
{{ isOK ？ '确定' : '取消' }}
<!--这是链式方法调用-->
{{ text.split(',').reverse().join(',') }}
<!--这是赋值语句-->
{{ var book='Vue.js实战' }}
<!--这是流程控制，必须改用三元运算-->
{{ if (ok) return msg }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
number:100,
isOK:false,
text:'123,456'
}
})
</script>
</body>
</html>
5、过滤器的定义与使用
过滤器在Vue示例的filters属性中定义，定义格式为过滤器名:过滤器函数，使用时在数据后用|符号接上过滤器名即可，示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--过滤器的使用方法为数据|过滤器名-->
<!--过滤器可以串联使用如数据|过滤器A|过滤器B-->
<!--过滤器还可以接收参数如数据|过滤器A('arg1','arg2'),由于数据本身是传给过滤器的第一个参数所以显式传递的其他参数分别为第二参数、第三参数以此类推-->
{{ date|formatDate }}
</div>
<script>
<!--此处用三元表达式给时间日期数据中小于10的数据前面加上0-->
var padDate=function(value) {
return value <10 ? '0'+value : value;
};
var app=new Vue({
el:"#app",
data:{
date:new Date()
},
<!--filters属性用于定义过滤器-->
filters:{
<!--formatDate为过滤器名，通过过滤器名调用过滤器，value为传递过来的数据-->
formatDate:function(value) {
var date=new Date(value);
var year=date.getFullYear();
var month=padDate(date.getMonth()+1);
var day=padDate(date.getDate());
var hour=padDate(date.getHours());
var minutes=padDate(date.getMinutes());
var seconds=padDate(date.getSeconds());
return year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds;
}
},
mounted:function() {
var _this=this;
this.timer=setInterval(function() {
_this.date=new Date();
},1000);
},
beforeDestroy:function() {
if (this.timer) {
clearInterval(this.timer);
}
}
})
</script>
</body>
</html>
6、v-if、v-bind、v-on指令介绍
指令是Vue中非常重要与常用的组成部分，下面介绍三个比较重要指令v-if用于控制标签是否显示，v-bind用于动态修改标签属性，v-on用于事件绑定，示例如下
v-if 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--当show的值为真时显示标签，为假时不显示-->
<p v-if="show">显示这段文件</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
}
})
</script>
</body>
</html>
v-bind 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--动态修改a标签的href属性-->
<a v-bind:href="url">链接</a>
<!--动态修改img标签的src属性-->
<img v-bind:src="imgUrl">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
url:'https://www.cn.bing.com',
imgUrl:'https://cn.bing.com/images/search?q=%e5%94%90%e8%89%ba%e6%98%95&FORM=ISTRTH&id=AB04349F1796ADEAAB2CF63728F5579A6A4BAEB5&cat=%E6%98%8E%E6%98%9F&lpversion='
}
})
</script>
</body>
</html>
v-on 示例1 方法名绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">显示这段文字</p>
<!--button标签绑定click事件，触发click事件后执行函数handleClose-->
<button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
<!--methods属性用于定义事件函数，复杂的业务逻辑建议都在此定义-->
methods:{
handleClose:function() {
this.show=false;
}
}
})
</script>
</body>
</html>
v-on 示例2 内联语句绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">显示这段文字</p>
<!--button标签绑定click事件，触发click事件后赋值语句show=false,此方式只适合业务逻辑简单的情况-->
<button v-on:click="show=false">点击隐藏</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
}
})
</script>
</body>
</html>
7、语法糖
Vue中的语法糖就是指令的简写，最为常用的指令v-bind的语法糖为:，即用:表示v-bind指令，v-on指令的语法糖为@，同理表示用@代替v-on指令
8、Vue实例属性调用
Vue实例代理了data属性和methods属性，因此可以直接用Vue实例去调用data属性和methods属性中的数据和函数，比如之前的v-if指令实例中可以在控制台通过app.show=false的方式修改data属性的数据
Vue基础第二章的更多相关文章
- JAVA基础第二章-java三大特性：封装、继承、多态
业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...
- 20190805-Python基础 第二章 列表和元组（2）列表
1. list函数,用于将字符串转换为列表 2. 基本的列表操作 修改列表 - 给元素赋值,使用索引表示法给特定的元素赋值,如x[1] = 2 删除元素 - 使用del语句即可 name1 = ['a ...
- jQuery Mobile 基础(第二章）
1.可折叠块: <div data-role="collapsible"> <h1>点击我 - 我可以折叠!</h1> <p>我是可 ...
- 20190806-Python基础 第二章 列表和元组（3）元组&章小结
元组,不可修改的序列(与列表的唯一差别) 1. 元组用圆括号括起,用逗号分隔 2. 如果只有一个值,也必须在后面加上逗号 print((42)) print((42,)) 结果: 42 (42,) p ...
- 20190804-Python基础 第二章 列表和元组
容器,Python支持一种数据结构的基本概念(容器,基本上就是可包含其他对象的对象.) 两种主要的容器是:序列(如列表和元组)和映射(如字典) Ps: 列表与元组区别,列表可修改,元组不能. 对序列的 ...
- Vue基础第一章
Vue的简单示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Java基础第二章
- 【vue.js权威指南】读书笔记（第二章）
[第2章:数据绑定] 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图. 数据绑定的语法主要分为以下几个部分: 文本插值:文本插值可以说是最基本的形式了. ...
- 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
随机推荐
- ERROR：非静态成员引用必须与特定对象相对
非静态成员引用必须与特定对象相对 引用非静态成员前应该先声明该类的对象 typedef struct _SUPERRESOLUTIONPARAM { int Times; //重建倍数,指的是分别对长 ...
- 浏览器端-W3School-JavaScript：History 对象
ylbtech-浏览器端-W3School-JavaScript:History 对象 1.返回顶部 1. History 对象 History 对象 History 对象包含用户(在浏览器窗口中)访 ...
- Android ConstraintLayout 约束布局属性
常用方法总结 layout_constraintTop_toTopOf // 将所需视图的顶部与另一个视图的顶部对齐. layout_constraintTop_toBottomOf // 将所需视图 ...
- Windows 10下怎么远程连接 Ubuntu 16.0.4（小白级教程）
前言: 公司因为用Ruby做开发,所有适用了Ubuntu系统,但是自己笔记本是W10,又不想装双系统,搭建开发环境,便想到倒不如自己远程操控公司电脑,这样在家的时候也可以处理一些问题.故此便有了下面的 ...
- JAVA初级面试题，附个人理解答案
一,面向对象的特征:1.抽象 包括数据抽象跟行为抽象,将对象共同的特征取出形成一个类2.继承 被继承类为基类/超类,继承类为子类/派生类3.封装 多次使用道德数据或方法,封装成类,方便多次重复调用4. ...
- linux(centOS7)的基本操作(五) 磁盘、分区、挂载、卸载
linux的磁盘类型和分区简介 linux的磁盘分为IDE和SCSI,目前以后者居多. 1. IDE磁盘的分区:hd+盘号+分区数字 盘号 |-a:基本盘 |-b:基本从属盘 |-c:辅助主盘 |-d ...
- python unittest中setUp()和setUpClass()、tearDown()和tearDownClass()之间的区别
setUp():每个测试case运行之前运行tearDown():每个测试case运行完之后执行setUpClass():必须使用@classmethod 装饰器, 所有case运行之前只运行一次t ...
- JAVA 内存的那些事
(转载)固然Java屏蔽了一下内存细节,但是有时候,了解一下这些常识还是有好处的,特别是一些口试,总是盯着这些玩意不放手. JVM启动以后,会分配两类内存区域,一类用于开发职员使用,比如保存一些变量, ...
- 如何实现在Eclipse导入MySQL驱动包
1 右键项目->Properties->Java Build Path->Libraries->Add External JARs...->mysql-connector ...
- 在IOS系统中微信浏览器input输入框输入值无效
[contenteditable="true"], input, textarea { -webkit-user-select: auto!important; -khtml-us ...