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) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
随机推荐
- BOSCH汽车工程手册————驾驶员辅助系统
根据交通事故统计得出平均每分钟有一人死于交通事故 而辅助驾驶系统能够为驾驶员洞察了解汽车周围情况,识别危险的行驶状况. 提早为驾驶员告诉危险信息,可减少60%汽车驶上主路事故和1/3汽车前碰事故. 有 ...
- java删除文件夹或者文件
private static void deleteFile(File file) { if (file.exists()) { // 判断文件是否存在 if (file.isFile()) { // ...
- [VBA]合并工作簿优化版
Sub 合并工作簿数据()Dim arrDim i As Integer, j As Integer, x As IntegerDim f As String, m As String, n As S ...
- zk 文件存储
zk 有 2 种文件,快照和事务日志,快照是某一时刻的全量数据,事务日志中记录了数据的修改事件. 快照的文件名是 snapshot.zxid,zxid 是当前最大的事务 id // org.apach ...
- 437路径总和III
题目: 给定一个二叉树,它的每个结点都存放着一个整数值.找出路径和等于给定数值的路径总数.路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点).来源: ht ...
- 因修改/etc/ssh权限导致的ssh不能连接异常解决方法
因修改/etc/ssh权限导致的ssh不能连接异常解决方法 现象: $ssh XXX@192.168.5.21 出现以下问题 Read from socket failed: Connection r ...
- 微信小程序<一>
下面是我对自己微信小程序学习的画的一个思维导图: 以后就一步一步的完善思维导图吧...到最后,应该是相当的庞大了呀...嘿嘿嘿! 目录结构总结记录: 包括入口文件app.js app.json&l ...
- Cmake + VS2013编译opencv
下载之后,使用cmake转为vs解决方案的时候,配置OPENCV_EXTRA_MODULES_PATH=<path to opencv_contrib/modules/>,然后才能使用ex ...
- 卸载openssl后yum无法使用，ssh无法连接的解决办法
一,安装nginx时,提示openssl版本问题,用yum update openssl 发现还是不行,于是rpm -e 卸载了openssl 此时,才发现yum不能用了,然后想上传个tar包时又出现 ...
- 【Qt开发】QImage设置为8-bit灰度图
项目中用到大量基础图像处理知识,其中灰度图的生成是很重要的一环. 先补充一些基础知识: -------------------------------------------------------- ...