vue.js

vue.cli（腳手架）安裝

1，檢查NODE版本，確保在4以上穩定版本
2，npm install -g vue-cli
3，vue list查到可安裝的模板，webpack
4，vue init [模板名字webpack] [項目名字my Project]
5，cd到項目目錄下，npm install安裝依賴包
6，npm run dev 啟動項目，在http：//localhost：8080

配置安裝依賴包

npm install xxx --save                      這是普通依賴包
npm install xxx --save-dev                  這是開發依賴包
npm i axios -S     
npm i mint-ui -S

主入口文件App.vue,組件在components文件夾中。

由于 Vue 不允許動態添加根級響應式屬性，所以你必須在初始化實例前聲明根級響應式屬性，哪怕只是一個空值:

避免相對路徑，在webpack.base.conf.js里面設置其路徑的別名

例如

配置不同路徑的別名

項目的目錄

過渡的CSS類名

對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用 <transition name="my-transition"> 可以重置前綴，比如 v-enter 替換為 my-transition-enter。
例如<transition name="my-transition"><transition>
<transition><transition>

同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了 過渡模式

in-out: 新元素先進行過渡，完成之后當前元素過渡離開。
out-in: 當前元素先進行過渡，完成之后新元素過渡進入。

v-html和v-text區別

  • v-html渲染頁面時識別html標簽 并進行渲染
    你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

  • v-text不識別html標簽，單純渲染成字符串。

指令系統

  • v-bind ? ?? 綁定兩個元素的值保持一致，響應地更新 HTML 屬性 簡寫“：”
  • v-on ???它用于監聽 DOM 事件 簡寫“@”
  • v-if ??? 后面的參數是一個變量 Boolean類型，用于控制元素是否隱藏
  • v-for ??? 列表循環
  • v-model ???數據雙向綁定

指令縮寫

v-bind

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

過濾器

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

第一個參數指要被過濾的數據，通常在data屬性中
第二個參數指過濾的方法，通常定義在filters屬性中

<!-- 過濾器可以串聯 -->
{{ message | filterA | filterB }}

<!-- 過濾器是 JavaScript 函數，因此可以接受參數 -->
{{ message | filterA('arg1', arg2) }}

條件語句

v-if指令將根據表達式值(true 或 false )來決定是否插入元素；
可以用 v-else 指令給 v-if 添加一個 "else" 塊；
v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈式的多次使用；

v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后

循環語句

v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組并且 site 是數組元素迭代的別名。v-for 可以綁定數據到數組來渲染一個列表。

v-for="site in sites"

v-for 可以通過一個對象的屬性來迭代數據

v-for="value in object"

你也可以提供第二個的參數為鍵名

v-for="(value, key) in object"

第三個參數為索引

v-for="(value, key, index) in object"

v-for 也可以循環整數

v-for="n in 10"

計算屬性

computed
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。

事件處理器

事件監聽可以使用 v-on 指令
v-on 可以接收一個定義的方法來調用

事件修飾符

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件至少觸發一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按鍵修飾符

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：

.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

組件

注冊一個全局組件語法格式如下

Vue.component(tagName, options)

tagName 為組件名，options 為配置選項。注冊后，我們可以使用以下方式來調用組件

<tagName></tagName>

Vue.component('todo-item', {
  // todo-item 組件現在接受一個
  // "prop"，類似于一個自定義特性。
  // 這個 prop 名為 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
父組件動通過prop 向子組件傳值
子單元通過 prop 接口與父單元進行了良好的解耦。

自定義指令

1、全局指令

<div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
</div>
 
<script>
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 創建根實例
new Vue({
  el: '#app'
})
</script>

2、局部指令，只能在這個實例中使用

vue-router

https://router.vuejs.org/

vue路由配置：
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、配置路由

3.1、創建組件 引入組件
3.2、定義路由 （建議復制s）

const routes = [
    { path: '/foo', component: Foo },
     { path: '/bar', component: Bar },
     { path: '*', redirect: '/home' }   /*默認跳轉路由*/
]

3.3、實例化VueRouter

const router = new VueRouter({
    routes // （縮寫）相當于 routes: routes
})

3.4、掛載

new Vue({
      el: '#app',
      router，
      render: h => h(App)
    })

3.5 、根組件的模板里面放上這句話 <router-view></router-view>

3.6、路由跳轉

 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>

編程式導航 即用JavaScript實現路由跳轉

定義點擊事件 例如

fun(){
  this,$router.push({path:" XXXX"})
}

生命周期鉤子---轉載

image.png
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 創建前狀態===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 創建完畢狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 掛載前狀態===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 掛載結束狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 銷毀前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 銷毀完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

栗子

beforecreate : 舉個栗子：可以在這加個loading事件
created ：在這結束loading，還做一些初始化，實現函數自執行
mounted ： 在這發起后端請求，拿回數據，配合路由鉤子做一些事情
beforeDestroy： 你確認刪除XX嗎？
destroyed ：當前組件已被刪除，清空相關內容

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容