学习笔记：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 ...
随机推荐
- TStringList的用法
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. TStringList 常用方法与属性: var List: TStringList; i: Integer; begin ...
- Selenium Python FirefoxWebDriver处理打开保存对话框
代码如下(网上示例): #profile = webdriver.FirefoxProfile(r"C:\Users\Skyyj\AppData\Roaming\Mozilla\Firef ...
- 禁止光盘优盘自动播放（Shell Hardware Detection服务）
strComputer = "."Set objWMIService = GetObject("winmgmts:\\" & strComputer & ...
- googletest--测试控制
有时候如果某个测试出现了异常,但是我们想继续其他的测试怎么办. 最简单的方法就是,在测试的名字前加上"DISABLED_",如下面的例子所示: // Test with fixtu ...
- redis 安装配置 [转]
Redis是目前众多NoSQL产品中非常有特点的一款,支持的数据类型和方法都非常丰富,做为一款具备持久化功能的软件,实际使中更多却是将其做为cache. 三思在个人的测试环境中安装使用了两三天,这期间 ...
- C#修改类模板
安装目录下 Program Files\vs2013\Common7\IDE\ItemTemplatesCache\CSharp\Code\2052\Class 注意:中文是2052 英文是1033 ...
- 定位cpu内存问题
定位cpu内存问题 ps -Hp pid 显示进程的线程,P 按CPU内存排序 jstack pid>pid.log 将线程栈 dump 到日志文件中 线程号 十进制转换为 十六进制 在文件中 ...
- 【转】十年你能做的能得到的有多少？一个工科IT男的工作回忆
https://blog.csdn.net/b5w2p0/article/details/8798989
- 在CentOS6的上安装Windows2012R2的KVM虚拟机
在CentOS6的上安装Windows2012R2的KVM虚拟机 1:上传cn_windows_server_2012_r2_vl_with_update_x64_dvd_6052729.iso下载驱 ...
- GCViewer / MAT
jvm出现问题时,我们可以开启jmx功能,使用jvisualvm或者jconsole等监控其他机器上的jvm的运行情况,如https://www.cnblogs.com/princessd8251/p ...