01. Vue.JS 第一課 02:51
Vue 1.0.21 Sublime Text
1 知牌、vue:
讀音: v-u-e
view
2俐银、vue到底是什么?
一個(gè)mvvm框架(庫)羔沙、和angular類似
比較容易上手、小巧
mvc:
- mvp
- mvvm
- mv*
- mvx
3凝赛、網(wǎng)址:
官網(wǎng)：http://cn.vuejs.org/
手冊(cè)： http://cn.vuejs.org/api/
4袖迎、vue和angular區(qū)別?
共同點(diǎn): 不兼容低版本IE
vue——簡(jiǎn)單、易學(xué)
指令以 v-xxx
一片html代碼配合上json余蟹，再new出來vue實(shí)例
個(gè)人維護(hù)項(xiàng)目
適合: 移動(dòng)端項(xiàng)目,小巧
vue的發(fā)展勢(shì)頭很猛卷胯，github上start數(shù)量已經(jīng)超越angular
angular——上手難
指令以 ng-xxx
所有屬性和方法都掛到$scope身上
angular由google維護(hù)
合適: pc端項(xiàng)目
5、vue基本雛形:
angular展示一條基本數(shù)據(jù):
var app=angular.module('app',[]);
app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})
html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>
var c=new Vue({
el:'#box', //選擇器 class tagName
data:{
msg:'welcome vue'
}
});
6客叉、常用指令:
指令: 擴(kuò)展html標(biāo)簽功能,屬性
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show
$scope.show=function(){}
Vue:
- v-model 一般表單元素 雙向數(shù)據(jù)綁定
實(shí)例：
- v_model01.html
<!-- 一片html代碼配合上json,再new出來vue實(shí)例 -->
<div id="box">
<input type="text" v-model="msg"/>
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script> <!-- v1.0.21 -->
<script type="text/javascript">
var c = new Vue({ //{}--json形式诵竭；c可取任意名字
el: '#box',
data: {
msg: 'Welcome vue'
}
});
</script>
- v_model02.html
<div class="box">
<input type="text" v-model="msg"/>
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script> <!-- v1.0.21 -->
<script type="text/javascript">
var vm = new Vue({ //{}--json形式；vm可取任意名字
el: '.box', //類選擇器亦可
data: {
msg: 'Welcome vue'
}
});
</script>
- v_model03.html
<input type="text" v-model="msg"/>
{{msg}}
<script type="text/javascript" src="vue.js"></script> <!-- v1.0.21 -->
<script type="text/javascript">
var vm = new Vue({ //{}--json形式兼搏；c可取任意名字
el: 'body', // **標(biāo)簽選擇器**亦可
data: {
msg: 'Welcome vue'
}
});
</script>
new Vue data:里面的數(shù)據(jù)可以是string,number,boolean,array,json
示例：5 vue_data數(shù)據(jù)類型-
循環(huán)： v-for
a-循環(huán)數(shù)組：<ul> <li v-for="value in arr"> {{$index}} {{value}} <!-- 索引值 值 --> </li> </ul>
b--循環(huán)json
<ul>
<li v-for="items in json">
{{$index}}--{{$key}}: {{items}} <!-- 索引卵慰、鍵、值 -->
</li>
</ul>
<ul>
<li v-for="(k,v) in json2">
{{$index}}--{{k}}: {{v}} <!-- 索引佛呻、鍵裳朋、值 -->
</li>
</ul>
4）事件：配合methods使用
v-on:click= ""
v-on:mouseover= ""
v-on:mouseout=""
v-on:mousedown=""
v-on:dblclick=""
實(shí)例見 8 vue_基礎(chǔ)事件02.html
<input type="button" value="按鈕" v-on:click="add()" />
<script type="text/javascript">
var vm = new Vue({ //{}--json形式；c可取任意名字
el: '#box', //標(biāo)簽選擇器亦可
data: {
arr: ['apple','orange','banana'], //數(shù)組
},
methods: { //務(wù)必記得加s
add: function(){
// alert(this.arr);
this.arr.push('pear'); //this指vm
}
}
});
</script>
5）顯示隱藏:
v-show=“true/false”
bootstrap+vue簡(jiǎn)易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一樣
只需要給標(biāo)簽 賦予class吓著，角色
依賴jquery
確認(rèn)刪除鲤嫡？和確認(rèn)刪除全部么?
FAQ：
- Bootstrap3--JavaScript插件中的模態(tài)框
- 優(yōu)化：將講師設(shè)置的“取消”與“確認(rèn)”所在的div的類名modal-body設(shè)置為
modal-footer就直接右對(duì)齊，無需再設(shè)置text-right; - 什么情況下“暫無數(shù)據(jù)呢...”?
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暫無數(shù)據(jù)....</p>
</td>
</tr>
- 什么情況下“刪除全部”顯示?
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm">刪除全部</button>
</td>
</tr>
- 動(dòng)態(tài)設(shè)置 序號(hào)绑莺、名字暖眼、年齡、操作,
data: {
myData: [
{name:'xxx',age:'xxx'}
]
}
<tr class="text-center" v-for="items in myData">
<td>{{$index}}</td>
<td>{{items.name}}</td>
<td>{{items.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">刪除</button>
</td>
</tr>
效果圖如下：
效果圖01.gif
- 添加按鈕：
- 難點(diǎn):
刪除按鈕 01:12:00
7纺裁、事件:
v-on:click/mouseover......
簡(jiǎn)寫的:
@click="" 推薦
例子：
<input type="button" value="按鈕" v-on:click="show()" />
<input type="button" value="按鈕" @click="show()" />
8诫肠、事件對(duì)象:
@click="show($event)"
示例：
<div id="box">
<input type="button" value="按鈕" @click="show($event)" />
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(ev.clientX);
}
}
});
}
</script>
9司澎、事件冒泡:
實(shí)例：點(diǎn)擊按鈕 會(huì)以此彈出1和2，說明出現(xiàn)了事件冒泡
<div id="box">
<div @click="show2()">
<input type="button" value="按鈕" @click="show()" />
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(){
alert(1);
},
show2: function(){
alert(2);
}
}
});
}
</script>
阻止冒泡:
a). ev.cancelBubble=true; [原生JS]
<div @click="show2()">
<input type="button" value="按鈕" @click="show($event)" />
</div>
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(1);
ev.cancelBubble=true;
},
show2: function(){
alert(2);
}
}
});
b). @click.stop 推薦
<div id="box">
<div @click="show2()">
<input type="button" value="按鈕" @click.stop="show($event)" />
</div>
</div>
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(1);
},
show2: function(){
alert(2);
}
}
});
10栋豫、默認(rèn)行為(默認(rèn)事件):
阻止默認(rèn)行為:
a). ev.preventDefault(); [原生JS]
<div id="box">
<input type="button" value="按鈕" @contextmenu="show($event)" />
</div>
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(1);
ev.preventDefault();
}
}
});
}
</script>
b). @contextmenu.prevent 推薦
<div id="box">
<input type="button" value="按鈕" @contextmenu.prevent="show()" />
</div>
11挤安、鍵盤:
@keydown $event ev.keyCode
@keyup
示例1：
<div id="box">
<input type="button" value="按鈕" @keydown="show()" />
</div>
示例2：
<div id="box">
<input type="text" @keydown="show($event)" />
</div>
methods: {
show: function(ev){
alert(ev.keyCode);
}
}
常用鍵:
回車(ev.keyCode == 13)
a). @keyup.13
<input type="text" @keydown.13="show()" />
b). @keyup.enter
<input type="text" @keydown.enter="show()" />
c). 上、下丧鸯、左蛤铜、右
- @keyup/keydown.left
- @keyup/keydown.right
- @keyup/keydown.up
- @keyup/keydown.down
.....
12、屬性:
v-bind:src=""
width/height/title....
簡(jiǎn)寫:
:src="" 推薦
 效果能出來丛肢，但是會(huì)報(bào)一個(gè)404錯(cuò)誤
 效果可以出來围肥，不會(huì)發(fā)404請(qǐng)求
