Vue实例对象

  创建一个vue应用很简单,通过构造函数Vue就能创建一个Vue的根实例:

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

  变量app代表了这个Vue实例。el、data都属于实例的参数选项。

  el:el是必不可少的选项,用于指定一个页面中已存在的DOM元素来挂在Vue实例,它可以是HTMLElement,也可以是CSS选择器。

<div id="app"></div>

var app = new Vue({
el:document.getElementById('app') //或者"#app”
})

  挂载成功后,可以通过app.$el来访问该元素。Vue提供了很多常用的实例属性与方法,都以$开头。

数据渲染

  vue.js的核心是允许采用简洁的模板语法来声明式地将数据渲染进DOM。

<!-- html -->
<div id="app">
{{ message }}
</div>
//JS
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!

  使用双大括号(Mustache语法)“{{}}”是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来。

  如果想输出HTML,而不是将数据解析之后的纯文本,就需要使用到v-html:

<!-- html -->
<div id="app">
<span v-html="link"></span>
</div>
//JS
var app = new Vue({
el: '#app',
data: {
link:'<a href="#">这是一个链接</a>'
}
})

  如果想直接显示{{}},使用v-pre即可跳过这个元素和它的子元素的编译过程

<span v-pre>{{这里的内容是不会被编译的}}</span>

  在{{}}中,除了支持简单的绑定值,还可以使用JavaScript表达式进行简单的运算,三元运算等。但是只支持单个表达式,不支持语句和流控制。表达式中也不支持用户自定义的全局变量,只能使用Vue白名单内的全局变量,例如Math和Date。

过滤器

  Vue.js支持在{{}}插值的尾部添加一个管道符"|"对数据进行过滤,一般用于格式化文本。过滤的规则是自定义的,通过Vue实例添加选项filters来设置。下面的过滤器作用是对时间的格式化

<!-- html -->
<div id="app">
{{ data | formatDate }}
</div>
<script>
//在月份、日期、小时等小于10时前面补0
var padDate = function(value){
return value < 10 ? '0' + value : value;
}; var app = new Vue({
el: '#app',
date: {
date: new Date()
},
filters: {
//这里的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 hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
},
mounted: funtion() {
//声明一个变量指向Vue实例this,保证作用域一致
var _this = this;
this.timer = setInterval(function() {
_this.date = new Date(); //给date重新赋值
},1000);
},
beforeDestroy: function() {
if(this.timer){
clearInterval(this.timer); //在Vue实例销毁前,清除定时器
}
}
})
</script>

  过滤器也可以串联,也可以接收参数。

{{ message | filterA('arg1','arg2') | filterB('arg1','arg2')}}

  参数会传递给过滤器的第二个和第三个参数,第一个参数是数据本身。

Vue 2.0学习(二)数据绑定的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  2. Vue源码学习二 ———— Vue原型对象包装

    Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...

  3. Vue 2.0 学习路线

    「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...

  4. Vue 2.0学习(一)简介

    简介 Vue是一套用于构建用户界面的渐进式框架.简单小巧( 压缩后仅17KB),Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既 ...

  5. vue 源码学习二 实例初始化和挂载过程

    vue 入口 从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compil ...

  6. Vue源码学习(二)$mount() 后的做的事(1)

    Vue实例初始化完成后,启动加载($mount)模块数据. (一)Vue$3.protype.$mount             标红的函数 compileToFunctions 过于复杂,主要是生 ...

  7. Vue 2.0学习(七)方法与事件

    基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button ...

  8. Vue 2.0学习(四)计算属性

    {{}}模板内的表达式常用于简单的运算,当运算过长或逻辑复杂时,会难以维护. <div> {{ text.split(',').reverse().join('') }} </div ...

  9. Vue 2.0学习(六)内置指令

    基本指令 1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用. <div id="ap ...

随机推荐

  1. CSS 颜色属性

    一.十六进制表示,如: a{ color: #F0E68C; } 当RGB一样时,可以简写,如#AABBCC 可以写成 #ABC 二.rgb(r,g,b)形式,其中rgb的值为1~255之间,如: a ...

  2. 【BZOJ】4764: 弹飞大爷 LCT

    [题意]给定n个数字ai,表示大爷落到i处会被弹飞到i+ai处,弹飞到>n或<1处则落地.m次操作,修改一个ai,或询问大爷落到x处经过几次落地(或-1).n,m<=10^5,|ai ...

  3. 面试整理(3)js事件委托

    事件委托主要用于一个父容器下面有很多功能相仿的子容器,这时候就需要将子容器的事件监听交给父容器来做.父容器之所以能够帮子容器监听其原理是事件冒泡,对于子容器的点击在冒泡时会被父容器捕获到,然后用e.t ...

  4. 【leetcode 简单】 第五十一题 有效电话号码

    给定一个包含电话号码列表(一行一个电话号码)的文本文件 file.txt,写一个 bash 脚本输出所有有效的电话号码. 你可以假设一个有效的电话号码必须满足以下两种格式: (xxx) xxx-xxx ...

  5. 【leetcode 简单】第二十七题 二叉树的最小深度

    给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null,null,15,7], ...

  6. wordpress 模板制作之一

    WP模板工作原理图:

  7. imperva agent 的重新注册

    情况是这样 公司搭了一个环境有mysql的数据库并且安装了agent,imperva管理平台上也可以看到agent的注册信息,但是没想到的是有人把我的虚机给还原快照了,而且还没保存..... 这次写个 ...

  8. 135.Candy---贪心

    题目链接 题目大意:分糖果,每个小朋友都有一个ratings值,且每个小朋友至少都要有一个糖果,而且每个小朋友的ratings值如果比左右邻舍的小朋友的ratings值高,则其糖果数量也比邻舍的小朋友 ...

  9. jmeter主要组件

    1.测试计划(Test plan) 2.线程组(Thread Group) 3.配置原件(Configuration) 4.逻辑控制器(Login Controller) 5.取样器(Sampler) ...

  10. Activity工作流 -- java运用

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...