学习笔记：vue（代码篇）
http://cn.vuejs.org/ VUE官网
http://cn.vuejs.org/v2/guide/ 教程
VUE模板文件：
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="pragma" content="no-cache" />
<title></title>
<style type="text/css">
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script language="JavaScript">
var vm = new Vue({
el:"#app1",
data:{ //vue的数据
message:''
},
methods:{ //vue的方法
},
watch:{ //监听
},
filter:{}, //过滤器
mounted:function(){ //相当于jquery的ready
},
computed: { //vue的计算属性computed
},
components:{ //组件
}
});
</script>
</head>
<body> </body>
</html>
（ 为了方便，也放在这里一份）：
var itemlist = {a:1,b:2,c:3,d:4}
itemlist = JSON.parse(JSON.stringify(itemlist ));
console.log(itemlist);
*.vue文件的组成
<template>
....
</template>
<script></script>
<style></style>
vue的所有数据都是放在data里面，data字段也可以在vue里面通过this.message、this.a 、 this.b来取值
new Vue一个对象时，你可以设置它的属性，最重要的是3个：data、methods、watch
<div id="app1">
<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>
<input type="button" value="调用doSomething方法" v-on:click="doSomething"><br>
{{b}}<br>
</div>
<script type="text/javascript">
var app1 = new Vue({
el: '#app1',
data: { //vue对象的数据
a:1,
b:[]
},
methods:{ //vue对象的方法
doSomething:function(){
this.a++;
console.log(this.a);
this.b.push(this.a);
}
},
watch:{ //设置了对象监听的方法
'a':function(val,oldval){
console.log('新值：',val,' 旧值：',oldval);
}
},
components:{.....} //组件
})
</script>
$el 和 $watch： http://www.runoob.com/vue2/vue-template-syntax.html
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})
数据渲染：
<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>
控制模块隐藏：v-if、v-show
<div id="app1">
<p v-if="isShow">aaaaaaaaa</p>
<p v-show="isShow">bbbbbbbb</p>
<p v-if="noShow">ccccccc右键审查元素，会看到if和show的不同</p>
<p v-show="noShow">dddddddd</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app1',
data: {
isShow:true,
noShow:false
}
})
</script>
渲染循环列表：v-for
<ul id="app1">
<li v-for="item in items">
<b>{{item.label}}</b>
<span v-text="item.num"></span>个
</li>
</ul>
<script type="text/javascript">
new Vue({
el: '#app1',
data: {
items:[
{label:'apple',num:'5'},
{label:'banana',num:'3'},
{label:'orange',num:'22'}
]
}
})
</script>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
渲染下拉框：
<div id="app1">
<select name="chapter" v-model="section">
<option v-for="item in book" v-bind:value="item.chapter">
第{{ item.section }}章
</option>
</select>
<select name="section" v-model="section">
<option v-for="item in book" v-bind:value="item.section">
第{{ item.section }}节
</option>
</select>
</div>
<script>
var vm = new Vue({
el:"#app1",
data:{
book : [
{chapter:1,section:1,page:1,content:"aaaa111"},
{chapter:1,section:2,page:2,content:"aaaa222"},
{chapter:1,section:3,page:3,content:"aaaa333"},
{chapter:2,section:1,page:4,content:"bbb11"},
{chapter:2,section:2,page:5,content:"bbb222"},
{chapter:3,section:2,page:6,content:"cccc"}
]
},
事件绑定： v-on:click、 或 @click
<div id="app1">
<button v-on:click="doSomething">调用doSomething方法</button><br>
<button @click="doSomething">调用doSomething方法</button><br>
</div>
<script type="text/javascript">
var app1 = new Vue({
el: '#app1',
methods:{ //方法
doSomething:function(){
console.log('aaaaaaa');
}
}
})
</script>
属性绑定：v-bind
可以写成 <div class="static" v-bind:class="{red:isRed,border1:isBorder}"></div>
还可以写成 <div class="static" :class="{red:isRed,border1:isBorder}"></div>
http://www.runoob.com/vue2/vue-class-style.html 看页面下部的几个例子
<style type="text/css">
.shadow{border:1px solid #999;box-shadow:1px 2px 10px #000;}
.border1{border:1px solid #000;}
.red{color:red;}
</style>
<div id="app1">
<img v-bind:src="imgSrc">
<img :src="imgSrc" :class="cls">
<div :class="[cls1,cls2]">aaaaaa</div>
<div :class="{red:isRed}">aaaaaa</div>
<div :class="{red:isRed,border1:isBorder}">aaaaaa</div>
</div>
<script type="text/javascript">
var app1 = new Vue({
el: '#app1',
data:{
imgSrc:'1.jpg',
cls:'shadow border1',
cls1:'shadow',
cls2:'border1',
isRed:true,
isBorder:true,
}
})
</script>
过滤：filters
例子： http://www.runoob.com/try/try.php?filename=vue2-filters-capitalize
computed 和 methods
http://www.runoob.com/vue2/vue-computed.html
我们可以使用 methods 来替代 computed，效果上两个都是一样的，
但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。看例子：http://www.runoob.com/try/try.php?filename=vue2-str-reverse4
事件修饰符：
.stop
.prevent
.capture
.self
.once
<a v-on:click.stop="doThis"></a> <!-- 阻止单击事件冒泡 -->
<form v-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重载页面 -->
<a v-on:click.stop.prevent="doThat"></a> <!-- 修饰符可以串联 -->
<form v-on:submit.prevent></form> <!-- 只有修饰符 -->
<div v-on:click.capture="doThis">...</div> <!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.self="doThat">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<a v-on:click.once="doThis"></a> <!-- click 事件只能点击一次，2.1.4版本新增 -->
按键修饰符：
.enter .tab .delete (捕获 "删除" 和 "退格" 键)
.esc .space .up .down
.left .right
.ctrl .alt .shift .meta
<input v-on:keyup.13="submit"> <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.enter="submit"> <!-- 同上 -->
<input @keyup.enter="submit"> <!-- 缩写语法 -->
（以下3章没学通）
组件： http://www.runoob.com/vue2/vue-component.html
全局组件 http://www.runoob.com/try/try.php?filename=vue2-component1
局部组件 http://www.runoob.com/try/try.php?filename=vue2-component2
Prop http://www.runoob.com/try/try.php?filename=vue2-component3
prop 是父组件用来传递数据的一个自定义属性。 父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
Vue.js 自定义指令、钩子、钩子函数： http://www.runoob.com/vue2/vue-custom-directive.html
Vue.js 路由： http://www.runoob.com/vue2/vue-routing.html
Vue.js 路由需要载入 vue-router 库 https://github.com/vuejs/vue-router
中文文档地址：vue-router文档。 http://router.vuejs.org/zh-cn/
VUE的ajax：
<div id="app1">
<h3>{{message}}</h3>
<p>姓名 ：{{data.name}}</p>
<p>年龄 ：{{data.age}}</p>
<p>性别 ：{{data.gender}}</p>
<p>学校 ：{{data.school}}</p>
<p>城市 ：{{data.city}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script language="JavaScript">
Vue.prototype.$http = axios;
new Vue({
el:"#app1",
data:{
data:"",
message:'hello'
},
created:function(){
var url="hello_api.php";
var _self = this;//重要
this.$http.get(url).then(function(data){
//console.log(data.data);
//console.log(data.status);
//console.log(data.statusText);
//console.log(data.config);
//console.log(data.headers);
//console.log(data.request);
_self.data=eval( data.data );
_self.message="Ajax 成功."
},function(response){
console.info(response);
})
}
});
</script>
附：（ hello_api.php ）
<?php
$arr = array ('name'=>'大皮皮','age'=>13,'gender'=>'女','school'=>'XX大学','city'=>'北京');
echo json_encode($arr);
?>
...
学习笔记：vue（代码篇）的更多相关文章
- vue框架学习笔记(vue入门篇)
vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...
- Noah的学习笔记之Python篇：命令行解析
Noah的学习笔记之Python篇: 1.装饰器 2.函数“可变长参数” 3.命令行解析 注:本文全原创,作者:Noah Zhang (http://www.cnblogs.com/noahzn/) ...
- Noah的学习笔记之Python篇：函数“可变长参数”
Noah的学习笔记之Python篇: 1.装饰器 2.函数“可变长参数” 3.命令行解析 注:本文全原创,作者:Noah Zhang (http://www.cnblogs.com/noahzn/) ...
- Noah的学习笔记之Python篇：装饰器
Noah的学习笔记之Python篇: 1.装饰器 2.函数“可变长参数” 3.命令行解析 注:本文全原创,作者:Noah Zhang (http://www.cnblogs.com/noahzn/) ...
- ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
- PHP学习笔记之数组篇
摘要:其实PHP中的数组和JavaScript中的数组很相似,就是一系列键值对的集合.... 转载请注明来源:PHP学习笔记之数组篇 一.如何定义数组:在PHP中创建数组主要有两种方式,下面就让我 ...
- c++学习笔记之封装篇(上)
title: c++学习笔记之封装篇(上) date: 2017-03-12 18:59:01 tags: [c++,c,封装,类] categories: [学习,程序员,c/c++] --- 一. ...
- c++学习笔记之继承篇
title: c++学习笔记之继承篇 date: 2017-03-26 16:36:33 tags: [c++,继承,public,virtual,private,protected] categor ...
- Nginx学习笔记之应用篇
Nginx服务器的安装请参考Nginx学习笔记之安装篇 关于Nginx配置文档的API在这里就不一一列出,现在我们来配置第一个Nginx架构实现负载均衡的网站. 1.打开IIS,配置如下站点 重复上述 ...
- Python学习笔记之基础篇（-）python介绍与安装
Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...
随机推荐
- datax 数据同步迁移
https://github.com/alibaba/DataX/blob/master/mysqlwriter/doc/mysqlwriter.md https://github.com/aliba ...
- 实现类QQ的编辑框
第一步,平面效果.Windows系统有几个消息专门用来处理Windows组件的边框部位,那就是WM_NCCALCSIZE和WM_NCPAINT这两个消息,从消息名字看来NC这个就代表着No Clien ...
- git clone 指定分支 拉代码
1.git clone 不指定分支 git clone http://10.1.1.11/service/tmall-service.git 2.git clone 指定分支 git clone -b ...
- 使用keytool 生成数字keystore
生成本地证书 在密钥库中生成本地数字证书:需要提供身份.加密算法.有效期等信息: keytool指令如下,产生的本地证书后缀名为:*.keystore keytool -genkeypair -key ...
- 25天javaweb基础
第一天(html) 表格标签,超链接标签,图片标签,排版标签,列表标签 第二天(css) 表单标签 第三天(JS) js语法 定时器(系统对象的定时器setinterval,js的定时器seTimeo ...
- Scala集合类型详解
Scala集合 Scala提供了一套很好的集合实现,提供了一些集合类型的抽象. Scala 集合分为可变的和不可变的集合. 可变集合可以在适当的地方被更新或扩展.这意味着你可以修改,添加,移除一个集合 ...
- 服务容错保护断路器Hystrix之一：入门示例介绍（springcloud引入Hystrix的两种方式）
限流知识<高可用服务设计之二:Rate limiting 限流与降级> 在微服务架构中,我们将系统拆分成了一个个的服务单元,各单元间通过服务注册与订阅的方式互相依赖.由于每个单元都在不同的 ...
- TextView-- 测量文字宽度
https://my.oschina.net/lengwei/blog/637380; http://blog.csdn.net/mare_blue/article/details/51388403; ...
- Linux入门：常用命令：查看硬盘、分区、CPU、内存信息
查看硬盘信息 $df -lh #查看所有硬盘的使用状 $du -sh /etc #查看etc目录大小 #获得文件大小很方便,主要是目录 外部系统挂载 $mount ...
- 用python进行桌面程序开发
Python是一种面向对象.直译式计算机程序设计语言,也是一种功能强大而完善的通用型语言,已经具有十多年的发展历史,成熟且稳定.这种语言具有非常简捷而清晰的语法特点,适合完成各种高层任务,几乎可以在所 ...