VUE 数据绑定
1、数据双向绑定
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字" />
<h1>你好，{{name}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name: ''
}
});
</script>
</body> </html>
2、生命周期
vued钩子与jquery的ready函数类似，比较常用的有：
（1）created：实例创建完成后调用，需要初始化处理一些数据时比较有用。
（2）mounted：el挂载到实例后调用，一般第一个业务逻辑在这里开始
（3）beforeDestory：实例销毁前调用，用来解绑监听事件。
钩子也是作为选项写入vue实例内，钩子的this指向调用它的vue实例。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字" />
<h1>你好，{{name}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name: '',
a:2
},
created:function(){
//
console.log(this.a)
},
mounted:function(){
//<div id="app"></div>
console.log(this.$el)
}
});
</script>
</body> </html>
3、插值表达式{{}}
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
{{date}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
date: new Date(),
a:2
},
created:function(){
//
console.log(this.a)
},
mounted:function(){
var _this = this;
//修改date
_this.timer = setInterval(function(){
_this.date=new Date();
},1000);
},
beforeDestroy:function(){
if(this.timer){
//实例销毁前，清除定时器
clearInterval(this.timer);
}
}
});
</script>
</body> </html>
浏览器实时显示当前时间。
4、v-html 输出html
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<span v-html='link'></span>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
link: '<a href="#">这是一个连接</a>'
}
});
</script>
</body> </html>
解析后的html标签结构：
5、过滤器
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
{{date | formatDate}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var padDate=function(value){
return value<10?'0'+value:value;
}
new Vue({
el: '#app',
data: {
date:new Date()
} ,
filters:{
//value是需要过滤的数据
formatDate:function(value){
var date = new Date();
var year = date.getFullYear();
var month = padDate(date.getMonth()+1);
var day = padDate(date.getDate());
var hours= padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
}
},
mounted:function(){
var _this = this;
//修改date
_this.timer = setInterval(function(){
_this.date=new Date();
},1000);
},
beforeDestroy:function(){
if(this.timer){
//实例销毁前，清除定时器
clearInterval(this.timer);
}
}
});
</script>
</body> </html>
过滤器处理简单的文本转换，若需要实现复杂的数据使用计算属性。
VUE 数据绑定的更多相关文章
- Vue数据绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...
- 浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- 17: VUE数据绑定 与 Object.defineProperty
VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
- Vue数据绑定(一)
Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...
- (三)vue数据绑定及相应的命令
vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...
- 「每日一题」有人上次在dy面试，面试官问我：vue数据绑定的实现原理。你说我该如何回答？
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
- vue数据绑定原理
一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...
- vue 数据绑定实现的核心 Object.defineProperty()
vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...
- vue数据绑定数组，改变元素时不更新view问题
关于这个问题,官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa i ...
随机推荐
- iReport学习笔记
概述 主要介绍如何根据jasper报表和数据生成pdf文档,中文字体问题的解决方案和日期时间的格式化输出. iReport版本:5.2.0 生成pdf文档 maven依赖 <dependency ...
- 洛谷——P1630 求和
P1630 求和 题目描述 求1^b+2^b+……+a^b的和除以10000的余数. 输入输出格式 输入格式: 第一行包含一个正整数N,表示共有N组测试数据: 接下来N行,每行包含两个正整数a和b. ...
- 洛谷——P1743 矩阵 III
P1743 矩阵 III 题目背景 usqwedf 改编系列题. 题目描述 给定一个n*m的矩阵,问从左上角走到右下角有多少条路径. 输入输出格式 输入格式: 一行两个正整数 n,m 输出格式: 路径 ...
- Linux命令之find（二）
接上一篇Linux命令之find(一) (1).实例 1.列出当前目录下及子目录下所有的.txt文件 [xf@xuexi ~]$ ls 1.txt 3.txt b.txt 公共 视频 文档 音乐 2. ...
- ElasticSearch Mapping中的字段类型
1)string: 默认会被分词 2)数字类型主要如下几种: long:64位存储 integer:32位存储 short:16位存储 byte:8位存储 double:64位双精度存储 f ...
- windows上同时安装两个版本的mysql数据库
一.先停止之前安装的低版本mysql服务 二.将其他电脑上安装好的mysql拷贝过来 三.拷贝过来之后,进入该文件夹,删除掉data目录,然后打开my.ini,进行修改端口号,端口号改为3307,ba ...
- luogu P1396 营救
题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起了门…… 妈妈下班回家,街坊邻居说小明被一群陌生人强行押上了警车!妈妈丰富的经验告诉她小 ...
- 【贪心】【堆】bzoj2590 [Usaco2012 Feb]Cow Coupons
每个物品有属性a,b 考虑在仅仅用光优惠券时的最优方案. 显然是按照b排序,取前K个. 但是我们还要尽可能去取剩余的. 假设朴素地取剩余的话,应该把剩余的对a排序,然后尽量去取. 但是有可能对其用优惠 ...
- 【深度搜索+剪枝】POJ1011-Sticks
深搜部分和之前的POJ2362差不多,只是有几处需要额外的剪枝. [思路]排序后从最短木棒开始搜索至木棒长总和,如果木棒长总和sum能整除当前棒长,则进入深搜. [剪枝]先前POJ2362的剪枝部分不 ...
- RMI（Remote Method Invocation ) 概念恢复
1.RMI是远程方法调用的简称,像其名称暗示的那样,它能够帮助我们查找并执行远程对象,通俗的说,远程调用就像一个class放在A机器上,然后在B机器中调用这个class的方法. 2.EMI术语 在研究 ...