一、Vue核心知識
1.1.Vue的基本簡介
學習一門技術首先登陸其官網，中文網址纳鼎，英文網址，vue是一款漸進式JavaScript框架裳凸，作用是為了動態(tài)構建用戶界面贱鄙，該框架遵循MVVM模式，編碼簡潔姨谷，體積小逗宁，運行效率高；他借鑒了angular的模板和數據綁定技術梦湘，借鑒了react的組件化和虛擬DOM技術瞎颗，當然，該技術也存在一個Vue全家桶践叠，例如vue腳手架：vue-cli，ajax請求：vue-resource嚼蚀，路由：vue-router禁灼，狀態(tài)管理：vuex，圖片懶加載：vue-lazyload轿曙，移動端UI組件庫：min-ui弄捕，PC端組件庫：element-ui僻孝，頁面滑動：vue-scroller等等插件；
1.2.Vue的基本使用
<div id="app">
<input type="text" v-model="username">
<p>Hello {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//創(chuàng)建Vue實例
const vm = new Vue({ // 配置對象
el:'#app', // element:選擇器
data:{ //數據（Model）
username:'世界'
}
})
</script>
vue的HelloWord編碼說明
- 使用vue首先引入Vue.js守谓，然后創(chuàng)建Vue對象穿铆，其中el表示指定的
根element選擇器，data是指初始化數據斋荞，雙向數據綁定使用v-model荞雏，顯示數據使用語法：{{xxx}}； - vue的MVVM的體現(xiàn)就是：
model代表模型平酿，上述代碼就是數據對象（data）,view代表視圖凤优，就是vue中的模板頁面，viewModel代表是視圖模型（vue實例）蜈彼；
1.3.模板語法
所謂的模板就是動態(tài)的Html頁面筑辨，包含了一些JS語法代碼，在Vue中使用雙大括號表達式和指令（以v-開頭的自定義標簽屬性）幸逆；
雙大括號表達式
語法是：{{xxx}}棍辕，作用就是向頁面輸出數據，可以調用對象的方法还绘，例如{{msg.toUpperCase()}}楚昭；
指令：強制數據綁定
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<img src="imgSrc" alt="">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'Hello Word',
imgSrc: 'http://image.luokangyuan.com/1.jpg'
}
})
</script>
</body>
上述代碼中的img標簽的src屬性不會獲取到data中定義的imgSrc屬性的值，這個時候就需要使用指令強制數據綁定蚕甥，功能就是指定變化的屬性值哪替，完整寫法是：v-bind:src='imgSrc'，一般采用簡潔寫法：:src='imgSrc'菇怀；正確寫法如下：
<img :src="imgSrc" alt="">
指令：綁定事件監(jiān)聽
<body>
<div id="app">
<button v-on:click = 'test1'>test1</button>
<button v-on:click = 'test2(msg)'>test2</button>
<button @click = 'test'>test</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'Hello Word',
imgSrc: 'http://image.luokangyuan.com/1.jpg'
},
methods: {
test1() {
alert(123)
},
test2(content) {
alert(content)
},
test() {
alert(123)
}
}
})
</script>
</body>
綁定事件監(jiān)聽指令的作用就是綁定指定事件名的回調函數凭舶，完整寫法：v-on:click='xxx'或者v-on:click='xxx(參數)'再或者v-on:click.enter='xxx'，簡潔寫法就是：@click='xxx'爱沟，使用@符號帅霜；
1.4.計算屬性和監(jiān)視
計算屬性
在computed屬性對象中定義計算屬性的方法，在頁面中使用{{方法名}}來顯示計算的結果呼伸；
<body>
<div id="app">
姓：<input type="text" placeholder="姓氏" v-model="firstName"><br>
名：<input type="text" placeholder="名字" v-model="lastName"><br>
姓名1（單向）：<input type="text" placeholder="姓名1" v-model="fullName1"><br>
姓名2（單向）：<input type="text" placeholder="姓名2"><br>
姓名3（雙向）<input type="text" placeholder="姓名3雙向">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B'
//如果將 fullName1寫在這個地方身冀，那么改變firstName和lastName的值并不會同時改變fullName1的值
// 所以需要使用到計算屬性，將fullName1寫入computed屬性對象中括享，將方法的返回值作為輸出值
// fullName1：'A B'
},
computed: {
// 這個f方法在初始化會執(zhí)行搂根，當相關屬性發(fā)生改變時也會執(zhí)行
fullName1() { // 計算屬性中的一個方法，方法的返回值作為屬性值
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
計算屬性的get和set
使用計算屬性實現(xiàn)上述的雙向綁定铃辖，代碼如下：
<body>
<div id="app">
姓：<input type="text" placeholder="姓氏" v-model="firstName"><br>
名：<input type="text" placeholder="名字" v-model="lastName"><br>
姓名3（雙向）<input type="text" placeholder="姓名3雙向" v-model="fullName3">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B'
// fullName1：'A B'
},
computed: {
fullName3: {
// 回調函數：你定義的剩愧，你沒有調用，但最終他執(zhí)行了
// 回調函數娇斩，當需要讀取當前屬性值時回調仁卷，根據相關的數據計算并返回當前屬性的值
get(){
return this.firstName + ' ' + this.lastName
},
// 回調函數穴翩，監(jiān)視當前屬性的變化，當屬性值發(fā)生改變時回調锦积，更新相關的屬性數據
set(value){
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
</script>
</body>
注意：計算屬性存在緩存芒帕，多次讀取只執(zhí)行一次getter計算；
監(jiān)視
通過vm對象的$watch()方法或者watch配置來監(jiān)視某一個屬性的值是否發(fā)生變化丰介，當屬性發(fā)生變化時背蟆，通過執(zhí)行回調函數來執(zhí)行相關的功能，下面的代碼是使用計算屬性完成的同一個功能基矮，
<body>
<div id="app">
姓：<input type="text" placeholder="姓氏" v-model="firstName"><br>
名：<input type="text" placeholder="名字" v-model="lastName"><br>
姓名2（單向）：<input type="text" placeholder="姓名2" v-model="fullName2"><br>
姓名3（雙向）<input type="text" placeholder="姓名3雙向">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B'
},
watch: {
// 這個方法就是監(jiān)視firstName淆储，值發(fā)生改變是被調用執(zhí)行函數
// 函數可以傳入兩個參數代表新值和改變之前的值，也可以傳一個家浇，也可以不傳
firstName: function(value){
this.fullName2 = value+ ' ' + this.lastName
}
}
})
vm.$watch('lastName',function(value){
this.fullName2 = this.firstName + ' ' + value
})
</script>
</body>
1.5.class和style綁定
在某些頁面中本砰，某些元素的樣式是動態(tài)發(fā)生變化的，class和style綁定就是用來實現(xiàn)動態(tài)改變樣式效果的技術钢悲，其中class綁定中点额，表達式可以是字符串，可以是對象莺琳，也可以是數組还棱，實例如下：
<head>
<meta charset="UTF-8">
<title>class和style綁定</title>
<style>
.aClass{color: red}
.bClass{color: blue}
</style>
</head>
<body>
<div id="app">
<h1>class綁定</h1>
<p :class="a">我是字符串</p>
<p :class="{aClass: isA,bClass: isB}">我是對象</p> <!--class綁定的是對象。當為true才會留下-->
<h1>style綁定</h1>
<p :style="{color: activeColor, fontSize: fontSize+'px'}">我是style強制綁定</p>
<button @click='update'>更新</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
a: 'aClass',
isA: true,
isB: false ,// 以上是綁定class
activeColor: 'red', // 以下是綁定style
fontSize : 20
},
methods: {
update(){
this.a = 'bClass';
this.isA = false;
this.isB = true;// 以上是綁定class
this.activeColor = 'blue';
this.fontSize = 30;
}
}
})
</script>
</body>
1.6.條件渲染
在vue中條件渲染使用v-if惭等、v-else和v-show指令珍手，二者不同的地方在于v-if是不會生成不應該顯示的元素，v-show是通過css控制隱藏不應該顯示的節(jié)點元素辞做，是在頁面生成的琳要，當需要頻繁的切換時，使用v-show比較好秤茅，當條件不成立時稚补，v-is的所有子節(jié)點也不會被解析；
<body>
<div id="app">
<p v-if = 'ok'>顯示成功</p>
<p v-else>顯示失敗</p>
<p v-show = 'ok'>顯示成功-v-show</p>
<p v-show = '!ok'>顯示失敗-v-show</p>
<button @click='ok=!ok'>切換</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
</body>
1.7.列表渲染
列表的渲染使用的是v-for指令框喳，可以渲染數組和對象课幕，注意的是遍歷的時候指定唯一的index或者key，另外在做數組的刪除和更新操作時使用數組的變異方法五垮，有關vue的數組變異方法可以參考官方API乍惊；
<body>
<div id="app">
<h2>v-for遍歷數組</h2>
<ui>
<li v-for="(u,index) in users" ::key="index">
{{index}}===={{u.name}}===={{u.age}}==
<button @click='deleteUser(index)'>刪除</button>==<button @click="updateUser(index,{name: '王八',age: 45})">更新</button>
</li>
</ui>
<h2>v-for遍歷對象</h2>
<ul>
<li v-for="(value,key) in users[1]" :key="key">
{{value}}==={{key}}
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
users: [ // vue本身只是監(jiān)視了users的改變，沒有監(jiān)視數組內部數據的改變
{name: '張三',age: 23},
{name: '李四',age: 56},
{name: '王五',age: 76},
{name: '趙六',age: 87},
{name: '陳七',age: 34}
]
},
methods: {
deleteUser(index){
this.users.splice(index,1);
},
updateUser(index,value){
// 如果只寫 this.users[index] = value這一條語句放仗，只改變了數組內部的數據润绎，如果不調用vue的變異方法，就不會更新頁面
// vue重寫了數組中的一系列方法，重寫后就是改變數組操作凡橱，然后重新渲染頁面，也就是實現(xiàn)的數據綁定
this.users.splice(index,1,value) ;
}
}
})
</script>
</body>
列表渲染-列表過濾和排序
<body>
<div id="app">
<input type="text" v-model="searchName">
<ui>
<li v-for="(u,index) in filterUsers" ::key="index">
{{index}}===={{u.name}}===={{u.age}}
</li>
</ui>
<button @click="setOrderType(1)" >年齡升序</button>
<button @click="setOrderType(2)">年齡降序</button>
<button @click="setOrderType(0)">原本排序</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
searchName: '',
orderType: 0, // 0代表原本亭姥，1代表升序稼钩，2代表降序
users: [ // vue本身只是監(jiān)視了users的改變，沒有監(jiān)視數組內部數據的改變
{name: '張三',age: 23},
{name: '李四',age: 56},
{name: '張五',age: 76},
{name: '趙六',age: 87},
{name: '陳七',age: 34}
]
},
computed: {
filterUsers() {
const {searchName,users,orderType} = this;// 取到相關數據（searchName和users）
let fusers; // 定義最終返回的數組
fusers = users.filter(u => u.name.indexOf(searchName) !==-1);// 對users進行過濾
// 對fusers排序
if(orderType !== 0){
fusers.sort(function(u1,u2){ // 如果返回負數p1在前达罗，返回正數p2在前
// 1.代表升序,2.代表降序
if(orderType == 2){
return u2.age - u1.age
}else{
return u1.age -u2.age
}
})
}
return fusers;
}
},
methods: {
setOrderType(value){
this.orderType = value;
}
}
})
</script>
</body>
1.8.事件處理
在vue中綁定監(jiān)聽使用@xxx='fun',其中點擊函數和傳參數和不傳參數坝撑，默認事件的形參是event,當需要傳參的同時需要默認event時候，使用隱含屬性對象@xxx = fun(123,$event)粮揉；事件有兩個修飾符：.prevent：阻止事件的默認事件的默認行為和.stop：停止事件冒泡巡李；按鍵修飾符使用keyup.keyCode = fun()：keycode是鍵盤輸入對應的ketcode值，可以使用名稱扶认，但是存在一部風沒有侨拦；
<body>
<div id="app">
<h2>綁定監(jiān)聽</h2>
<button @click="test1" >我是按鈕一</button>
<button @click="test2('Hello 碼醬')">我是按鈕二，我想獲取自己傳入的值</button>
<button @click="test3">我是按鈕三辐宾，我就想獲取自己</button>
<button @click="test4('Hello',$event)">我是按鈕四狱从，我想獲取獲取自己的同時獲取傳入的值</button>
<h2>事件修飾符：事件冒泡和事件默認行為</h2>
<div style="width: 200px; height: 200px; background: red" @click="test5">
<!-- 使用 @click.stop阻止事件的冒泡-->
<div style="width: 100px; height: 100px; background: blue" @click.stop="test6"></div>
</div>
<!-- 使用@click.prevent阻止事件的默認行為 -->
<a href="luokangyuan.com" @click.prevent="test7">去碼醬博客</a>
<h2>按鍵修飾符：使用@keyup.13，其中的數字代表鍵盤每一個輸入對應的keycode</h2>
<input type="text" @keyup.13="test8">
<input type="text" @keyup.enter="test8">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
test1(){
alert("四川碼醬");
},
test2(msg){
alert(msg);
},
test3(event){
alert(event.target.innerHTML);
},
test4(msg,event){
alert(msg+"==="+event.target.innerHTML);
},
test5(){
alert("執(zhí)行了外面的div的點擊事件");
},
test6(){
alert("執(zhí)行了里面的div的點擊事件");
},
test7(){
alert("不去碼醬博客")
},
test8(event){
alert(event.target.value);
}
}
})
</script>
</body>
1.9.表單輸入綁定
表單的數據綁定使用v-model指令叠纹，具體相關編碼如下：
<body>
<div id="app">
<form action="/xxx" @submit.prevent="handSubmit">
<span>用戶名：</span>
<input type="text" v-model="userName">
<br>
<span>密碼：</span>
<input type="password" v-model="pwd">
<br>
<span>性別：</span>
<input type="radio" id="wman" value="女" v-model="sex">
<label for="wman">女</label>
<input type="radio" id="man" value="男" v-model="sex">
<label for="man">男</label>
<br>
<span>愛好：</span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">籃球</label>
<input type="checkbox" id="footbal" value="foot" v-model="likes">
<label for="footbal">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓球</label>
<br>
<span>城市：</span>
<select name="" id="" v-model="cityId">
<option value="">未選擇</option>
<option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option>
</select>
<br>
<span>個人介紹：</span>
<textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea>
<br>
<input type="submit" value="注冊">
</form>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
userName: '',
pwd: '',
sex: '男', // 默認選中性別男
likes: ['foot'], // 默認選中foot對應的多選框
allCitys: [{ id: 1, name: "北京" }, { id: 2, name: "成都" }, { id: 3, name: "上海" }, { id: 4, name: "寧波" }],
cityId: '',// 這里默認是空季研，則匹配未選擇，如果默認選中成都誉察，則寫2即可
desc: ''
},
methods: {
handSubmit() {
console.log(this.userName, this.pwd, this.sex, this.likes, this.cityId, this.desc)
}
}
})
</script>
</body>
1.10.Vue的生命周期
image
常用的生命周期方法：create()/mounted():常用于發(fā)送Ajax請求啟動定時器等異步任務与涡，beforeDestory()：常用于做一些收尾工作，例如關閉定時器持偏；
<body>
<div id="app">
<button @click= "destoryVm">點擊我取消Vue實例</button>
<p v-show = "isShow">我是四川碼醬</p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
isShow: true
},
beforeCreate() {
console.log("我是beforeCreate方法驼卖，我被執(zhí)行了");
},
created() {
console.log("我是created方法，我被執(zhí)行了");
},
beforeMount() {
console.log("我是beforeMount方法综液，我被執(zhí)行了");
},
mounted(){ // 初始化顯示之后立即調用款慨，也是執(zhí)行一次
this.intervalId = setInterval(() =>{
console.log("=====");
this.isShow = !this.isShow;
}, 1000)
},
beforeUpdate() {
console.log("我是beforeUpdate方法，我被執(zhí)行了");
},
updated() {
console.log("我是updated方法谬莹，我被執(zhí)行了");
},
beforeDestroy() { // 死亡之前回調一次
// 清除定時器
clearInterval(this.intervalId)
},
destroyed() {
console.log("我是destroyed方法檩奠，我被執(zhí)行了");
},
methods: {
destoryVm(){
this.$destroy();
}
}
})
</script>
</body>
說明：
beforeCreate、created附帽、beforeMount埠戳、mounted初始化方法只執(zhí)行一次，beforeUpdate蕉扮、updated執(zhí)行多次整胃，beforeDestroy、destroyed死亡方法喳钟，也執(zhí)行一次屁使；
1.11.過渡和動畫
在vue中動畫就是操作css的trasition或者animation屬性在岂，vue會給目標元素添加和移除指定的class，只不過要遵循一定的命名規(guī)則蛮寂，
<title>動畫和過渡</title>
<style type="text/css">
/* 指定顯示和隱藏的過渡效果 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
/* 指定隱藏的樣式 */
.fade-enter,
.fade-leave-to {
opacity: 0;
}
/* 指定顯示的過濾效果 */
.move-enter-active {
transition: all 1s
}
/* 指定隱藏的過濾效果 */
.move-leave-active {
transition: all 3s
}
/* 指定隱藏的樣式 */
.move-enter,
.move-leave-to {
opacity: 0;
transform: translateX(20px)
}
</style>
</head>
<body>
<div id="app">
<button @click="isshow = !isshow">動畫按鈕</button>
<transition name="fade">
<p v-show="isshow">四川碼醬</p>
</transition>
</div>
<div id="app1">
<button @click="isshow = !isshow">多屬性動畫按鈕</button>
<transition name="move">
<p v-show="isshow">四川碼醬</p>
</transition>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
isshow: true
}
}
})
new Vue({
el: "#app1",
data() {
return {
isshow: true
}
}
})
</script>
</body>
1.12.過濾器
在vue中允許自定義過濾器蔽午，所謂過濾器就是：對要顯示的數據進行特定格式化后在顯示，例如時間格式化等酬蹋，注意的是：并沒有改變原本的數據及老，只是產生新的對應數據；
<body>
<div id="app">
<p>當前完整時間為：{{data | dateString}}</p>
<p>當前日期為：{{data | dateString('YYYY-MM-DD')}}</p>
<p>當前時間為：{{data | dateString('HH:mm:ss')}}</p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script type="text/javascript">
// 自定義過濾器
Vue.filter('dateString',function(value,format){
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el: "#app",
data: {
data: new Date()
}
})
</script>
</body>
1.13.內置指令和自定義指令
常用的內置指令
- v:text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果為 true, 當前標簽才會輸出到頁面
- v-else: 如果為 false, 當前標簽才會輸出到頁面
- v-show : 通過控制 display 樣式來控制顯示/隱藏
- v-for : 遍歷數組/對象
- v-on : 綁定事件監(jiān)聽, 一般簡寫為@
- v-bind : 強制綁定解析表達式, 可以省略 v-bind
- v-model : 雙向數據綁定
- ref : 指定唯一標識, vue 對象通過$els 屬性訪問這個元素對象
- v-cloak : 防止閃現(xiàn)出現(xiàn)
{{xxx}}, 與 css 配合: [v-cloak] { display: none }
<title>內置指令</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p ref="content">四川碼醬</p>
<button @click = "hint">提示</button>
<p v-cloak>{{msg}}</p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "Hello 四川碼醬"
},
methods: {
hint(){
alert(this.$refs.content.textContent);
}
}
})
</script>
</body>
說明：
v-cloak指令是為了頁面加載數據緩慢時候顯示{{xxx}}標簽而出了一個指令范抓，與CSS搭配使用
自定義指令
注冊全局指令骄恶，方法如下：
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
注冊局部指令，方法如下：
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
<body>
<div id="app">
<p v-upper-text="msg"></p>
<p v-lower-text="msg"></p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
// 定義全局指令
// el：指令屬性所在的標簽屬性
// binding：包含指令相關信息數據的對象
Vue.directive('upper-text', function(el,binding){
el.textContent = binding.value.toUpperCase()
console.log(el,binding)
})
new Vue({
el: "#app",
data: {
msg: "This is my think life"
},
directives: { // 使用自定義局部指令
'lower-text' : function(el,binding){
el.textContent = binding.value.toLowerCase()
}
}
})
</script>
</body>
1.14.核心知識總結
- Vue是前端開發(fā)庫匕垫，用于構建用戶界面僧鲁，遵循MVVM模式，編碼簡潔象泵，體積小悔捶，效率高，包含了一些列插件庫单芜；
- 基本使用：引入vue.js蜕该，創(chuàng)建vue實例對象，其中el代表dom標簽選擇器洲鸠，data代表初始化數據對象堂淡；
-
el：指定dom標簽容器的選擇器，一般寫一個根標簽扒腕； -
data：對象或者函數類型绢淀，指定初始化狀態(tài)屬性數據的對象，頁面中可以使用{{xxx}}直接訪問 -
methods：包含多個方法的對象瘾腰，供頁面中的事件指令來回調皆的，回調函數默認有$event參數，也可以指定自己的參數蹋盆，在方法中费薄，訪問data中的屬性直接使用this.xxx； -
computed：計算屬性栖雾，包含多個方法的對象楞抡，對狀態(tài)屬性進行計算處理后返回給頁面一個新的數據，使用get和set方法實現(xiàn)屬性的計算讀取析藕，同時監(jiān)視數據的變化召廷； -
watch：監(jiān)視，包含多個屬性監(jiān)視的對象先紫，xxx.function(value){}筹煮，可以傳入兩個參數泡孩，代表新值和改變前的值，也可以使用vm.$watch('xxx', function(value){})的方式添加監(jiān)聽； - vue中的過渡和動畫变屁，實質就是vue操作css的transition/animation屬性；
- 生命周期：常用的鉤子函數是
created() / mounted(): 啟動異步任務(啟動定時器,發(fā)送ajax請求, 綁定監(jiān)聽)和beforeDestroy(): 做一些收尾的工作例如清除定時器等意狠； - 自定義過濾器：使用的是
Vue.filter(filterName,function(value){})粟关，在頁面使用方法：{{myData | filterName(arg)}}环戈，參數可傳可不傳； - vue內置指令：
v-for遍歷遮晚、@綁定事件县遣、v-model數據雙向綁定汹族、ref標識標簽； - 自定義指令：使用
Vue.directive注冊全局指令夸政，使用directives注冊局部指令守问；
注意：數據在哪個組件坑资，更新數據的行為（方法）就應該定義在那個組件中
二盐茎、Vue組件化編碼方式
2.1.使用vue-cli創(chuàng)建模板項目
vue-cli是vue官方提供的腳手架工具，首先確認安裝了node和npm，最好安裝一個cnpm狡赐，使用方法如下：
- npm install -g vue-cli
- vue init webpack vue_demo 其中 vue_demo是項目名
- cd vue_demo
- npm install或者npm run dev
項目結構說明
- build : webpack 相關的配置文件夾(基本不需要修改)
- dev-server.js : 通過 express 啟動后臺服務器
- config: webpack 相關的配置文件夾(基本不需要修改)
- index.js: 指定的后臺服務的端口號和靜態(tài)資源文件夾
- src : 源碼文件夾
- components: vue 組件及其相關資源文件夾
- App.vue: 應用根主組件
- main.js: 應用入口 js
- static: 靜態(tài)資源文件夾
- .babelrc: babel 的配置文件
- .eslintignore: eslint 檢查忽略的配置
- .eslintrc.js: eslint 檢查的配置
- .gitignore: git 版本管制忽略的配置
- index.html: 主頁面文件
- package.json: 應用包配置文件
- README.md: 應用描述說明的 readme 文件
簡單的使用Vue模板項目
首先枕屉，我們編寫了一個HelloWord的組件鲤氢，
<template>
<div class="hello">
<h1 class="msg">{{ msg }}</h1>
</div>
</template>
<script>
export default {
// 配置對象和Vue一致
data() {
// data可以 寫對象和函數卷玉，但是在組件中必須使用函數
return {
msg: "Hello Welcome to My Vue"
};
}
};
</script>
<style scoped>
.msg {
color: red
}
</style>
然后相种，我們在App.vue中使用我們自己定義的組件
<template>
<div id="app">
<img class="logo" src="./assets/logo.png">
<!-- 使用組件標簽 -->
<HelloWorld/>
</div>
</template>
<script>
// 1.引入需要使用的vue組件（HelloWoed組件）
import HelloWorld from './components/HelloWorld'
export default {
components: { // 2.映射組件標簽
HelloWorld
}
}
</script>
<style>
.logo{
width: 100px;
height: 100px;
}
</style>
我們知道使用Webpack打包后會生成一個js文件寝并，也就是入口文件main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app', // 掛載到入口Dom節(jié)點（index.html）
components: { App }, // 映射組件標簽
template: '<App/>' //使用標簽
})
2.2.項目打包發(fā)布方式
打包命令：npm run build
使用靜態(tài)服務器：安裝命令：npm install -g serve，發(fā)布命令：serve dist斤蔓，然后直接訪問就可以了
使用動態(tài)web服務器（Tomcat）:修改webpack.prod.conf.js附迷，加入output: {publicPath: '/xxx/' //打包文件夾的名稱}哎媚，然后重新打包拨与，將dis文件夾的名稱改為項目名稱，放在tomcat的webapp目錄下捻悯，訪問即可今缚；
