Vue.js的學習筆記
Vue.js
1.簡介
vue介紹：vue是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專注於 MVVM 模型的 ViewModel 層。它通過雙向資料繫結把 View 層和 Model 層連線了起來，通過對資料的操作就可以完成對頁面檢視的渲染。當然還有很多其他的mvmm框架如Angular，React都是大同小異，本質上都是基於MVVM的理念。 然而vue以他獨特的優勢簡單，快速，組合，緊湊，強大而迅速崛起
官方線上文件:https://cn.vuejs.org/v2/guide/index.html
瞭解Vue.js :https://www.cnblogs.com/Renyi-Fan/p/9419742.html#_label0_18
作為興起的框架,Vue.js拋棄了對IE8的支援,移動端支援安卓4.2+ 和IOS7+
在使用之前首先需要匯入Vue.js的庫:<script src="js/vue.js"></script>
Vue.js的Hell word:
記住一點,寫有Vue語句的script放在html程式碼的下面,否則不會實現效果
<div id="app">{{message}}</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello world'
}
});
</script>
將js中message的值替換到了HTML模版中{{message}}中
特性1:資料繫結
H1顯示的內容繫結你文字框中內容 v-model為資料繫結元件
一切使用vue從 new Vue開始,這一步不可缺少
<div id="app">
<h1>Your input is {{message}}</h1>
<input type="text" v-model="message">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world'
}
});
</script>
特性2:元件化(自定義HTML標籤)
<div id="app">
<message content="Hello World"></message>
</div>
<script>
var Message = Vue.extend({
props: ['content'],
template: '<h1>{{content}}</h1>'
});
Vue.component('message', Message);
var vm = new Vue({
el: '#app',
});
</script>
- 基礎特性
2.1例項及選項
Vue.js的使用都是通過建構函式Vue{{option}}建立一個Vue的例項:
Var vm=new Vue({}).一個Vue例項相當於一個MVVM模式中的ViewModel,如圖:
在例項化時我們可以傳入一個選項物件,包含資料,模版,掛載元素,方法,生命週期鉤子等選項.
2.1.1模版
選項中主要影響模版或DOM的選項有el和template,屬性replace和template需要一起使用
el:型別為字串,DOM元素或函式,例如el:’#app’ 在初始項中指定了el,例項將立即進入編譯過程
template:型別為字串.預設將template值替換掛載元素(el值對應的元素).例子如下:
<div id="app">
<p>123</p>
</div>
<script id="tpl" type="x-template">
<div class="tpl">
<a>This</a>
</div>
</script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
template:'#tpl'
})
</script>
頁面顯示的只有This,原因就是因為用#tpl的內容把#app給代替了.
2.1.2 資料
Vue.js通過data屬性定義資料 使用data的注意事項:1.data的值必須是一個函式,並且返回值是原始物件
2.data中的屬性和props中的不能重名.
var data={a:1}
var vm=new Vue({
data:data
})
vm.$data===data//true
vm.a===data.a//true
//設定屬性會影響到原始資料
vm.a=2
data.a//2
//反之亦然
data.a=3
vm.a//3
自定義一個標籤,然後給標籤定義屬性 解析:
My-component是標籤名 ,props用來繫結屬性,data定義資料,給desc賦值為123,template為模版,具體表名標籤的內容.
<div id="app">
<my-component title="myTitle" content="myContent"> </my-component>
</div>
<script>
var Mycomponent = Vue.component('my-component', {
props: ['title', 'content'],
data: function () {
return {
desc: '123'
}
},
template: '<div><h1>{{title}}</h1><p>{{content}}</p><p>{{desc}}</p></div>'
})
new Vue({
el:'#app'
})
</script>
2.1.3方法
我們可以通過屬性methods物件來定義方法,並且使用v-on指令來監聽DOM事件,例如:
<div id="app">
<button v-on:click="alert">alert</button>
</div>
<script>
new Vue({
el:'#app',
data:{a:1},
methods:{
alert:function () {
alert(this.a)
}
}
})
</script>
2.1.4生命週期
2.2資料繫結
Vue.js的核心是一個響應式的資料繫結系統,建立繫結後,DOM將和資料保持同步,無需手動維護DOM,是程式碼簡潔易懂.
2.2.1資料繫結語法
v-bind:id可以簡寫為:id,這時中間的div的id為id-1,span標籤顯示的值為names的數值
<div id="app">
<span v-once="name">{{names}}</span>
<div v-bind:id="'id-'+id"></div>
</div>
var vm = new Vue({
el: '#app',
data: {
id: 1,
index: 0,
name: 'vue',
avatar: 'http://...',
count: [1, 2, 3, 4, 5],
names: ['vuel.0', 'vue2.0'],
items: [
{name: 'vue1.0', version: '1.0'},
{name: 'vue1.0', version: '1.0'}
]
}
});
在{{}}中的資料能使用表示式,但是每個繫結值只能使用單個表示式,不支援正則表示式
{{index==0?'a':'b'}}<br>
{{index+1}}<br>
{{name.split('').join('|')}}
指令
格式:v-
- 引數
<img v-bind:src=”avatar”/>
指令v-bind可以在後面帶一個引數,用冒號(:)隔開,src即引數.此時img標籤中的src會與vm例項中的acatar繫結,等同於<img src=”{{acatar}}”>
- 修飾符
以半形句號.開始的特殊字尾,用於表示指令應該以特殊方式繫結.
<button v-on:click.stop=”doClick”></button>
v-on的作用是在對應的DOM元素上繫結事件監聽器doClick為函式名,stop為修飾符,作用是停止冒泡,相等於呼叫了e.stopPropagation()
2.2.2計算屬性
1.computed為計算,它生產了一個物件 fullname的物件,這個物件將 vm這個Vue物件中的data中的兩個數值相加,this指的是當前的Vue物件.
<div id="app">
<p>{{firstname}}</p>
<p>{{lastname}}</p>
<p>{{fullname}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: 'Gavin',
lastname: 'GLY'
},
computed: {
fullname: function () {
return this.firstname + '' + this.lastname
}
}
});
</script>
當你在瀏覽器中的控制檯輸出vm.firstname=’xxx’的時候,將會把fullname和firstname的值都改變
2.Setter
頁面顯示為1.00,這種方式能處理價格能避免前後端資料型別轉換產生的問題
在更改vm.price=2,vm.cents會更新為200,傳給後端就無需轉換資料
<div id="app">
<p>{{price}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
cents: 100,
},
computed: {
price: {
set: function (newValue) {
this.cents = newValue * 100;
}, get: function () {
return (this.cents/100).toFixed(2);
}
}
}
})
</script>
2.2.3表單控制元件
v-model代表當前標籤繫結一個值,繫結的值顯示的就是這個標籤當前的狀態
<div id="app">
<!--text 使用者輸入和顯示一致-->
<input type="text" v-model="message">
<span>輸入為:{{message}}</span>
<!--Radio 單選框--><br>
<label><input type="radio" value="male" v-model="gender">男</label>
<label><input type="radio" value="female" v-model="gender">女</label>
<p>{{gender}}</p>
<!--Checkbox 單選--><br>
<input type="checkbox" v-model="checked">
<span>checked:{{checked}}</span>
<!--多選--><br>
<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="2" v-model="multiChecked">2</label>
<label><input type="checkbox" value="3" v-model="multiChecked">3</label>
<p>multiChecked:{{multiChecked.join('|')}}</p>
<!--select 單選--><br>
<select v-model="selected">
<option >A</option>
<option >B</option>
<option >C</option>
</select>
<span>selected:{{selected}}</span>
<!--多選--><br>
<select v-model="multiselected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select><br>
<span>multiselected:{{multiselected}}</span>
<!--繫結value 選中的話checked的值為a,未選中的話就是b-->
<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a:'123',
b:'321',
message: '',
gender: '',
&nbs