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) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
随机推荐
- 拉普拉斯矩阵（Laplacian matrix）
原文地址:https://www.jianshu.com/p/f864bac6cb7a 拉普拉斯矩阵是图论中用到的一种重要矩阵,给定一个有n个顶点的图 G=(V,E),其拉普拉斯矩阵被定义为 L = ...
- 阶段3 2.Spring_10.Spring中事务控制_2 作业-基于注解的AOP实现事务控制及问题分析_上
创建maven的新项目 先复制坐标的依赖. 再把代码复制进来 先改造ioc的部分 复制上面一行代码.到下面 改成context 这里也是复制的上面两行代码.到下面改成context关键字 配置扫描的包 ...
- SQL Server 批量创建作业（备份主分区）
一. 需求背景 在我的数据库实例中,有很多类似下图所示的数据库,这些数据库的名称是有规律的,每个数据库包含的表都是相同的,其中2个表是类似流水记录的表,表的数据量会比较大,占用的空间有几十G到上百G不 ...
- C# 获取当前活动网络连接mac地址
IPAddress localIp = null; IPAddress[] ipArray; ipArray = Dns.GetHostAddresses(Dns.GetHostName()); lo ...
- sql server 2014安装后用sa登录问题
在使用的sql server的数据的情况下,安装数据过程,未指定使用sa的登录,只能使用windows的账户登录,那要怎么设置账户来使用sa账户登录账号呢? 首先先打开的是sql server man ...
- dapper使用时性能优化
数据库中类型 Area 数据库类型 varchar dapper 来操作数据库,不能直接写 sql Area=@Area) //dapper 对C#中的字符串类型 默认是对应数据库nva ...
- java 接口default的判断规则
1.前言 jdk1.8中新增加了default关键字,就是在接口中可以增加默认实现. 因为改动接口所有的实现类都要改动,所以增加了default关键字后不需要修改其他类,默认给所有实现类增加了方法. ...
- April.Util更新之权限
目录 前言 权限 中间层 小结 前言 在之前已经提到过,公用类库Util已经开源,目的一是为了简化开发的工作量,毕竟有些常规的功能类库重复率还是挺高的,二是为了一起探讨学习软件开发,用的人越多问题也就 ...
- Spring Boot 中使用 WebSocket 实现一对多聊天及一对一聊天
为什么需要WebSocket? 我们已经有了http协议,为什么还需要另外一个协议?有什么好处? 比如我想得到价格变化,只能是客户端想服务端发起请求,服务器返回结果,HTTP协议做不到服务器主动向客户 ...
- cmd命令简单别木马的蛛丝马迹
一些基本的Windows命令往往可以识别木马的蛛丝马迹,而且在保护网络安全上起到很大的作用. 检测网络连接 如果你怀疑自己的计算机上被别人安装了木马,或者是中了病毒,但是手里没有完善的工具来检测是不是 ...