Vue.js基本须知:

1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值;

2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容,输出字符串解析后的html内容;

3)绑定表达式由一个简单的javascript表达式与一个或多个过滤器组成,格式如下:{{express|filterOne|filterTwo}}(过滤器可省略);

4)指令为"v-"格式的绑定表达式,其功能是当表达式的值改变时把某些特殊的行为应用到 DOM 上;

5)某些指令带有参数以" v-指令名:参数='绑定表达式' "的格式书写,其作用是将元素的属性以参数的形式与绑定表达式的值连接,表达式的值变了,相应的元素属性的值也就变了;

6)带参数的指定如"v-bind:参数"与"v-on:参数"可以分别简写为":参数"与"@:参数";

计算属性computed,当绑定中含有1个以上的表达式时,多余表达式要放在options的计算属性computed里进行处理,举例如下:

 <div id="box">
{{a}}{{b,c}}
<p>{{d}}</p>
</div> <script>
new Vue(
{
el:"#box",
data:{ //绑定内只有一个表达式时,会在该绑定位置直接输出表达式内容
a:"zhuxingyu",
b:"loujiaxing",
d:""
},
computed:{ //当绑定内含有1个以上的表达式时,多余表达式要放在options的计算属性computed里进行处理
c:function(){
this.d=this.a+this.b;
}
}
}
);

  $watcher用来指定监测的绑定表达式的值,其是computed也是实时更新的,能用computed的地方尽量用computed,因为它做得更简洁。例子如下:

  <div id="demo">{{fullName}}</div>
<script>
var vm = new Vue({
el:"#demo",
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
}) vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
}) vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
});
setTimeout(function(){vm.firstName="Hello"},3000); //指定受监测的firstName变化时,就会立即触发相应函数

  计算setter用来实时更新设置绑定表达式的值,提供一个默认的参数为计算属性的值,举例如下:

<div id="demo">
<p>{{firstName}}</p>
<p>{{lastName}}</p>
<p>{{fullName}}</p>
</div>
<script>
var vm=new Vue(
{
el:"#demo",
data:{
firstName:"Zhu",
lastName:"xing yu"
},
computed:{
fullName:{
//默认为get,
get:function(){
return this.firstName+" "+this.lastName;
},
//其实可以setter
set:function(newName){ //newName为fullName,实时更新
var names=newName.split(" ");
this.firstName=names[0]; //在set中设置绑定表达式的值获取规则,并且实时更新
this.lastName=names[names.length-1];
} }
} });
vm.fullName="Lou jia xing";//当fullName变化时触发set函数

  

Vue.js基本规则提炼总结及计算属性学习的更多相关文章

  1. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  2. VUE -- Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  3. Vue.js-05:第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  4. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

  5. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  6. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...

  7. Vue(七):computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

  8. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

  9. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. 以管理身份运行cmd

    搜索出cmd程序,然后右键-以管理员身份运行

  2. 【POI xls Java map】使用POI处理xls 抽取出异常信息 --java1.8Group by ---map迭代 -- 设置单元格高度

    代码处理逻辑: 代码流程: 1.首先需要创建一个实体 用来存储 相关信息 package com.sxd.test.unusualName; public class NameEntity { pri ...

  3. AchartEngine的柱状图属性设置

    1.      修改背景色或设置背景图片 背景色设置需要设置两项:setMarginsColor(设置四边颜色)以及setBackgroundColor(设置中间背景色) 设置背景图片:        ...

  4. 关于Char类型数据做cout输出

    当用cout 或者 printf()对char 或者 unsigned char类型数据进行输出的时候,默认输出的都是字符,而不是字符对应的数值.如果要输出数值,必须做int 类型数据的强制转换. 例 ...

  5. CentOS VMware 配置IP小结 静态 配置 桥接 NAT

    系统启动后可先ping下外网或局域网内其它机器. 如果配置虚拟机时选择的NAT上网方式,后面需要配置固定IP,请先参见VMware NAT方式下设置静态IP获得可用的IP范围和网关等信息. 先将ifc ...

  6. idea 使用

    1.idea对maven的兼容性优于eclipse,idea对于程序内部管理是模块,个人感觉也是优于eclipse. 2.idea默认设置编辑器字体是比较差的. 可以参考文章 http://www.3 ...

  7. 关于jquery中 跳出each循环的方法

    最近在项目中用带了jquery,在使用each循环遍历时在满足一定条件就跳出,发现break不好使,最终原来 用 return false;便可解决.

  8. 【Infomatica】Infomatica PowerCenter 9.1.0配置Repository Service和Integration Service小结

    2014-05-14 今天在虚拟机中尝试安装Infomatica PowerCenter 9.1.0. 安装环境:Windows Server 2003 32bit. 字符集环境 DBMS:Oracl ...

  9. 翻译:让网络更快一些——最小化浏览器中的回流(reflow)

    关于reflowreflow(英音:[ri:’fləu] 美音:[ri’flo])在词典中的解释是回流,逆流.而在web应用中,翻译为回流有些牵强.我个人觉得,理解为回炉(重新塑形),似乎更加形象一点 ...

  10. textarea{resize:none}

    resize:none设置了不可以调整文本域