0. 前言
在北京來說，vue.js比較受廣大的公司歡迎，用的比較多，因為從vue.js官方文檔就能看出來它的優點，易用，也就是簡單實用的意思，靈活，漸進式的框架，那什么是漸進式框架？就好比給你一個空屋，通了煤水電網，有床夠睡，需要什么自己添。它還有一大特點就是性能上，17kb min+gzip 運行大小，從數字就能看出來vue.js比較輕，輕量級的，還有就是超快的虛擬DOM，就是對復雜的文檔DOM結構，進行最小化地DOM操作，好吧，看看今天要說的?。?！
1. 簡介
Vue.js 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。
Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
2. 代碼實現
在學習一個新的框架的時候，第一個demo都是hello world，不要問我為什么，我也不知道，不是有句話說“世界上本來沒有路，只是走的人多了，變成了路”，我感覺也就是用的人多了，漸漸的每個框架啊什么的第一個demo，也就成了第一個說明文檔，所以今天，第一個我也來說一下hello world
1. hello world
HTML代碼
<div id="app">{{msg}}</div>
JS代碼
new Vue({
el:'#app',
data:{
msg:'hello world',
}
})
這只是一個簡單的demo，當你學會它，離學會vue也就成功了一半了，
2. v-html
v-html指令，可以更新元素的innerHMT
這里稍微加一點難度，來一個比1+1=3還難的題，這里我想加入一個h1標簽在hello里，怎么加？而且h1標簽還是語義標簽，要讓它表現出來，正常情況下，你添加之后會是什么樣的，是。。。
那怎么處理，就用到了v-html指令
HTML代碼
<div id="app">
<div v-html="msg"></div>
{{address}}
</div>
JS代碼
new Vue({
el:'#app',
data:{
msg:'<h1>hello</h1>',
address:"北京"
}
})
3. v-if
v-if 條件渲染指令，根據其后表達式的bool值進行判斷是否渲染該元素
HTML代碼
<div id="app">
<div v-if="flag">
今天有霧霾嗎?
</div>
</div>
JS代碼
new Vue({
el:'#app',
data:{
flag:true
}
})
那么，我們把flag的bool值改成false，會成什么樣子的，當然會不顯示了，那么我在這里就不在贅述了。
4. v-for
v-for 指令可以綁定數據到數組來渲染一個列表
HTML代碼
<div id="app">
<ul>
<li v-for="(x,index) in list">
{{index+1}} {{x.name}} {{x.age}} {{x.address}} {{x.tel}}
</li>
</ul>
</div>
JS代碼
new Vue({
el:'#app',
data:{
list:[
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
},
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
},
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
},
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
}
]
}
})
是不是覺得很方便啊
5. 賦值給變量
我們還可以將對象賦值給一個變量，用到的時候直接引用變量名
HTML代碼
<div id="app">{{msg}}</div>
JS代碼
var data = {
msg:'hello'
};
var vm = new Vue({
el:'#app',
data:data
});
6. v-on
用 v-on 指令監聽 DOM 事件，還可以簡寫成@
HTML代碼
<div id="app">
<p>{{msg}}</p>
<button v-on:click="clickme">點我</button>
</div>
JS代碼
var vm = new Vue({
el:'#app',
data:{
msg:'tips'
},
methods:{
clickme:function(){
this.msg = new Date-0;
}
}
})
是不是該問我his.msg = new Date-0; 有誰知道后面Date-0是什么意思呢？
把毫秒數轉換成數字，然后你把她改成@click也可以，也能實現同樣的效果
7. v-bind
v-bind 主要用于屬性綁定，如 :src :class :style 屬性綁定
HTML代碼
<div id="app">
</div>
JS代碼
new Vue({
el:'#app',
data:{
src:'1.jpg'
}
})
當然v-bind也能簡寫，簡寫成 : 就可以了
v-bind綁定style
HTML代碼
<div id="app">
<div :style="{'backgroundColor':bgc,'font-size':fs+'px'}">aaaaa</div>
</div>
new Vue({
el : '#app',
data : {
bgc : '#dfdfdf',
fs : 30
}
})
v-bind還可以綁定對象和數組
HTML代碼
<div id="app">
<div :class="{clzA:a,clzB:b}">aaaa</div>
</div>
JS代碼
new Vue({
el : '#app',
data : {
a : true,
b : false
}
})
上面的a和b代表鍵值對里的key，key是一個樣式class，而value是boolean類型的值。
綁定數組類型
CSS代碼
.clzA{
color:red;
}
.clzA{
background-color:green;
}
HTML代碼
<div id="app">
<div :class="[a,b]">aaaa</div>
</div>
JS代碼
new Vue({
el : '#app',
data : {
a : 'clzA',
b : 'clzB',
}
})
8. v-model
v-model的指令能使數據雙向數據綁定
這里我們直接寫一個demo，里面有兩個輸入框，實現在輸入框輸入，輸入兩個輸入框的值的乘積，唉，整的跟繞口令是的，哈哈
HTML代碼
<div id="app">
<input v-model="price" placeholder="price">
<input v-model="number" placeholder="number">
<p>{{total}}</p>
</div>
JS代碼
new Vue({
el:'#app',
data:{
number:15,
price:3.29
},
computed:{
total:function(){
return this.number*this.price
}
}
})
computed相當于屬性的一個實時計算，如果實時計算里關聯了對象，那么當對象的某個值改變的時候，同時會出發實時計算
9. 阻止冒泡，默認行為
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。在vue里面，有的時候我們也需要阻止冒泡還有默認行為，那么看看它們是怎么實現的呢？
阻止冒泡
CSS代碼
.bdr{
border: 3px solid blue;
padding: 10px;
}
HTML代碼
<div id="app">
<div class="bdr" @click="outter">
outter
<div class="bdr" @click="middle">
middle
<div class="bdr" @click="inner">
inner
</div>
</div>
</div>
</div>
JS代碼
new Vue({
el : '#app',
methods : {
inner : function () {
alert ('inner')
},
middle : function () {
alert ('midder')
},
outter : function () {
alert ('outter')
}
}
})
不阻止冒泡的時候是這樣的，那么我們阻止了之后呢？在HTML中inner的div中 @click.stop="inner"這樣寫，就阻止了冒泡
你看是不是就彈出來一次
阻止默認行為
HTML代碼
<div id="app">
<a @click="clk">百度</a>
</div>
JS代碼
new Vue({
el : '#app',
methods : {
clk : function () {
alert ('百度')
}
}
})
這是沒有阻止默認行為的，下面我們就來一個阻止默認行為的，寫法同上，@click.prevent="clk"，主要看效果
這是阻止默認行為之后的效果
10. 組件
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。
要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。 例如：
Vue.component('my-component', {
// 選項
})
對于自定義標簽名，Vue.js 不強制要求遵循 W3C規則 （小寫，并且包含一個短杠），盡管遵循這個規則比較好。
HTML代碼
<div id="app">
<my-component></my-component>
</div>
JS代碼
Vue.component('my-component',{
template:'<div>A custom {{msg}}!</div>',
data:function () {
return{
msg:'hello'
}
}
})
new Vue({
el : '#app'
})
上面的是全局組件，組件在注冊之后，便可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用。當然還有一種局部組件
局部組件
不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：
HTML代碼
<div id="app">
<my-component></my-component>
</div>
JS代碼
new Vue({
el:'#app',
components: {
// <my-component> 將只在父模板可用
'my-component': {
template: '<div>A custom {{msg}}!</div>',
data:function(){
return {
msg:'hello'
}
}
}
}
})
11. 使用 Prop 傳遞數據
組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據?？梢允褂?props 把數據傳給子組件。
prop 是父組件用來傳遞數據的一個自定義屬性。子組件需要顯式地用 props 選項聲明 “prop”
HTML代碼
<div id="app">
<my-component msg="hello"></my-component>
</div>
JS代碼
Vue.component('my-component',{
props:['msg'],
template:'<div>A custom {{msg}}!</div>'
})
new Vue({
el : '#app'
})
12. 動態 Prop
類似于用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件：
HTML代碼
<div id="app">
<input type="text" v-model="parentMsg">
<my-component :msg="parentMsg"></my-component>
</div>
JS代碼
Vue.component('my-component',{
props:['msg'],
template:'<div>A custom {{msg}}!</div>'
})
new Vue({
el : '#app',
data : {
parentMsg : 'hello'
}
})
3. 結束語
希望我寫的東西對讀者老爺們有所幫助，喜歡的點贊?。。。?/p>
