1:P61(值绑定)

<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"/>
<span>{{toggle}}</span>
</div>

对应的js

var example = new Vue({
el:'#example',
data: {
toggle: '',
a:'aaa',
b:'bbb'
}
});

效果选中状态:

2:P74 过滤器 filter语法

js代码:

var example = new Vue({
el:'#example',
data: {
message: 'hello'
},
filters:{
reserve:function(value,begin,end){
return value+begin+end;
}
}
});

相应的html

<span>{{ message | reserve('arg1', 'arg2') }}</span>

显示效果为: helloarg1arg2

但是按照书中的例子出不来效果;P76双向过滤器出不来该效果:

<div id="example">
<p>{{message}}</p>
<input type="text" v-model="message | filterExample"/>
</div>

js

Vue.filter('filterExample',{
read:function(val){
return 'read'+val;
},
write: function(newval,oldval){
return oldval+'write';
} });
var example = new Vue({
el:'#example',
data: {
message: 'hello'
} });

P96 methods配置:html:

<div id="example">
<p>{{message}}</p>
<button class="mybox" v-on:click="green"></button>
</div>

对应的js代码:

var example = new Vue({
el:'#example',
data: {
message: 'hello'
},
methods:{
green:function(event){//注意这里的event和target的使用方法
$(event.target).css('background','green');//使用$()形成 jquery对象
}
} });

P98 prevent阻止默认事件,stop阻止冒泡事件:

<div id="example">
<a v-on:click.stop.prevent="doThat" href="http://www.baidu.com">链接</a>
</div>

js代码:

var example = new Vue({
el:'#example',
data: {
message: 'hello'
},
methods:{
green:function(event){
$(event.target).css('background','green');
},
doThat:function(){
alert('nihao');
}
}
});

效果:点击链接后不会跳转,而是执行doThat函数,出现alert警告。

P108 要注意组件的名称:

var ddComponent=Vue.extend({
template:'<p>this is a template</p>'
});
Vue.component('didi-component',ddComponent);
var example = new Vue({
el:'#example',
data: {
message: 'hello'
}
});

这里组件didi-component的名字还可以写成component,但注意不要写成didiComponent的驼峰式写法

相应的html为:

<div id="example">
<didi-component></didi-component>
</div>

vue.js权威指南----代码解释实例的更多相关文章

  1. 【vue.js权威指南】读书笔记(第一章)

    最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...

  2. 【vue.js权威指南】读书笔记(第二章)

    [第2章:数据绑定] 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图. 数据绑定的语法主要分为以下几个部分: 文本插值:文本插值可以说是最基本的形式了. ...

  3. vue.js权威指南 PDF

    链接:https://pan.baidu.com/s/1c2ItN6S 密码:ya8r

  4. 《JS权威指南学习总结--1.1语言核心》

    1.1语言核心 --本节主要介绍<js权威指南>基础部分各章讲解内容和一些简单的示例 本小节内容: 一.第二章讲解js注释.分号和Unicode,第三章主要讲解js变量和赋值 简单示例: ...

  5. 《JS权威指南学习总结》

    JS权威指南学习总结:http://www.cnblogs.com/ahthw/category/652668.html

  6. 《JS权威指南学习总结--开始简介》

    本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考 其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心 各章节重点 ...

  7. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  8. vue.js 贡献指南(翻译)

    Vue.js Contributing Guide vue 2.x 嗨! 我很高兴你有兴趣为Vue.js做贡献. 在提交您的贡献之前,请务必花点时间阅读以下指南. 行为守则 问题报告指南 PR指南 开 ...

  9. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

随机推荐

  1. A Practical Guide to Support Vector Classi cation

    <A Practical Guide to Support Vector Classication>是一篇libSVM使用入门教程以及一些实用技巧. 1. Basic Kernels: ( ...

  2. jquery实现ajax跨域请求

    1.跨域问题: 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 如: 项目一:p1.html <body> ...

  3. K-Means 算法(Java)

    kMeans算法原理见我的上一篇文章.这里介绍K-Means的Java实现方法,参考了Python的实现方法. 一.数据点的实现 package com.meachine.learning.kmean ...

  4. Log4j2报错ERROR StatusLogger Unrecognized format specifier

    问题 使用maven-shade-plugin或者maven-assembly-plugin插件把项目打成一个可执行JAR包时,如果你引入了log4j2会出现如下问题: ERROR StatusLog ...

  5. poj_3071 Football(概率dp)

    直接上状态转移方程: 记dp[i][j]为第i轮比赛,第j个队伍获胜的概率. 那么初始状态下,dp[0][j]=1://也就是第0轮比赛全都获胜 d[i][j]=sum(d[i-1][j]*d[i-1 ...

  6. Python学习札记(三十) 面向对象编程 Object Oriented Program 1

    参考:OOP NOTE 1.面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. ...

  7. POJ 3468 A Simple Problem with Integers(线段树:区间更新)

    http://poj.org/problem?id=3468 题意: 给出一串数,每次在一个区间内增加c,查询[a,b]时输出a.b之间的总和. 思路: 总结一下懒惰标记的用法吧. 比如要对一个区间范 ...

  8. [html5]HTML5中<section>和<article>的区别

    一.section元素 从字面理解就是区块.部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单.文章正文.文章的评论等. 1.section元素用于对网站或应用程序 ...

  9. subllime的插件使用

    1.emmet快速使用的方法. html:xt 然后按下tab快速的生成一个html文档. 生成10个div----- div*10 div->ul->li->a->img 写 ...

  10. python实现本地批量ping多个IP

    本文主要利用python的相关模块进行批量ping ,测试IP连通性. 下面看具体代码(python3): #!/usr/bin/env python#-*-coding:utf-8-*- impor ...