vue_屬性01.jpg
特殊屬性：class和style:
1、class
:class=""
v-bind:class=""
:style=""
v-bind:style="":class="{red:true, blue:true}"
<div id="box">
<strong :class="{red: true,big:true}">class屬性</strong>
</div>
<style type="text/css">
.red{
color: red;
}
.big{
font-size: 30px;
}
</style>
效果圖：
vue_class屬性01.jpg
:class="{red:a, blue:false}"
<div id="box">
<strong :class="{red:a,blue:false}">class屬性</strong>
</div>
<style type="text/css">
.red{color: red;}
.blue{background-color: blue;}
</style>
var vm=new Vue({
el: '#box',
data: {
a: true
}
});
-
:class="[red]" //red是data里面的數(shù)據(jù)
:class="[red,b,c,d]" //多個(gè)class的情況
![]()
vue_class屬性02.jpg
vue_class屬性02.jpg
- :class="json"
new Vue({
el:'#box',
data:{
json:{
red:true,
blue:true
}
}
});
<div id="box">
<strong :class="json">文字...</strong>
</div>
2蜂怎、style:
<strong :style="{color:'red'}">style屬性</strong>
<!-- 注意:red加引號(hào) -->
- :style="[c]"
vue_style01.jpg
- :style="[c,d]"
注意: 復(fù)合樣式虐先，采用駝峰命名法
vue_style02.jpg
- :style="json" --官方推薦
vue_style03.jpg
模板:
- {{msg}} 數(shù)據(jù)更新模板變化
- {{*msg}} 數(shù)據(jù)只綁定一次
vue_msg01.jpg
- {{{msg}}} HTML轉(zhuǎn)義輸出
vue_轉(zhuǎn)義輸出.jpg
過濾器:-> 過濾模板數(shù)據(jù)
系統(tǒng)提供一些過濾器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize --首字母大寫
currency 錢
{{msg| filterA 參數(shù)}}
....
實(shí)例如下：
過濾器01.jpg
交互:
Angular:$http （ajax對(duì)象）
如果vue想做交互
引入: vue-resouce (庫)
get:
獲取一個(gè)普通文本數(shù)據(jù):
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
給服務(wù)發(fā)送數(shù)據(jù):√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
PHP我不會(huì)也~~嗚嗚
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.#/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默認(rèn)名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
案例：百度下拉列表
作業(yè):
1. 簡(jiǎn)易留言板-> 確認(rèn)刪除? 確認(rèn)刪除全部 （模態(tài)框標(biāo)題更改）
2. 用vue get 寫個(gè)例子 weibo