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) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
随机推荐
- iOS 图表工具charts之BarChartView
关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...
- 阶段3 2.Spring_06.Spring的新注解_6 Qualifier注解的另一种用法
复制上面的数据源到下面改改名字 现在就是有两个数据源 创建一个eesy02的数据库 找到sql语句再创建Account表 现在就相当于有连个库一个eesy一个是eesy02这连个库. account里 ...
- git 如何把master分支代码合并到自己的分支
master分支的代码领先自己的分支,git 如何把master分支代码合并到自己的分支 1.首先切换到主分支 git checkout master 2.使用git pull 把领先的主分支代码pu ...
- conftest.py作用范围
前言 一个测试工程下是可以有多个conftest.py的文件,一般在工程根目录放一个conftest.py起到全局作用.在不同的测试子目录也可以放conftest.py,作用范围只在该层级以及以下目录 ...
- svn版本合并
假如你的项目(这里指的是手机客户端项目)的某个版本(例如1.0版本)已经完成开发.测试并已经上线了,接下来接到新的需求,新需求的开发需要修改多个文件中的代码,当需求已经开始开发一段时间的时候,突然接到 ...
- Servlet的API
(1)Servlet接口中的方法 1)init(ServletConfig arg0) 何时执行:servlet对象创建的时候执行 ServletConfig : 代表的是该servlet对象的配置信 ...
- RTX系统整合记录
1.切换数据库RTX常见问题解答五. SQL数据库配置 2.同步系统组织机构 部门同步 用户同步https://blog.csdn.net/qq_21703215/article/details/80 ...
- 【Python开发】【神经网络与深度学习】网络爬虫之python实现
一.网络爬虫的定义 网络爬虫,即Web Spider,是一个很形象的名字. 把互联网比喻成一个蜘蛛网,那么Spider就是在网上爬来爬去的蜘蛛. 网络蜘蛛是通过网页的链接地址来寻找网页的. 从网站某一 ...
- 【神经网络与深度学习】Caffe使用step by step：使用自己数据对已经训练好的模型进行finetuning
在经过前面Caffe框架的搭建以及caffe基本框架的了解之后,接下来就要回到正题:使用caffe来进行模型的训练. 但如果对caffe并不是特别熟悉的话,从头开始训练一个模型会花费很多时间和精力,需 ...
- 启用yarn的高可用
选择高可用的主机,新的一台: 点运行结束后,会看到实例会多出一个备用的节点: