一、MVVM
View，Model是Vue.js的核心。
實例化Vue的過程就是定義MVVM各個組成部分的過程。
1. 定義View
2. 定義Model
3. 創建一個Vue實例或"ViewModel"，它用於連接View和Model
舉例：
<!--這是View-->
<div id="app">{{message}}</div>
//創建一個Vue實例，它連接 View 與Model
new Vue({
el: '#app', （連接）
//這是Model
data:{
message:'Hello World!'
}
})
在vue中要使用data中定義的參數，用this.message
（angularjs中用$scope.message）
與angulajs的區別：angularjs需要ng-app和ng-controller，vue直接用id即可；angularjs定義數據$scope.參數名，vue要在data：中定義，方法也要在methods或者computed中定義，若要在方法中使用參數，要用this.參數名
二、指令
1.數據綁定
1）v-text={{}} (angular js 是 ng-bind和{{}})
（這兩個是一樣的，{{xxx}},這種情況是有弊端的，當網速很慢或者javascript出錯時，會暴露{{xxx}}）
<span v-text="message"></span>=
<span>{{message}}</span>
2）.v-html
（有html標籤，用v-text是輸出不出來的）
<div v-html="message"></div>
new Vue({
el: '#app',
data: {
message: '<h1>菜鳥教程</h1>' } })
得到<div>
<h1>菜鳥教程</h1>
</div>
在生產環境中動態渲染HTML是非常危險的，因爲容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在用戶提交和可操作的網頁上使用v-html。
2.判斷
1）v-show（angularjs中是ng-show）
根據表達式之真假值，切換元素的 display CSS 屬性。（DOM已經加載出來了）
2）.v-if和v-else和v-else-if(angularis中是ng-if、ng-else)
v-else和v-if一起出現，且裏面不用放參數，和if相反
用來判斷是否加載html的DOM（DOM還沒有加載出來）
- • v-if： 判斷是否加載，可以減輕服務器的壓力，在需要時加載。
- • v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。
v-if的安全級別更高，v-show只是隱藏了，通過頁面源代碼還是可以看到，安全級別低、
v-if更高的切換消耗（切換消耗指從未加載到加載或者從加載到未加載的狀況，需要添加或刪除這個元素），v-show需要更高的初始化渲染消耗
因此如果需要頻繁切換而對安性無要求，使用v-show；如果運行時，條件不能改變，使用v-if
3．循環v-for(angularjs是ng-repeat=“（key,value） in values”索引在前面)
(item,key)索引值放在後面！！
還可以（index, key,item）
<div v-for="(value, key, index) in object">
（自己試吧）
<li v-for="item in items">
{{item}}
</li>
v-for的應用：排序
用到了Vue的computed:或methods：屬性。定義方法的屬性
定義
var app =new Vue({
el:"#app",
data:{
items:[20,23,18,65,32,19,5,56,41]
},
computed:{
sortItems:function(){
//這個現成的sort方法只能給位數一樣的進行排序，所以調用了sortNumber這個方法，這個方法在後面定義，記住這個方法即可
return this.items.sort(sortNumber);
}
},
methods:{
methodSort:function(){
return this.items.sort(sortNumber);
}
}
})
function sortNumber(a,b){
return a-b
}
直接用sort方法只能排序同樣位數的，所以要用sortNumber
調用computed和methods的方法時，都可以不加（）
計算屬性 ：和普通屬性一樣是在模板中綁定計算屬性的，當data中對應數據發生改變時，計算屬性的值也會發生改變。
Methods：methods是方法，只要調用它，函數就會執行。
相同：兩者達到的效果是同樣的。
不同：計算屬性是基於它們的依賴進行緩存的，只有相關依賴會發生改變時纔會重新求職。只要相關依賴未改變，只會返回之前的結果，不再執行函數。
<div>{{sortItems}}</div>
<div>{{methodSort}}</div>
v-for循環數組，對象都可以
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
4．事件監聽v-on
v-on:事件=“方法”
v-on: 還有一種簡單的寫法，就是用@代替。
<button @click="jianfen">減分</button>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">減分</button>
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
}
}
})
鍵盤迴車事件v-on:keyup.enter,
回車：@keydown
常用：@keyup
@mousedown
@mouseover
@submit
https://www.cnblogs.com/xcsn/p/3413074.html
阻止冒泡：event.stopPropagation(); 或者直接 @click.stop="方法"（事件修飾符）
阻止默認事件：event.preventDefault() 或者直接@submit.prevent（事件修飾符）
5．數據雙向綁定v-model（和angularjs中的ng-model是一樣的）
必須用input框（或者其它textarea、 radio等）, 使用時必須先在data中定義一下。
<input type="text" v-model="message">
6．屬性v-bind（一切css樣式都可以綁定）
可以省略寫：
<a :href="url"></a>
<img v-bind:src="imgSrc" width="200px">
經常使用v-bind來綁定css樣式
1）、直接綁定class樣式
<div :class="className">1、綁定classA</div>
2）、綁定classA並進行判斷，在isOK爲true時顯示樣式，在isOk爲false時不顯示樣式。
<div :class="{classA:isOk}">2、綁定class中的判斷</div>
3）、綁定class中的數組
<div :class="[classA,classB]">3、綁定class中的數組</div>
4）、綁定class中使用三元表達式判斷
<div :class="isOk?classA:classB">4、綁定class中的三元表達式判斷</div>
5）、綁定style
<div :style="{color:red,fontSize:font}">5、綁定style</div>
6）、用對象綁定style樣式
<div :style="styleObject">6、用對象綁定style樣式</div>
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
7．其它指令
1）v-pre指令
在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。
<div v-pre>{{message}}</div>
頁面會顯示{{message}}
2)v-cloak指令( 類似ng-clock解決未加載完的問題)（不會用）
在vue渲染完指定的整個DOM後才進行顯示。它必須和CSS樣式一起使用，
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
3)v-once指令
在第一次DOM時進行渲染，渲染完成後視爲靜態內容，跳出以後的渲染過程。
<p>可以改變：{{ msg }}</p>
<p v-once>不可以改變：{{ msg1 }}</p>
（vue.js 較少用到自定義指令，因此就不放在這了）
三、組件（標籤）（定義時data必須是function，return數據）(可以extend定義後，再用component，直接定義比較簡單易懂)
Component組件
1、初始組件
組件就是製作自定義的標籤，這些標籤在HTML中是沒有的。
1）、全局化註冊組件（全局的也必須放在vue作用域的裏面才管用）
<div id="app">
<jspang></jspang>
用<jspang></jspang>代替template中的內容
</div>
這種只能定義一個，一個組件名定義一個組件，所以是component
Vue.component('jspang組件名',{
template:`<div style="color:red;">全局化註冊的jspang標籤</div>`
})
var app=new Vue({
el:'#app',
data:{
}
})
2）、局部註冊組件局部註冊組件和全局註冊組件是向對應的，局部註冊的組件只能在組件註冊的作用域裏進行使用，其他作用域使用無效。
<div id="app">
<panda></panda>
</div>
var app=new Vue({
el:'#app',
可以定義多個，所以要加s
components:{
"panda":{
template:`<div style="color:red;">局部註冊的panda標籤</div>`
}
}
})
3）、組件和指令的區別
組件註冊的是一個標籤，而指令註冊的是已有標籤裏的一個屬性。之後會在標籤中加屬性。Angularjs 就擅長用指令，在實際開發中還是用組件比較多，指令用的比較少。因爲指令看起來封裝的沒那麼好。
2、父子組件間的傳值
1）父傳子
parent: <template id="p">
<sub :id="id"></sub>
</template>
new Vue({
el:"#p",
data:{ id:10} ,
sub: compoments:{
sub:template:"<h1>{{id}}</h1>",
props:["id"]
}
2)子傳父
parent: <template id="p">
<sub @send="getdata"></sub>
</template>
new Vue({
el:"#p",
methods:{
getdata(input){
alert(input);
}
},
sub: compoments:{
sub:template:"<div><button @click="senddata"></button></div>",
methods:{
senddata(){
this.$emit("send","hello");
}
}
}
四、過濾器
內置過濾器全部取消
1、私有過濾器
<div id="app">
<td>{{col|capitalize}}</td>
</div>
new Vue({
el: '#app',
data: {
col:asdasd
},
filters: {
capitalize: function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
},
});
2、全局過濾器
<div id="app">
<!-- 首字符串大寫 -->
<div>首字母大寫過濾器：{{str | upcase}}</div>
<!-- 給過濾器傳入參數 -->
<p>求和過濾器：{{message | sum(10,20)}}</p>
</div>
//全局方法 Vue.filter()註冊一個自定義過濾器,必須放在Vue實例化前面
// 註冊一個首字母大寫的過濾器
Vue.filter("upcase", function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
// 全局註冊一個求和過濾器
Vue.filter('sum', function (value, a, b) {
return value + a + b;
});
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
}
五、路由
<div id="app">
<div class="content">
<router-link to="/goods">商品</router-link>
<router-link to="/ratings">評論</router-link>
<router-link to="/seller">商家</router-link>
</div>
<router-view></router-view>
</div>
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
var router = new VueRouter
({
routes:[
{ path: '/goods', component: goods },
{ path: '/ratings', component: ratings },
{ path: '/seller', component: seller },
{ path: '/', redirect: seller }
];
})
var app = new Vue({
el: '#app',
router
});
路由傳參：
<router-link :to="'/news/newsinfo/'+item.id"> 這塊有了參數
{path:"/news/newsinfo/:id",component:newsinfo},
接受參數：created(){
this.id=this.$route.params.id;
再根據這個id請求數據等操作
},
六、ajax請求數據
目前主流的 Vue 項目，都選擇 axios 來完成 ajax 請求，而大型項目都會使用 Vuex 來管理數據。使用 、cnpm install axios -S
安裝其他插件的時候，可以直接在 main.js 中引入並 Vue.use()，但是 axios 並不能 use，只能每個需要發送請求的組件中即時引入
首先在 main.js 中引入 axios
import axios from 'axios'
Vue.prototype.$ajax = axios
就可以在其它組件中使用
this.$ajax({
method: 'post',
url: '/user',
data: {
name: 'wise',
info: 'wrong'
}
})
}
this.$ajax({
method: 'get',
url,
}).then((res)=> {
console.log(res);
this.list=res.body;
});
用=>是因爲this不指代vue了，所以用this
還有一種辦法是：// let that = this （不能用var）