vue學習過程記錄第一講：初步認識vue

 

vue:
	讀音:	v-u-e
	view

	vue究竟是什麼?
		一個mvvm框架(庫)、和angular相似
		比較容易上手、小巧
	mvc:
		mvp
		mvvm
		mv*
		mvx
	官網:http://cn.vuejs.org/	
	手冊： http://cn.vuejs.org/api/

vue和angular區別?
	vue——簡單、易學
		指令以 v-xxx
		一片html代碼配合上json，在new出來vue實例
		我的維護項目

		適合: 移動端項目,小巧

		vue的發展勢頭很猛，github上start數量已經超越angular
	angular——上手難
		指令以 ng-xxx
		全部屬性和方法都掛到$scope身上
		angular由google維護
		
		合適: pc端項目

	共同點: 不兼容低版本IE
-------------------------------------------
vue基本雛形:
	angular展現一條基本數據:
		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'
				}
			});
經常使用指令:
	angular: 
		 ng-model   ng-controller
		 ng-repeat
		 ng-click
		 ng-show  

		$scope.show=function(){}
	指令: 擴展html標籤功能,屬性

	v-model	通常表單元素(input)	雙向數據綁定

	循環:
		v-for="name in arr"
			{{$index}}

		v-for="name in json"
			{{$index}}	{{$key}}
	
		v-for="(k,v) in json"
	事件:
		v-on:click="函數"

		v-on:click/mouseout/mouseover/dblclick/mousedown.....

		new Vue({
			el:'#box',
			data:{ //數據
			    arr:['apple','banana','orange','pear'],
			    json:{a:'apple',b:'banana',c:'orange'}
			},
			methods:{
			    show:function(){	//方法
			        alert(1);
			    }
			}
		});
	顯示隱藏:
		v-show=「true/false」
bootstrap+vue簡易留言板(todolist):
	
	bootstrap: css框架	跟jqueryMobile同樣
		只須要給標籤 賦予class，角色
		依賴jquery

	確認刪除？和確認刪除所有麼?
-----------------------------------------
事件:
	v-on:click/mouseover......
	
	簡寫的:
	@click=""		推薦

	事件對象:
		@click="show($event)"
	事件冒泡:
		阻止冒泡:  
			a). ev.cancelBubble=true;
			b). @click.stop	推薦
	默認行爲(默認事件):
		阻止默認行爲:
			a). ev.preventDefault();
			b). @contextmenu.prevent	推薦
	鍵盤:
		@keydown	$event	ev.keyCode
		@keyup

		經常使用鍵:
			回車
				a). @keyup.13
				b). @keyup.enter
			上、下、左、右
				@keyup/keydown.left
				@keyup/keydown.right
				@keyup/keydown.up
				@keyup/keydown.down
			.....
-----------------------------------------
屬性:
	v-bind:src=""
		width/height/title....
	
	簡寫:
	:src=""	推薦

	<img src="{{url}}" alt="">	效果能出來，可是會報一個404錯誤
	<img v-bind:src="url" alt="">	效果能夠出來，不會發404請求
-----------------------------------------
class和style:
	:class=""	v-bind:class=""
	:style=""	v-bind:style=""

	:class="[red]"	red是數據
	:class="[red,b,c,d]"
	
	:class="{red:a, blue:false}"

	:class="json"
		
		data:{
			json:{red:a, blue:false}
		}
	--------------------------
	style:
	:style="[c]"
	:style="[c,d]"
		注意:  複合樣式，採用駝峯命名法
	:style="json"
-----------------------------------------
模板:
	{{msg}}		數據更新模板變化
	{{*msg}}	數據只綁定一次
	
	{{{msg}}}	HTML轉意輸出
-----------------------------------------
過濾器:-> 過濾模板數據
	系統提供一些過濾器:
	
	{{msg| filterA}}
	{{msg| filterA | filterB}}

	uppercase	eg:	{{'welcome'| uppercase}}
	lowercase
	capitalize

	currency	錢

	{{msg| filterA 參數}}

	....
-----------------------------------------
交互:
	$http	（ajax）

	若是vue想作交互

	引入: vue-resouce

	get:
		獲取一個普通文本數據:
		this.$http.get('aa.txt').then(function(res){
		    alert(res.data);
		},function(res){
		    alert(res.status);
		});
		給服務發送數據:√
		this.$http.get('get.php',{
		    a:1,
		    b:2
		}).then(function(res){
		    alert(res.data);
		},function(res){
		    alert(res.status);
		});
	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.360.cn/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名字，默認名字就是"callback"
		}).then(function(res){
		    alert(res.data.s);
		},function(res){
		    alert(res.status);
		});