一：環(huán)境搭建
? ? 1.安裝node.js
? ? 2.cnpm 下載包
? ? ? 地址：http://npm.taobao.org/
? ? ? 安裝cnpm:
? ? ? npm install -g cnpm --registry=https://registry.npm.taobao.org
? ? 3.搭建vue的開(kāi)發(fā)環(huán)境：
? ? ? https://cn.vuejs.org/v2/guide/installation.html
? ? ? 1、必須要安裝nodejs
? ? ? 2、搭建vue的開(kāi)發(fā)環(huán)境 ，安裝vue的腳手架工具? 官方命令行工具
? ? ? ? npm install --global vue-cli? /? cnpm install --global vue-cli （此命令只需要執(zhí)行一次）
? ? ? 3、創(chuàng)建項(xiàng)目? 必須cd到對(duì)應(yīng)的一個(gè)項(xiàng)目里面
? ? ? ? vue init webpack vue-demo01
? ? ? ? cd? vue-demo01
? ? ? ? cnpm install? /? npm install? ? ? ? ? 如果創(chuàng)建項(xiàng)目的時(shí)候沒(méi)有報(bào)錯(cuò)，這一步可以省略。如果報(bào)錯(cuò)了? cd到項(xiàng)目里面運(yùn)行? cnpm install? /? npm install
? ? ? ? npm run dev
? ? ? 4、另一種創(chuàng)建項(xiàng)目的方式? （推薦）? 安裝文件比較簡(jiǎn)潔
? ? ? ? vue init webpack-simple vuedemo02
? ? ? ? cd? vuedemo02
? ? ? ? cnpm install? /? npm install? ? ? ?
? ? ? ? npm run dev
二：運(yùn)行說(shuō)明
? ? 1、cd 到demo里面
? ? 如：cd vuedemo
? ? 2、安裝依賴：
? ? cnpm install?
? ? 3、運(yùn)行項(xiàng)目
? ? npm run dev
三：基本代碼
? ? {{msg}}---雙大括號(hào)是插值表達(dá)式，小胡子語(yǔ)法。
? ? el:'#app'---表示Vue實(shí)例控制頁(yè)面上那個(gè)區(qū)域。
? ? data:{ }---存放el中需要用到的數(shù)據(jù)
? ? methods:{}---方法，定義當(dāng)前實(shí)例所有可用的方法
四：Vue指令
? ? 1：v-cloak---解決在網(wǎng)絡(luò)延遲時(shí)插值表達(dá)式閃爍問(wèn)題
? ? ? 用法：
? ? ? <p v-cloak>{{msg}}</p>
? ? ? <style>[v-cloak]{display: none;}</style>
? ? 2: v-text---默認(rèn)沒(méi)有閃爍問(wèn)題，會(huì)覆蓋元素中原本的內(nèi)容
? ? ? 用法：
? ? ? <p v-text="msg">被v-text覆蓋的內(nèi)容</p>
? ? 3: v-html---雙大括號(hào)的方式會(huì)將數(shù)據(jù)解釋為純文本，而非HTML。為了輸出真正的HTML，可以用v-html指令。它等同于JS的innerHtml屬性?
? ? ? <p v-html="msg2">1212112</p>
? ? 4: v-bind---綁定屬性的指令，簡(jiǎn)寫(xiě)為 ：要綁定的屬性。只能實(shí)現(xiàn)單向綁定，從M自動(dòng)綁定到V
? ? ? <input type="button" value="按鈕" v-bind:title="mytitle + '123'">
? ? 5：v-on---事件綁定機(jī)制，簡(jiǎn)寫(xiě)為 @
? ? ? <input type="button" value="按鈕" v-on:click="show">
? ? ? <input type="button" value="按鈕" @:click="show">
? ? 6：v-model---實(shí)現(xiàn)表單元素和Model數(shù)據(jù)雙向綁定，只能運(yùn)用在表單元素中。input(radio, text, address, email....)? select? ? checkbox? textarea
? ? ? <input type="text" v-model="msg">?
? ? 7：v-for---循環(huán)數(shù)組
? ? ? 循環(huán)普通數(shù)組
? ? ? ? <p v-for="item in list">{{item}}</p>
? ? ? ? <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
? ? ? ? 循環(huán)對(duì)象數(shù)組
? ? ? ? <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
? ? ? ? 循環(huán)遍歷對(duì)象身上的屬性
? ? ? ? <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
? ? ? ? 迭代數(shù)字
? ? ? ? <p v-for="count in 10">這是第 {{ count }} 次循環(huán)</p>
? ? ? ? Key屬性使用---循環(huán)時(shí)，key屬性只能使用number和string,須使用 v-bind 屬性綁定的形式，指定 key 的值
? ? ? ? <p v-for="item in list" :key="item.id">
? ? ? ? ? <input type="checkbox">{{item.id}} --- {{item.name}}
? ? ? ? </p>
? ? 8. v-if---每次都會(huì)重新刪除或者創(chuàng)建元素,有更高的切換消耗
? ? ? ? <h3 v-if="flag">這是用v-if控制的元素</h3>
? ? 9. v-show---每次不會(huì)重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的 display:none 樣式
? ? ? ? <h3 v-show="flag">這是用v-show控制的元素</h3>
? ? ? ? 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show
? ? ? ? 如果元素可能永遠(yuǎn)也不會(huì)被顯示出來(lái)被用戶看到，則推薦使用 v-if
五：事件修飾符
? ? .stop --停止--阻止冒泡
? ? .prevent --阻止--阻止默認(rèn)行為
? ? .capture --捕獲--實(shí)現(xiàn)捕獲觸發(fā)事件機(jī)制? ?
? ? .self--自己--實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素時(shí)候，才會(huì)觸發(fā)事件處理函數(shù)
? ? .once--一次--只觸發(fā)一次事件函數(shù)
六：Vue中樣式
? ? 1.普通樣式
? ? ? <p class="red thin">一</p>
? ? 2.傳遞一個(gè)數(shù)組，注意： 這里的 class 需要使用? v-bind 做數(shù)據(jù)綁定
? ? ? <p :class="['thin', 'italic']">傳遞一個(gè)數(shù)組</p>
? ? 3.數(shù)組中使用三元表達(dá)式
? ? ? <p :class="['thin','italic',flag?'active':'']">數(shù)組中使用三元表達(dá)式</p>
? ? 4.數(shù)組中嵌套對(duì)象
? ? ? <p :class="['red', 'thin', {'active': isactive}]">數(shù)組中嵌套對(duì)象</p>
? ? 5.直接使用對(duì)象
? ? ? <p :class="classObj">直接使用對(duì)象</p>
? ? ? <p :class="red:true, italic:true, active:true,thin:true">直接使用對(duì)象</p>
? ? 6.使用內(nèi)聯(lián)樣式
? ? ? 直接在元素上通過(guò) `:style` 的形式，書(shū)寫(xiě)樣式對(duì)象
? ? ? <p :style="{color: 'red', 'font-size': '40px'}">這是一個(gè)善良的p</p>
? ? ? <p :style="[ styleObj1, styleObj2, styleObj3]">這是一個(gè)p</p>
? ? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? el: '#app',
? ? ? ? ? data: {
? ? ? ? ? ? flag: true,
? ? ? ? ? ? classObj: { red: true, thin: true, italic: false, active: false }
? ? ? ? ? },
? ? ? ? ? methods: {}
? ? ? ? });
? ? ? ? </script>
? ? ? ? <style>
? ? ? ? .red {color: red;? }
? ? ? ? .thin {font-weight: 200;}
? ? ? ? .italic {font-style: italic;? }
? ? ? ? .active {letter-spacing: 0.5em;? }
? ? ? ? </style>
七：鍵盤(pán)修飾符以及自定義鍵盤(pán)修飾符
? ? ? 通過(guò)Vue.config.keyCodes.名稱 = 按鍵值來(lái)自定義案件修飾符的別名：
? ? ? Vue.config.keyCodes.f2 = 113;
? ? ? <input type="text" v-model="name" @keyup.f2="add">
八：過(guò)濾器定義
? ? Vue.filter('過(guò)濾器的名稱', function(){})
? ? 過(guò)濾器中的 function ，第一個(gè)參數(shù)，已經(jīng)被規(guī)定死了，永遠(yuǎn)都是 過(guò)濾器 管道符前面 傳遞過(guò)來(lái)的數(shù)據(jù)
? ? Vue.filter('過(guò)濾器的名稱', function (data) {
? ? ? return data + '123'
? ? ? })
? ? 過(guò)濾器調(diào)用時(shí)候的格式? ? {{ name | 過(guò)濾器的名稱 }}
? ? 私有過(guò)濾器：
? ? ? 1. HTML元素：
? ? ? ```
? ? ? <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
? ? ? ```
? ? ? 2. 私有 `filters` 定義方式：
? ? ? ```
? ? ? filters: { // 私有局部過(guò)濾器，只能在 當(dāng)前 VM 對(duì)象所控制的 View 區(qū)域進(jìn)行使用
? ? ? ? ? dataFormat(input, pattern = "") { // 在參數(shù)列表中 通過(guò) pattern="" 來(lái)指定形參默認(rèn)值，防止報(bào)錯(cuò)
? ? ? ? ? ? var dt = new Date(input);
? ? ? ? ? ? // 獲取年月日
? ? ? ? ? ? var y = dt.getFullYear();
? ? ? ? ? ? var m = (dt.getMonth() + 1).toString().padStart(2, '0');
? ? ? ? ? ? var d = dt.getDate().toString().padStart(2, '0');
? ? ? ? ? ? // 如果 傳遞進(jìn)來(lái)的字符串類型，轉(zhuǎn)為小寫(xiě)之后，等于 yyyy-mm-dd，那么就返回 年-月-日
? ? ? ? ? ? // 否則，就返回? 年-月-日 時(shí)：分：秒
? ? ? ? ? ? if (pattern.toLowerCase() === 'yyyy-mm-dd') {
? ? ? ? ? ? ? return `${y}-${m}-$u0z1t8os`;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? // 獲取時(shí)分秒
? ? ? ? ? ? ? var hh = dt.getHours().toString().padStart(2, '0');
? ? ? ? ? ? ? var mm = dt.getMinutes().toString().padStart(2, '0');
? ? ? ? ? ? ? var ss = dt.getSeconds().toString().padStart(2, '0');
? ? ? ? ? ? ? return `${y}-${m}-$u0z1t8os ${hh}:${mm}:${ss}`;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? ```
? ? ? ### 全局過(guò)濾器
? ? ? ```
? ? ? // 定義一個(gè)全局過(guò)濾器
? ? ? Vue.filter('dataFormat', function (input, pattern = '') {
? ? ? ? var dt = new Date(input);
? ? ? ? // 獲取年月日
? ? ? ? var y = dt.getFullYear();
? ? ? ? var m = (dt.getMonth() + 1).toString().padStart(2, '0');
? ? ? ? var d = dt.getDate().toString().padStart(2, '0');
? ? ? ? // 如果 傳遞進(jìn)來(lái)的字符串類型，轉(zhuǎn)為小寫(xiě)之后，等于 yyyy-mm-dd，那么就返回 年-月-日
? ? ? ? // 否則，就返回? 年-月-日 時(shí)：分：秒
? ? ? ? if (pattern.toLowerCase() === 'yyyy-mm-dd') {
? ? ? ? ? return `${y}-${m}-$u0z1t8os`;
? ? ? ? } else {
? ? ? ? ? // 獲取時(shí)分秒
? ? ? ? ? var hh = dt.getHours().toString().padStart(2, '0');
? ? ? ? ? var mm = dt.getMinutes().toString().padStart(2, '0');
? ? ? ? ? var ss = dt.getSeconds().toString().padStart(2, '0');
? ? ? ? ? return `${y}-${m}-$u0z1t8os ${hh}:${mm}:${ss}`;
? ? ? ? }
? ? ? });
? ? ? ```
? ? ? > 注意：當(dāng)有局部和全局兩個(gè)名稱相同的過(guò)濾器時(shí)候，會(huì)以就近原則進(jìn)行調(diào)用，即：局部過(guò)濾器優(yōu)先于全局過(guò)濾器被調(diào)用！
九：生命周期函數(shù)
? ? <script>
? ? ? // 開(kāi)始創(chuàng)建 Vue 實(shí)例，得到 ViewModel
? ? ? var vm = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? msg: 'ok'
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? show() {
? ? ? ? ? ? console.log('執(zhí)行了show方法')
? ? ? ? ? }
? ? ? ? },
? ? ? ? beforeCreate() { 創(chuàng)建前//? 這是我們遇到的第一個(gè)生命周期函數(shù)，表示實(shí)例完全被創(chuàng)建出來(lái)之前，會(huì)執(zhí)行它
? ? ? ? ? // console.log(this.msg)
? ? ? ? ? // this.show()
? ? ? ? ? //剛初始化一個(gè)vue空的實(shí)例對(duì)象，這時(shí)候，這個(gè)對(duì)象身上，只有默認(rèn)的一些生命周期函數(shù)和默認(rèn)事件，其他東西都未創(chuàng)建
? ? ? ? ? // 注意： 在 beforeCreate 生命周期函數(shù)執(zhí)行的時(shí)候，data 和 methods 中的 數(shù)據(jù)都還沒(méi)有沒(méi)初始化
? ? ? ? },
? ? ? ? created() { 創(chuàng)建// 這是遇到的第二個(gè)生命周期函數(shù)
? ? ? ? ? // console.log(this.msg)
? ? ? ? ? // this.show()
? ? ? ? ? //? 在 created 中，data 和 methods 都已經(jīng)被初始化好了！
? ? ? ? ? // 如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早，只能在 created 中操作
? ? ? ? },
? ? ? ? beforeMount() { 即將掛載// 這是遇到的第3個(gè)生命周期函數(shù)，表示模板已經(jīng)在內(nèi)存中編譯完成了，但是尚未把模板渲染到頁(yè)面中，此時(shí)，頁(yè)面還是舊的。
? ? ? ? ? // console.log(document.getElementById('h3').innerText)
? ? ? ? ? // 在 beforeMount 執(zhí)行的時(shí)候，頁(yè)面中的元素，還沒(méi)有被真正替換過(guò)來(lái)，只是之前寫(xiě)的一些模板字符串
? ? ? ? },
? ? ? ? mounted() { 掛載// 這是遇到的第4個(gè)生命周期函數(shù)，表示，內(nèi)存中的模板，已經(jīng)真實(shí)的掛載到了頁(yè)面中，用戶已經(jīng)可以看到渲染好的頁(yè)面了
? ? ? ? ? // console.log(document.getElementById('h3').innerText)
? ? ? ? ? // 注意： mounted 是 實(shí)例創(chuàng)建期間的最后一個(gè)生命周期函數(shù)，當(dāng)執(zhí)行完 mounted 就表示，實(shí)例已經(jīng)被完全創(chuàng)建好了，此時(shí)，如果沒(méi)有其它操作的話，這個(gè)實(shí)例，就靜靜的 躺在我們的內(nèi)存中，一動(dòng)不動(dòng)
? ? ? ? ? //肉果要通過(guò)某些插件操作頁(yè)面上的DOM節(jié)點(diǎn)，最早要在mounted中進(jìn)行。只要執(zhí)行力mounted,就表示整個(gè)Vue實(shí)例已經(jīng)初始化完畢，
? ? ? ? ? //此時(shí)，組件已經(jīng)脫離了創(chuàng)建階段，進(jìn)入到運(yùn)行階段。
? ? ? ? },
? ? ? ? // 接下來(lái)的是運(yùn)行中的兩個(gè)事件
? ? ? ? beforeUpdate() { 更新前// 這時(shí)候，表示 我們的界面還沒(méi)有被更新【數(shù)據(jù)被更新了嗎？? 數(shù)據(jù)肯定被更新了】
? ? ? ? ? /* console.log('界面上元素的內(nèi)容：' + document.getElementById('h3').innerText)
? ? ? ? ? console.log('data 中的 msg 數(shù)據(jù)是：' + this.msg) */
? ? ? ? ? // 得出結(jié)論： 當(dāng)執(zhí)行 beforeUpdate 的時(shí)候，頁(yè)面中的顯示的數(shù)據(jù)，還是舊的，此時(shí) data 數(shù)據(jù)是最新的，頁(yè)面尚未和 最新的數(shù)據(jù)保持同步
? ? ? ? },
? ? ? ? updated() { 更新
? ? ? ? ? console.log('界面上元素的內(nèi)容：' + document.getElementById('h3').innerText)
? ? ? ? ? console.log('data 中的 msg 數(shù)據(jù)是：' + this.msg)
? ? ? ? ? // updated 事件執(zhí)行的時(shí)候，頁(yè)面和 data 數(shù)據(jù)已經(jīng)保持同步了，都是最新的
? ? ? ? },
? ? ? ? beforeDestroy(){? 銷(xiāo)毀前
? ? ? ? /*? 當(dāng)執(zhí)行beforeDest鉤子函數(shù)的時(shí)候，Vue實(shí)例就已經(jīng)從運(yùn)行階段，進(jìn)入到銷(xiāo)毀階段;
? ? ? ? 當(dāng)執(zhí)行beforeDe的時(shí)候，實(shí)例身上所有data和所有methods,以及過(guò)濾器，指令...都處于可用狀態(tài)，此時(shí)，還沒(méi)有真正執(zhí)行銷(xiāo)毀過(guò)程 */
? ? ? ? },
? ? ? ? destroyed(){ 完全銷(xiāo)毀
? ? ? ? ? /* 當(dāng)執(zhí)行到destroyed函數(shù)的時(shí)候，組件已經(jīng)完全銷(xiāo)毀了，此時(shí)組件中所有的數(shù)據(jù)，方法，指令，過(guò)濾器，都已經(jīng)不可用了。 */
? ? ? ? }
? ? ? });
? ? </script>
十：使用vue-resource請(qǐng)求數(shù)據(jù)的步驟
? ? ? ? 1.安裝vue-resource模塊，加上--save
? ? ? ? ? npm install vue-resource --save /? cnpm install vue-resource --save
? ? ? ? 2.在main.js引入vue-resource?
? ? ? ? ? import VueResource from 'vue-resource';
? ? ? ? 3.在main.js引入Vue.use(VueResource);
? ? ? ? ? Vue.use(VueResource);
? ? ? ? 4.在組件里面直接使用?
? ? ? ? ? this.$http.get(地址).then(function(){
? ? ? ? ? })
? ? ? ? ? <template>
? ? ? ? ? ? <!-- 所有的內(nèi)容要被根節(jié)點(diǎn)包含起來(lái) -->
? ? ? ? ? ? <div id="home">
? ? ? ? ? ? ? ? 首頁(yè)組件
? ? ? ? ? ? ? ? <button @click="getData()">請(qǐng)求數(shù)據(jù)</button>
? ? ? ? ? ? ? ? ? ? <hr>
? ? ? ? ? ? ? ? <br>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li v-for="item in list">
? ? ? ? ? ? ? ? ? ? ? ? {{item.title}}
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>
? ? ? ? </template>
? ? ? ? ? <script>
? ? ? ? ? ? ? ? export default{
? ? ? ? ? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? msg:'我是一個(gè)首頁(yè)組件msg',
? ? ? ? ? ? ? ? ? ? ? ? ? ? flag:true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? list:[]
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? ? ? getData(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //請(qǐng)求數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$http.get(api).then((response)=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(response);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //注意this指向
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list=response.body.result;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },function(err){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(err);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? mounted(){? /*生命周期函數(shù)*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.getData();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </script>
十一：使用vue-axios請(qǐng)求數(shù)據(jù)
? ? ? 1.安裝vue-axios? ? ? ?
? ? ? ? cnpm install axios --save?
? ? ? 2.哪里使用哪里引入
? ? ? ? import Axios from 'axios'
? ? ? ? <script>
? ? ? ? ? ? import Axios from 'axios';
? ? ? ? ? ? export default{
? ? ? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? list:[]
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? getData(){
? ? ? ? ? ? ? ? ? ? ? ? var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
? ? ? ? ? ? ? ? ? ? ? ? Axios.get(api).then((response)=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list=response.data.result;
? ? ? ? ? ? ? ? ? ? ? ? }).catch((error)=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(error);
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? mounted(){? /*生命周期函數(shù)*/
? ? ? ? ? ? ? ? ? ? this.getData();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? </script>
十二：組件使用
? ? ? 1.在script標(biāo)簽內(nèi)引入組件
? ? ? 2. 在components內(nèi)掛載組件?
? ? ? 3.在模板中使用組件
? ? ? <template>
? ? ? ? ? <div id="app">
? ? ? ? ? ? <v-home></v-home><!--在模板中使用組件 -->
? ? ? ? ? ? <v-news></v-news>
? ? ? ? ? </div>
? ? ? ? </template>
? ? ? ? <script>
? ? ? ? ? //引入組件
? ? ? ? ? import Home from './components/Home.vue';
? ? ? ? ? import News from './components/News.vue';
? ? ? ? ? export default {
? ? ? ? ? ? ? data () {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? msg:'你好vue'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? components:{? /*前面的組件名稱不能和html標(biāo)簽一樣*/
? ? ? ? ? ? ? ? 'v-home':Home, //掛載組件
? ? ? ? ? ? ? ? 'v-news':News
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? </script>
十三：父組件給子組件傳值 父組件給子組件傳方法
? ? ? 1. 父組件調(diào)用字組件時(shí)候，綁定動(dòng)態(tài)屬性
? ? ? ? <v-header :title="title"></v-header>
? ? ? 2.在子組件里面通過(guò)props接收父組件傳過(guò)來(lái)的數(shù)據(jù)
? ? ? ? props:['title']? ? ?
? ? ? 父組件代碼：?
? ? ? ? ? ? ? ? <template>
? ? ? ? ? ? ? ? ? ? <div id="home">
? ? ? ? ? ? ? ? ? ? ? ? <v-header :title="title" :homemsg='msg'? :run="run"? :home="this"></v-header>
? ? ? ? ? ? ? ? ? ? ? ? <hr>
? ? ? ? ? ? ? ? ? ? ? ? 首頁(yè)組件
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? ? ? import Header from './Header.vue';
? ? ? ? ? ? ? ? ? ? export default{
? ? ? ? ? ? ? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? msg:'我是一個(gè)home組件',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title:'首頁(yè)111'
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? components:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'v-header':Header
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? run(data){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('我是Home組件的run方法'+data);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? </script>
? ? ? 子組件代碼：
? ? ? ? ? ? ? ? <template>
? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? <h2>我是頭部組件--{{title}}---{{homemsg}}</h2>
? ? ? ? ? ? ? ? ? ? ? ? <button @click="run('123')">執(zhí)行父組件的方法</button>
? ? ? ? ? ? ? ? ? ? ? ? <button @click="getParent()">獲取父組件的數(shù)據(jù)和方法</button>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? export default{
? ? ? ? ? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? ? ? ? ? ? msg:'子組件的msg'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? ? ? getParent(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.home.run()
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? props:['title','homemsg','run','home']
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? </script>?
十四：路由使用
? ? ? ? 1.安裝
? ? ? ? ? npm install vue-router? --save? / cnpm install vue-router? --save
? ? ? ? 2、引入并 Vue.use(VueRouter)? (main.js)
? ? ? ? ? import VueRouter from 'vue-router'
? ? ? ? ? Vue.use(VueRouter)
? ? ? ? 3、配置路由? 下面四個(gè)在main.js里面
? ? ? ? ? 1、創(chuàng)建組件 引入組件
? ? ? ? ? 2、定義路由? （建議復(fù)制s）
? ? ? ? ? ? ? const routes = [
? ? ? ? ? ? ? { path: '/home', component: Home },
? ? ? ? ? ? ? { path: '/news', component: News },
? ? ? ? ? ? ? <!-- 屬性1 是 path， 表示監(jiān)聽(tīng) 哪個(gè)路由鏈接地址；
? ? ? ? ? ? ? ? ? 屬性2 是 component， 表示，如果 路由是前面匹配到的 path ，則展示 component 屬性對(duì)應(yīng)的那個(gè)組件
? ? ? ? ? ? ? ? ? 注意： component 的屬性值，必須是一個(gè) 組件的模板對(duì)象， 不能是 組件的引用名稱
? ? ? ? ? ? ? -->
? ? ? ? ? ? ? { path: '*', redirect: '/home' }? <!-- 默認(rèn)跳轉(zhuǎn)路由 -->
? ? ? ? ? ? ]
? ? ? ? ? 3、實(shí)例化VueRouter
? ? ? ? ? ? ? const router = new VueRouter({
? ? ? ? ? ? ? ? routes // （縮寫(xiě)）相當(dāng)于 routes: routes
? ? ? ? ? ? ? })
? ? ? ? ? 4、掛載
? ? ? ? ? ? ? new Vue({
? ? ? ? ? ? ? ? el: '#app',
? ? ? ? ? ? ? ? router，
? ? ? ? ? ? ? ? render: h => h(App)
? ? ? ? ? ? ? })
? ? ? ? ? 5 、根組件的模板里面放上這句話?
? ? ? ? ? <!-- vue-router提供的占位符 將來(lái)，路由規(guī)則，匹配到的組件，就會(huì)展示到這個(gè) router-view 中去-->
? ? ? ? ? <router-view></router-view>? ? ?
? ? ? ? ? <!-- <router-view></router-view> 外層可以包裹 <transition>設(shè)置動(dòng)畫(huà)-->
? ? ? ? ? 6、路由跳轉(zhuǎn)
? ? ? ? ? ? <!--router默認(rèn)渲染為a標(biāo)簽，使用tag屬性可以更改默默認(rèn)a標(biāo)簽 -->
? ? ? ? ? ? <router-link to="/foo" tag="span">Go to Foo</router-link>
? ? ? ? ? ? <router-link to="/bar">Go to Bar</router-link>
? ? ? ? ? 7.1.this.$router.go(val) => 在history記錄中前進(jìn)或者后退val步，當(dāng)val為0時(shí)刷新當(dāng)前頁(yè)面。
? ? ? ? ? 2.this.$router.push(path) => 在history棧中添加一條新的記錄。?
十五：動(dòng)畫(huà)
? ? ? 1.使用transition元素，把需要被動(dòng)畫(huà)控制的元素包裹起來(lái)
? ? ? ? <transition mode="out-in"> <!-- mode="out-in是動(dòng)畫(huà)先出后進(jìn)" -->
? ? ? ? ? <p>被控制元素</p>
? ? ? ? </transition>
? ? ? 2.自定義兩組樣式，來(lái)控制 transition 內(nèi)部的元素實(shí)現(xiàn)動(dòng)畫(huà)
? ? ? ? <style>
? ? ? ? ? ? /* v-enter 【這是一個(gè)時(shí)間點(diǎn)】 是進(jìn)入之前，元素的起始狀態(tài)，此時(shí)還沒(méi)有開(kāi)始進(jìn)入 */
? ? ? ? ? ? /* v-leave-to 【這是一個(gè)時(shí)間點(diǎn)】 是動(dòng)畫(huà)離開(kāi)之后，離開(kāi)的終止?fàn)顟B(tài)，此時(shí)，元素 動(dòng)畫(huà)已經(jīng)結(jié)束了 */
? ? ? ? ? ? .v-enter,
? ? ? ? ? ? .v-leave-to {
? ? ? ? ? ? ? opacity: 0;
? ? ? ? ? ? ? transform: translateX(150px);
? ? ? ? ? ? }
? ? ? ? ? ? /* v-enter-active 【入場(chǎng)動(dòng)畫(huà)的時(shí)間段】 */
? ? ? ? ? ? /* v-leave-active 【離場(chǎng)動(dòng)畫(huà)的時(shí)間段】 */
? ? ? ? ? ? .v-enter-active,
? ? ? ? ? ? .v-leave-active{
? ? ? ? ? ? ? transition: all 0.8s ease;
? ? ? ? ? ? }
? ? ? ? ? </style>
? ? ? ? 3.修改動(dòng)畫(huà)v-前綴? ? transition加入name屬性
? ? ? ? ? <transition name="my">?
? ? ? ? ? ? <p>被控制元素</p>
? ? ? ? ? </transition>
? ? ? ? ? 樣式里面v-改完自定義名字
? ? ? ? ? <style>
? ? ? ? ? ? .my-enter,.my-leave-to{opacity: 0;}
? ? ? ? ? ? .my-enter-active,.my-leave-active{transition: all 0.8s ease;}
? ? ? ? ? </style>
? ? ? ? 4.使用animate庫(kù)實(shí)現(xiàn)動(dòng)畫(huà)，用npm安裝看api
? ? ? ? ? <transition enter-active-class="animated bounceIn"
? ? ? ? ? ? ? ? ? ? leave-active-class="animated bounceOut">
? ? ? ? ? ? <h3 v-if="flag">這是一個(gè)H3</h3>
? ? ? ? ? </transition>
? ? ? ? 5.動(dòng)畫(huà)鉤子函數(shù)?
? ? ? ? ? +1：定義 transition 組件以及三個(gè)鉤子函數(shù)：
? ? ? ? ? ? ? <div id="app">
? ? ? ? ? ? ? ? ? <input type="button" value="切換動(dòng)畫(huà)" @click="isshow = !isshow">
? ? ? ? ? ? ? ? ? <transition
? ? ? ? ? ? ? ? ? @before-enter="beforeEnter"
? ? ? ? ? ? ? ? ? @enter="enter"
? ? ? ? ? ? ? ? ? @after-enter="afterEnter">
? ? ? ? ? ? ? ? ? ? <div v-if="isshow" class="show">OK</div>
? ? ? ? ? ? ? ? ? </transition>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? +2. 定義三個(gè) methods 鉤子方法
? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? ? // 注意： 動(dòng)畫(huà)鉤子函數(shù)的第一個(gè)參數(shù)：el，表示 要執(zhí)行動(dòng)畫(huà)的那個(gè)DOM元素，是個(gè)原生的 JS DOM對(duì)象
? ? ? ? ? ? ? ? ? // 大家可以認(rèn)為 ， el 是通過(guò) document.getElementById('') 方式獲取到的原生JS DOM對(duì)象
? ? ? ? ? ? ? ? ? beforeEnter(el){
? ? ? ? ? ? ? ? ? ? // beforeEnter 表示動(dòng)畫(huà)入場(chǎng)之前，此時(shí)，動(dòng)畫(huà)尚未開(kāi)始，可以 在 beforeEnter 中，設(shè)置元素開(kāi)始動(dòng)畫(huà)之前的起始樣式
? ? ? ? ? ? ? ? ? ? // 設(shè)置小球開(kāi)始動(dòng)畫(huà)之前的，起始位置
? ? ? ? ? ? ? ? ? ? el.style.transform = "translate(0, 0)"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? enter(el, done){
? ? ? ? ? ? ? ? ? ? // 這句話，沒(méi)有實(shí)際的作用，但是，如果不寫(xiě)，出不來(lái)動(dòng)畫(huà)效果；
? ? ? ? ? ? ? ? ? ? // 可以認(rèn)為 el.offsetWidth 會(huì)強(qiáng)制動(dòng)畫(huà)刷新
? ? ? ? ? ? ? ? ? ? el.offsetWidth
? ? ? ? ? ? ? ? ? ? // enter 表示動(dòng)畫(huà) 開(kāi)始之后的樣式，這里，可以設(shè)置小球完成動(dòng)畫(huà)之后的，結(jié)束狀態(tài)
? ? ? ? ? ? ? ? ? ? el.style.transform = "translate(150px, 450px)"
? ? ? ? ? ? ? ? ? ? el.style.transition = 'all 1s ease'
? ? ? ? ? ? ? ? ? ? // 這里的 done， 起始就是 afterEnter 這個(gè)函數(shù)，也就是說(shuō)：done 是 afterEnter 函數(shù)的引用
? ? ? ? ? ? ? ? ? ? done()
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? afterEnter(el){
? ? ? ? ? ? ? ? ? ? // 動(dòng)畫(huà)完成之后，會(huì)調(diào)用 afterEnter
? ? ? ? ? ? ? ? ? ? // console.log('ok')
? ? ? ? ? ? ? ? ? ? this.flag = !this.flag
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? </script>
十六：使用ref獲取DOM元素和組件
? ? ? <h3 id="myh3" ref="myh3">哈哈哈， 今天天氣太好了?。?！</h3>? ? ?
? ? ? <script>
? ? ? methods:{
? ? ? ? console.log(this.$refs.myh3.innerText
? ? ? }
? ? ? </script>
