官網
http://cn.vuejs.org/
mvvm 框架--比angular更小巧，文檔閱讀方便，全部組件化
版本2.0
vue
指令以 v-xxx
一段html代碼 加一個json 再new出一個vue實例
適合做移動端開發 比較小巧
上手簡單
angular 適合pc 端開發
上手難
指令一 ng-xxx
屬性和方法都在$scope上
這兩個都不兼容ie低版本ie8以下不兼容
第一步 拿到vue 的 庫文件
vue.min.js 最新的2.0以上版本
思想：
m 數據 data
v 視圖 html
c 控制器 new vue()
--------------------------------------
vue的雛形
要求：展示一條數據
html：
<div id="box">
{{msg}}
</div>
js：
var c = new Vue({ new出Vue額對象
el:'#box', 選擇器，和jquery一樣
data:{ data里可以放字符串，json ，數組， 布爾，數字
msg:'document' 要展示的數據內容
num:12,
boor:true
.......
}
});
注意： 這里的c是可以任意起名的，也可以不寫，不寫的話就是this。想要拿到里面的num的值，可以這樣 this.data.num
----------------------------------
vue常用的指令
v-model 一般放在表單元素上 雙向數據綁定
html
<div id="box">
<input type="text" v-model="msg" />
<input type="text" v-model="msg" />
</div>
v-repeat 循環
<!--循環-->
<!--2.0版本后$key,$index,失效了？-->
<!--后來查閱了文檔才知道，這是因為在Vue2.0中，v-for迭代語法已經發生了變化：
丟棄了:
新數組語法
value in arr
(value, index) in arr
新對象語法
value in obj
(value, key) in obj
(value, key, index) in obj
-->
html
<div id="box" >
<ul>
<li v-for=" (value, index) in arr">
{{value}} {{index}}
</li>
<hr />
<li v-for='(key,value,index) in json'>
{{value}} {{key}} {{index}}
</li>
</ul>
</div>
------------------------------------------------------------------
事件--- v-on
click
var c = new Vue({
el:'#box',
data:{
arr:['1','2','age'],
json:{'a':11,'b':22,'c':33}
},
methods:{ 事件方法到dethods里
事件名:function(){
alert(1)
//要求彈出json的c的值
alert(this.json.c)
}
}
});
v-on:click = "事件名()"
ddlclick mouseover mouseout ......
==========
深入：
v-on:click="show()" 一般是這樣
@click="show()" 這是簡寫 建議用
---
事件對象：
$event定死的，必須有$
@click(show($event))
methods:{
show:function(ev,n){
alert(ev.clientX)
alert(n)//n也可以拿到
//這里可以拿到事件對象，可以用原生寫了
}
}
<input id="btn" type="button" value="按鈕" @click="show($event,3)" />
---
事件冒泡：
1. ev.cancelBubble=true;
事件對象 加 原生里的阻止冒泡方法cancelBubble=true
2. @click.stop="show()" 火狐，谷歌支持，ie不測試
直接在c事件后加stop
阻止事件默認行為：
1. ev.preventDefaule=true;
事件對象 加 原生里的阻止默認行為
2. @contextmenu.prevent="show1()"
鍵盤事件：
onkeydown onkeyup
ev.keycode 獲取到鍵碼
也可以@keydown.enter="show()"
up 上
left 左
常用鍵都封裝了。字母沒有
等 方便快速
-----------------------------------------
顯示隱藏
v-show
v-show='true/false'; true是顯示 false是隱藏
要求點擊一個按鈕讓一個對象隱藏：
html：
<input type="button" v-on:click="a=false"/>
<div v-show='a'></div>
在data里設置a=true，意思就是剛開始是顯示的 在點擊按鈕后把數據a變成false傳給v-show
data{
a:true
}
要求點擊一下隱藏再點一下顯示依次往下走：
核心代碼：
show:function(){
if(this.a==false){
this.a=true;
}else{
this.a=false;
}
}
<input type="button" v-on:click="show()"/>
寫個方法判斷a的值並且賦值
留言信息表例子思路
數據第一，有數據vue自會給你渲染視圖
1.v-on:click把input里的數據存到data里 再用v-for渲染（注意數據格式），在此之前在input上加v-model（把數據存在this上）
2.刪除一個的時候需要拿到本條的index在data里刪數據（一般是數組）。
3.刪除全部需要存一個變量newIndex=index，這樣在下面調用的時候就可以刪除，詳細看demo
==============================
屬性：
<img src="{{url}}"/>
<img v-bind：src='url' />
簡寫 <img :src='url' />
v-bind 是vue專門綁定屬性的
<!--<img src="{{url}}" id="img"/>-->
<!--屬性數據中 被2.0丟棄這種寫法 ，之前這樣寫會有效果但是會報404錯，所以用以下這種方法：-->
<img v-bind:src="url" id="img"/>
<img :src="url" id="img" :width='a'/>
特殊屬性
class
1. :class=[red,blue] 對應的是數據
data{
red:'red',
blue'blue'
}
2. :class="{red:a,blue:b}" 對應的是 類名和數據
data{
a:true,
b:false
}
3. 也可以吧json直接寫到數據里，看起來更舒服-推薦
：clsss="json";
data{
json:{
red:true,
blue:false
}
}
==========
style 和class的用法一樣
1. :styel=[c,d];/.每一個樣式都是一條json
data:{
c:{color:'red'},
d:{backgroundColor:'blue'}//復合樣式用駝峰命名法
}
2. :style={json};
data:{
json{
color:"red",
background:"blue"
}
}
========================
模版
http://www.cnblogs.com/jiangxiaobo/p/6068025.html
{{msg}} 數據雙向綁定 數據更新模版也會跟着更新
{{*msg}} 數據只綁定一次 數據更新不更新模版 已失效
<p v-once>{{msg}}</p>
<!--之前是{{*msg}} 2.0 后 需要加v-once 作用是 添加一次性模版 不支持數據更新-->
{{{msg}}} 數據轉譯輸出 轉成html 已失效
<p v-html='msg'>{{msg}}</p>
新的指令 v-once 和 v-html 需要綁定數據
==============
vue2.0之前 過濾器
體統提供一些過濾器
{{msg| 過濾器1}}
{{msg| 過濾器1 | 過濾器2}}
常用的過濾器有
uppercase
lowercase
capitalize
vue2.0之后廢除過濾器，所以需要自己定義過濾器
語法：
Vue.filter('過濾器名',function(){})
例如首字母大寫的過濾器這樣寫
<div id="app">
{{message|uppercase}}
</div>
//過濾器
Vue.filter('uppercase', function(value) {
if (!value) { return ''}
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
過濾器必須寫在vue對象之前才會生效
var vm = new Vue({
el:'#app',
data: {
message: 'test'
}
}
-------------
常用過濾器 封裝
//全部大寫
Vue.filter('Uppercase',function(value){
if(!value){return ''}
value = value.toString();
return value.toUpperCase();
})
//全部小寫
Vue.filter('lowercase',function(value){
if(!value){return ''}
value = value.toString();
return value.toLowerCase();
})
//把時間戳轉換成北京時間---1
Vue.filter('time', function (value) {
return new Date(parseInt(value) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
})
//把時間戳轉換成北京時間---2 比較麻煩了（原生）優點不依賴框架
Vue.filter('time',function(value){
function toDou(n){
return n<10?'0'+n:''+n;
}
var oDate = new Date(value*1000);
return oDate.getFullYear()+'-'+toDou(oDate.getMonth()+1)+'-'+toDou(oDate.getDate())+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
})
//補零
Vue.filter('todou', function (n) {
return n<10?'0'+n:''+n;
})
----------------
==================================
交互
本身vue.js不提供交互，需要引vue的交互模塊
vue-resource.min.js
get
獲取數據
methods:{
show:function(){
this.$http.get('22.txt').then(function(res){
alert(res.data)
},function(res){
alert(res.status)
})
}
}
2.0 之后get發送數據貌似不好使，沒深究，用post就行了 ----不使用min版js就行
發送數據
post
methods:{
show:function(){
this.$http.post('get.php',{
a:2, //參數 json 發送數據
b:3
},{
emulateJSON:true//加個聲明
}).then(function(res){
alert(res.data)
},function(res){
alert(res.status)
})
}
}
jsonp
<!--
vue-resource.min.js 不能用於jsonp 還有 連接php文件時有問題
請使用 vue-resource.js 太坑了 以后再也不用min版了。
-->
獲取接口
https://sug.so.360.cn/suggest?word=a 好搜的接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= 百度
js:
methods:{
show:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{ //接口末尾不能有空格
word:'a' //搜索的內容
}).then(function(res){
console.log(res.data.s)
},function(res){
alert(res.status)
})
}
}
-------------------------------------------------------
百度搜索下拉
看 dome 吧
get 練習 微博留言板
注意事項
數據data中數據變量名 和 事件函數名不要一樣 不然找事件會找不到 this先在數據變量里找 再去 找事件
此片博文是轉載 Lookforto 作者