学习笔记：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 ...
随机推荐
- Nuke的色彩匹配节点思路
大致思路是首先利用node.sample()自带采样功能对整个画面逐像素采 样,我把采样函数写的比较灵活,可以定义一个采样族,即把整个画面分成若干块,逐块采样,很大程度上减少了采样工作量,但相对精度会 ...
- 【巷子】---redux---【react】
一.flux的缺陷 因为dispatcher和Store可以有多个互相管理起来特别麻烦 二.什么是redux 其实redux就是Flux的一种进阶实现.它是一个应用数据流框架,主要作用应用状态的管理 ...
- 黄聪：如何使用钩子定制WordPress添加媒体界面，去除不需要的元素
原文:http://www.solagirl.net/customize-wordpress-media-upload-ui.html WordPress编写文章界面的添加媒体按钮允许用户上传多媒体文 ...
- js实现照片墙效果
本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置. 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库 ...
- NodeJs递归删除非空文件夹
此篇博文由于第一次使用fs.unlink()删除文件夹时报“Error: EPERM: operation not permitted, unlink”错误而写,这是因为fs.unlink()只能删除 ...
- 学习笔记之1001 Inventions That Changed the World
1001 Inventions That Changed the World: Jack Challoner: 9780764161360: Amazon.com: Books https://www ...
- chrome不好用
(也是写于很久很久以前) 因为工作的某些原因,我本来想换Google chrome作为默认浏览器,真正用它的时候,才发现它一点都不好用,首先它很多网站不支持或显示不完整,比如新浪邮箱,打开新浪邮箱只显 ...
- Linux系统安装（centos6.8）符破解码
1.安装 VMware VMware 是一个虚拟 PC 的软件,可以在现有的操作系统上虚拟出一个新的硬件环境,相当于模拟出一台新的 PC,我们可以在上面构造出一个或多个别的系统,以此来实现在一台机器上 ...
- echo() print() printf() print_r() 的区别
echo是一个语言结构而非函数,因此它无法被变量函数调用, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用) print() 只能打印出简单类型变量的值(如int ...
- centos7图形化界面安装后，意外出现Please make your choice from above ['q' to quit | 'c' to continue | 'r' to refresh]
安装完成centos7-GUI后出现如下提示: nitial setup of CentOS Linux (core) ) [x] Creat user ) [!] License informati ...