VueJs學習筆記

時間 2019-11-09

標籤 vuejs 學習筆記简体版

原文原文鏈接

  在cmd下，進入目錄以後 

  cd 到項目目錄下 

  1 安裝node 

 
 cnpm install 

  2 啓動或者調試 

 
 cnpm start （或是npm run dev） 

3

 
 上線: 

 
  npm run build 

  -------------------------------------------------------------------- 

  # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 

  ------------------------------------------------------ 

  # install dependencies npm install # run server npm start 

  ----------------------------------------- 

 
 vue全家桶的成員是：vue-cli,vuex,vue-router,vue-axios(vue2.0)。 

 
 第三方插件：vue-scroller,vue-lazyload,vue-awesome-swiper(輪播插件)等等的。 

 
 --------------------------------------------------------------------------------- 

 
 element-ui：做用切換主題，給其換膚 

 
 mint-ui：由餓了麼前端團隊推出的 Mint UI 是一個基於 Vue.js 的移動端組件庫 

 
 vue-scroller：誰須要進行上拉加載下拉刷新就給誰加 

 
 vue-router是Vue.js官方的路由插件,路由用於設定訪問路徑，並將路徑和組件映射起來。 

 
 vue-axios：請求後臺接口.：發起http請求 

  vue-resource：請求後臺接口 

  vue-cli腳手架構建工具打開命令行工具輸入：npm install vue-cli -g， 
 使用vue-cli來構建項目（幫你提供好基本項目結構） 

  Vuex 是一個專爲 Vue.js 應用程序開發的 
 狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。實現不一樣組件之間的狀態共享 

  每個 Vuex 應用的核心就是 
 store（倉庫）。「store」基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。 

 
 https://vuex.vuejs.org/zh-cn/intro.html 

 
 vue-loader 是一個 webpack 的 loader，能夠將用下面這個格式編寫的 Vue 組件轉換爲 JavaScript 模塊 

 
 webpack 是一個模塊打包工具。它將一堆文件中的每一個文件都做爲一個模塊，找出它們的依賴關係，將它們打包爲可部署的靜態資源。( 
 App.vue -> 變成正常代碼 ) 

  ---------------------------------------------------------------------------------------------------------------------------- 

  ---------------------------------------------------------------------------------------------------------------------------- 

 
 vue(開發環境的搭建) - 我的文章 

 
 http://www.javashuo.com/article/p-ylxjaoue-es.html 

  ---------------------------------------------------------------------------------------------------------------------- 

  （從其餘網址轉載的這個圖片，見諒） 

  --------------------------------------------------------------------------------------------------- 

  每一個 Vue 應用都須要經過實例化 Vue 來實現。 

  語法格式以下： 

  var vm = new Vue({ // 選項 }) 

  當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，html 視圖將也會產生相應的變化。 

  除了數據屬性，Vue 實例還提供了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。例子以下 

  <script type="text/javascript"> 

  // 咱們的數據對象 

  var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000} 

  var vm = new Vue({ 

  el: '#vue_det', 

  data: data 

})

  document.write( 
 vm.$data === data) // true 

  document.write("<br>") // true 

  document.write( 
 vm.$el === document.getElementById('vue_det')) // true 

  </script> 

  el:'#box',//el 是選擇器. 是掛載點,接下來的改動所有在以上指定的 div 內，div 外部不受影響。 

 
 data 用於定義屬性 

  methods 用於定義的函數，能夠經過 return 來返回函數值。 

  v-model :通常表單元素(input) 雙向數據綁定 

  v-for ="value in a arrar": 循環數組 

 
 v-for="value in json" ：循環json 

 
 {{value}} 值 ; {{$index}} 序號; {{$key}} key值。{{ }} 用於輸出對象屬性和函數返回值。數據綁定最多見的形式就是使用 {{...}}（雙大括號）的文本插值： 

 
 v-on:click="show()" ： 單擊事件 

 
 顯示隱藏:v-show=「true/false」 

  使用 v-html 指令用於輸出 html 代碼 

  v-bind ： HTML 屬性中的值應使用 v-bind 指令。 

  .縮寫 

  v-bind 縮寫 

  Vue.js 爲兩個最爲經常使用的指令提供了特別的縮寫： 

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

  v-on 縮寫 

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

  指令是帶有 v- 前綴的特殊屬性。 

  computed 

  計算屬性關鍵詞: computed。 

  計算屬性在處理一些複雜邏輯時是頗有用的。 

  watch 監聽屬性 

  Component 組件能夠擴展 HTML 元素，封裝可重用的代碼。 

  註冊一個全局組件語法格式以下： 

  Vue.component(tagName, options) 

  prop 是父組件用來傳遞數據的一個自定義屬性。 

  父組件的數據須要經過 props 把數據傳給子組件，子組件須要顯式地用 props 選項聲明 "prop"： 

  使用 
 $emit(eventName) 觸發事件 

  ---------------------------------------------------------------------------------------------------------- 

 
 屬性: 

 
  v-bind:src="" 

 
  width/height/title.... 

 
  簡寫: 

 
  :src="" 推薦 

 
  <img src="{{url}}" alt=""> 效果能出來，可是會報一個404錯誤 

 
  <img v-bind:src="url" alt=""> 效果能夠出來，不會發404請求 

  ------------------------------------------------------------------------------ 

 
 class和style: 

 
  :class="" v-bind:class="" 

 
  :style="" v-bind:style="" 

 
  :class="[red]" red是數據 

 
  :class="[red,b,c,d]" 

 
  :class="{red:a, blue:false}" 

 
  :class="json" 

 
  data:{ 

 
  json:{red:a, blue:false} 

}

 
  -------------------------- 

 
  style: 

 
  :style="[c]" 

 
  :style="[c,d]" 

 
  注意: 複合樣式，採用駝峯命名法 

 
  :style="json" 

 
 --------------------------------------------------------------------------------------------------- 

 
 過濾器:-> 過濾模板數據 

 
  系統提供一些過濾器: 

 
  {{msg| filterA}} 

 
  {{msg| filterA | filterB}} 

 
  uppercase eg: {{'welcome'| uppercase}} 

 
  lowercase 

 
  capitalize 

 
  currency 錢 

 
  {{msg| filterA 參數}} 

 
  .... 

 
 ----------------------------------------- 

 
 ----------------------------------------- 

 
 交互: 

 
  $http （ajax） 

 
  若是vue想作交互 

 
  引入: vue-resouce 

 
  get: 

 
  獲取一個普通文本數據: 

 
  this.$http.get('aa.txt').then(function(res){ 

 
  alert(res.data); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
  給服務發送數據:√ 

 
  this.$http.get('get.php',{ 

 
  a:1, 

b:2

 
  }).then(function(res){ 

 
  alert(res.data); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
  post: 

 
  this.$http.post('post.php',{ 

 
  a:1, 

 
  b:20 

},{

 
  emulateJSON:true 

 
  }).then(function(res){ 

 
  alert(res.data); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
  jsonp: 

 
  https://sug.so.360.cn/suggest?callback=suggest_so&word=a 

 
  https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow 

 
  this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ 

 
  wd:'a' 

},{

 
  jsonp:'cb' //callback名字，默認名字就是"callback" 

 
  }).then(function(res){ 

 
  alert(res.data.s); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
 ----------------------------------------- 

 
 交互: 

 
  $http （ajax） 

 
  若是vue想作交互 

 
  引入: vue-resouce 

 
  get: 

 
  獲取一個普通文本數據: 

 
  this.$http.get('aa.txt').then(function(res){ 

 
  alert(res.data); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
  給服務發送數據:√ 

 
  this.$http.get('get.php',{ 

 
  a:1, 

b:2

 
  }).then(function(res){ 

 
  alert(res.data); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
  post: 

 
  this.$http.post('post.php',{ 

 
  a:1, 

 
  b:20 

},{

 
  emulateJSON:true 

 
  }).then(function(res){ 

 
  alert(res.data); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
  jsonp: 

 
  https://sug.so.360.cn/suggest?callback=suggest_so&word=a 

 
  https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow 

 
  this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ 

 
  wd:'a' 

},{

 
  jsonp:'cb' //callback名字，默認名字就是"callback" 

 
  }).then(function(res){ 

 
  alert(res.data.s); 

 
  },function(res){ 

 
  alert(res.status); 

});

 
 --------------------------------------------------------------------------------------- 

 
 頁面的跳轉：  

 
  <router-link to="/product/24" class="col-50"> 

 
  <img src="/static/images/product-1.jpg" class="img-responsive"/> 

 
  <p>馬來西亞濃縮金絲燕窩</p> 

 
  <span class="red">￥123元</span> 

 
  </router-link> 

  在router.js文件以下： 

  import Product from './views/product.vue' 

{

  path: '/product/:productId', 

  name: 'product', 

  component: Product 

}

  ----------------------------------------------------------------------------------------------------- 

 
 vue生命週期: 

 
  鉤子函數: 

 
  created -> 實例已經建立 √ 

 
  beforeCompile -> 編譯以前 

 
  compiled -> 編譯以後 

 
  ready -> 插入到文檔中 √ 

 
  beforeDestroy -> 銷燬以前 

 
  destroyed -> 銷燬以後 

 
 ---------------------------------- 

 
 用戶會看到花括號標記: 

 
  v-cloak 防止閃爍, 比較大段落 

 
 ---------------------------------- 

 
 <span>{{msg}}</span> -> v-text 

 
 {{{msg}}} -> v-html 

 
 ---------------------------------- 

 
 ng: $scope.$watch 

 
 計算屬性的使用: 

 
  computed:{ 

 
  b:function(){ //默認調用get 

 
  return 值 

}

}

 
  -------------------------- 

 
  computed:{ 

b:{

 
  get: 

 
  set: 

}

}

 
  * computed裏面能夠放置一些業務邏輯代碼，必定記得return 

 
 --------------------------------- 

 
 vue實例簡單方法: 

 
  vm.$el -> 就是元素 

 
  vm.$data -> 就是data 

 
  vm.$mount -> 手動掛在vue程序 

 
  vm.$options -> 獲取自定義屬性 

 
  vm.$destroy -> 銷燬對象 

 
  vm.$log(); -> 查看如今數據的狀態 

 
 --------------------------------- 

 
 循環： 

 
  v-for="value in data" 

 
  會有重複數據？ 

 
  track-by='索引' 提升循環性能 

 
  track-by='$index/uid' 

 
 --------------------------------- 

 
 --------------------------------- 

 
 過濾器: 

 
  vue提供過濾器: 

 
  capitalize uppercase currency.... 

 
  debounce 配合事件，延遲執行 

 
  數據配合使用過濾器: 

 
  limitBy 限制幾個 

 
  limitBy 參數(取幾個) 

 
  limitBy 取幾個 從哪開始 

 
  filterBy 過濾數據 

 
  filterBy ‘誰’ 

 
  orderBy 排序 

 
  orderBy 誰 1/-1 

 
  1 -> 正序 

 
  2 -> 倒序 

 
  自定義過濾器: model ->過濾 -> view 

 
  Vue.filter(name,function(input){ 

});

 
  時間轉化器 

 
  過濾html標記 

 
  雙向過濾器:* 

 
  Vue.filter('filterHtml',{ 

 
  read:function(input){ //model-view 

 
  return input.replace(/<[^<+]>/g,''); 

},

 
  write:function(val){ //view -> model 

 
  return val; 

}

});

 
  數據 -> 視圖 

 
  model -> view 

 
  view -> model 

 
 --------------------------------- 

 
 v-text 

 
 v-for 

 
 v-html 

 
  指令: 擴展html語法 

 
 自定義指令: 

 
  屬性: 

 
  Vue.directive(指令名稱,function(參數){ 

 
  this.el -> 原生DOM元素 

});

 
  <div v-red="參數"></div> 

 
  指令名稱: v-red -> red 

 
  * 注意: 必須以 v-開頭 

 
  拖拽: 

 
  ------------------------------- 

 
 自定義元素指令:（用處不大） 

 
  Vue.elementDirective('zns-red',{ 

 
  bind:function(){ 

 
  this.el.style.background='red'; 

}

});

 
 ------------------------------------------------ 

 
 引入 vue.js 

 
 ------------------------------------- 

 
 bower-> （前端）包管理器 解決js的依賴管理 一款包管理工具 

 
  npm install bower -g 

 
  驗證: bower --version 

 
 bower install <包名> 

 
 bower uninstall <包名> 

 
 bower info <包名> 查看包版本信息 

 
 <script src="bower_components/vue/dist/vue.js"></script> 

 
 ------------------------------------- 

 
 vue-> 過渡(動畫) 

 
  本質走的css3: transtion ,animation 

 
  <div id="div1" v-show="bSign" transition="fade"></div> 

 
  動畫: 

 
  .fade-transition{ 

}

 
  進入： 

 
  .fade-enter{ 

 
  opacity: 0; 

}

 
  離開： 

 
  .fade-leave{ 

 
  opacity: 0; 

 
  transform: translateX(200px); 

}

  另外的：引入Animate.css也能夠實現動畫 

 
  ---------------------------------------- 

 
  ---------------------------------------- 

 
 vue組件: 

 
  組件: 一個大對象 

 
 定義一個組件: 

 
 1. 全局組件 

 
 var Aaa=Vue.extend({ 

 
  template:'<h3>我是標題3</h3>' 

});

 
 Vue.component('aaa',Aaa); 

 
  *組件裏面放數據: 

 
  data必須是函數的形式，函數必須返回一個對象(json) 

 
 2. 局部組件 

 
  放到某個組件內部 

 
 var vm=new Vue({ 

 
  el:'#box', 

 
  data:{ 

 
  bSign:true 

},

 
  components:{ //局部組件 

 
  aaa:Aaa 

}

});

 
 -------------------------------------- 

 
 另外一種編寫方式: 

 
  Vue.component('my-aaa',{ 

 
  template:'<strong>好</strong>' 

});

 
  var vm=new Vue({ 

 
  el:'#box', 

 
  components:{ 

 
  'my-aaa':{ 

 
  template:'<h2>標題2</h2>' 

}

}

});

 
 ----------------------------------- 

 
 ----------------------------------- 

 
 配合模板: 

 
  1. template:'<h2 @click="change">標題2->{{msg}}</h2>' 

 
  2. 單獨放到某個地方 

 
  a). <script type="x-template" id="aaa"> 

 
  <h2 @click="change">標題2->{{msg}}</h2> 

 
  </script> 

 
  b). <template id="aaa"> 

 
  <h1>標題1</h1> 

 
  <ul> 

 
  <li v-for="val in arr"> 

 
  {{val}} 

 
  </li> 

 
  </ul> 

 
  </template> 

 
 ----------------------------------- 

 
 動態組件: 

 
  <component :is="組件名稱"></component> 

 
 -------------------------------------------- 

 
 vue-devtools -> 調試工具 

 
  https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 

 
 -------------------------------------------- 

 
 vue默認狀況下，子組件也無法訪問父組件數 

 
 -------------------------------------------- 

 
 組件數據傳遞: √ 

 
 1. 子組件就想獲取父組件data 

 
  在調用子組件： 

 
  <bbb :m="數據"></bbb> 

 
  子組件以內: 

 
  props:['m','myMsg'] 

 
  props:{ 

 
  'm':String, 

 
  'myMsg':Number 

}

 
 2. 父級獲取子級數據 

 
  *子組件把本身的數據，發送到父級 

 
  vm.$emit(事件名,數據); 

 
  v-on: @ 

 
 -------------------------------------------- 

 
 vm.$dispatch(事件名,數據) 子級向父級發送數據 

 
 vm.$broadcast(事件名,數據) 父級向子級廣播數據 

 
  配合: event:{} 

 
  在vue2.0裏面已經，報廢了 

 
 -------------------------------------------- 

 
 slot: 

 
  位置、槽口 

 
  做用: 佔個位置 

 
  相似ng裏面 transclude （指令） 

 
 -------------------------------------------- 

 
 vue-> SPA應用，單頁面應用 

 
  vue-resouce 交互 

 
  vue-router 路由 

 
  根據不一樣url地址，出現不一樣效果 

 
  咱上課: 0.7.13 

 
 主頁 home 

 
 新聞頁 news 

 
 html: 

 
  <a v-link="{path:'/home'}">主頁</a> 跳轉連接 

 
  展現內容: 

 
  <router-view></router-view> 

js:

 
  //1. 準備一個根組件 

 
  var App=Vue.extend(); 

 
  //2. Home News組件都準備 

 
  var Home=Vue.extend({ 

 
  template:'<h3>我是主頁</h3>' 

});

 
  var News=Vue.extend({ 

 
  template:'<h3>我是新聞</h3>' 

});

 
  //3. 準備路由 

 
  var router=new VueRouter(); 

 
  //4. 關聯 

 
  router.map({ 

 
  'home':{ 

 
  component:Home 

},

 
  'news':{ 

 
  component:News 

}

});

 
  //5. 啓動路由 

 
  router.start(App,'#box'); 

 
 跳轉: 

 
  router.redirect({ 

 
  ‘/’:'/home' 

});

 
 -------------------------------------- 

 
 路由嵌套(多層路由): 

 
  主頁 home 

 
  登陸 home/login 

 
  註冊 home/reg 

 
  新聞頁 news 

 
  subRoutes:{ 

 
  'login':{ 

 
  component:{ 

 
  template:'<strong>我是登陸信息</strong>' 

}

},

 
  'reg':{ 

 
  component:{ 

 
  template:'<strong>我是註冊信息</strong>' 

}

}

}

 
 路由其餘信息: 

 
  /detail/:id/age/:age 

 
  {{$route.params | json}} -> 當前參數 

 
  {{$route.path}} -> 當前路徑 

 
  {{$route.query | json}} -> 數據 

 
 -------------------------------------------- 

 
 vue-loader: 

 
  其餘loader -> css-loader、url-loader、html-loader..... 

 
  後臺: nodeJs -> require exports 

 
  broserify 模塊加載，只能加載js 

 
  webpack 模塊加載器， 一切東西都是模塊, 最後打包到一塊了 

 
  require('style.css'); -> css-loader、style-loader 

 
  vue-loader基於webpack 

 
 .css 

.js

 
 .html 

 
 .php 

 
 ..... 

 
 a.vue 

 
 b.vue 

 
  .vue文件: 

 
  放置的是vue組件代碼 

 
  <template> 

 
  html 

 
  </template> 

 
  <style> 

css

 
  </style> 

 
  <script> 

 
  js （平時代碼、ES6） babel-loader 

 
  </script> 

 
 ------------------------------------- 

 
 簡單的目錄結構: 

 
  |-index.html 

 
  |-main.js 入口文件 

 
  |-App.vue vue文件，官方推薦命名法 

 
  |-package.json 工程文件(項目依賴、名稱、配置) 

 
  npm init --yes 生成 

 
  |-webpack.config.js webpack配置文件 

 
 ES6: 模塊化開發 

 
  導出模塊： 

 
  export default {} 

 
  引入模塊: 

 
  import 模塊名 from 地址 

 
 -------------------------------------------- 

 
 webpak準備工做: 

 
  cnpm install webpack --save-dev 

 
  cnpm install webpack-dev-server --save-dev 

 
  App.vue -> 變成正常代碼 vue-loader@8.5.4 

 
  cnpm install vue-loader@8.5.4 --save-dev 

 
  cnpm install vue-html-loader --save-dev 

 
  vue-html-loader、css-loader、vue-style-loader、 

 
  vue-hot-reload-api@1.3.2 

 
  babel-loader 

 
  babel-core 

 
  babel-plugin-transform-runtime 

 
  babel-preset-es2015 

 
  babel-runtime 

 
 -------------------------------------------- 

 
 手動配置本身: 

 
  webpack+vue-loader 

 
  webpack加載模塊 

 
 ------------------------------------- 

 
 如何運行此項目？ 

 
  1. npm install 或者 cnpm install 

 
  2. npm run dev 

 
  -> package.json 

 
  "scripts":{ 

 
  "dev":"webpack-dev-server --inline --hot --port 8082" 

}

 
 之後下載模塊： 

 
  npm install <package-name> --save-dev 

 
 EADDRINUSE 端口被佔用 

 
 少了: 

 
  webpack-dev-server 

 
  webpack 

 
 ---------------------------------------- 

 
 .vue 結尾，以後稱呼組件 

 
 ---------------------------------------- 

 
 路由: 

 
  vue-router 

 
  -> 如何查看版本: 

 
  bower info vue-router 

 
  路由使用版本: 0.7.13 

 
 配合vue-loader使用: 

 
 1. 下載vue-router模塊 

 
  cnpm install vue-router@0.7.13 

 
 2. import VueRouter from 'vue-router' 

 
 3. Vue.use(VueRouter); 

 
 4. 配置路由 

 
  var router=new VueRouter(); 

 
  router.map({ 

 
  路由規則 

})

 
 5. 開啓 

 
  router.start(App,'#app'); 

 
 注意: 

 
  以前: index.html -> <app></app> 

 
  如今: index.html -> <div id="app"></div> 

 
  App.vue -> 須要一個 <div id="app"></div> 根元素 

 
 home news 

 
 --------------------------------------------- 

 
 路由嵌套: 

 
  和以前如出一轍 

 
 -------------------------------------------- 

 
 上線: 

 
  npm run build 

 
  -> webpack -p 

 
 -------------------------------------------- 

 
 腳手架: 

 
  vue-cli——vue腳手架 

 
  幫你提供好基本項目結構 

 
 自己集成不少項目模板: 

 
  simple 我的以爲一點用都沒有 

 
  webpack 可使用(大型項目) 

 
  Eslint 檢查代碼規範， 

 
  單元測試 

 
  webpack-simple 我的推薦使用, 沒有代碼檢查 √ 

 
  browserify -> 本身看 

 
  browserify-simple 

 
 -------------------------------------------- 

 
 基本使用流程: 

 
 1. npm install vue-cli -g 安裝 vue命令環境 

 
  驗證安裝ok? 

 
  vue --version 

 
 2. 生成項目模板 

 
  vue init <模板名> 本地文件夾名稱 

 
 3. 進入到生成目錄裏面 

 
  cd xxx 

 
  npm install 

 
 4. npm run dev 

 
 --------------------------------------------  

  vue2.0: 

  bower info vue 

  http://vuejs.org/ 

  到了2.0之後，有哪些變化? 

  1. 在每一個組件模板，不在支持片斷代碼 

  組件中模板: 

  以前: 

  <template> 

  <h3>我是組件</h3><strong>我是加粗標籤</strong> 

  </template> 

  如今: 必須有根元素，包裹住全部的代碼 

  <template id="aaa"> 

  <div> 

  <h3>我是組件</h3> 

  <strong>我是加粗標籤</strong> 

  </div> 

  </template> 

  2. 關於組件定義 

  Vue.extend 這種方式，在2.0裏面有，可是有一些改動，這種寫法，即便能用，咱也不用——廢棄 

  Vue.component(組件名稱,{ 在2.0繼續能用 

  data(){} 

  methods:{} 

  template: 

});

  2.0推出一個組件，簡潔定義方式： 

  var Home={ 

  template:'' -> Vue.extend() 

};

  --------------------------------------------------------------------------- 

 
 3. 生命週期 

 
  以前: 

 
  init  

 
  created 

 
  beforeCompile 

 
  compiled 

 
  ready √ -> mounted 

 
  beforeDestroy  

 
  destroyed 

 
  如今: 

 
  beforeCreate 組件實例剛剛被建立,屬性都沒有 

 
  created 實例已經建立完成，屬性已經綁定 

 
  beforeMount 模板編譯以前 

 
  mounted 模板編譯以後，代替以前ready * 

 
  beforeUpdate 組件更新以前 

 
  updated 組件更新完畢 * 

 
  beforeDestroy 組件銷燬前 

 
  destroyed 組件銷燬後 

 
 3. 循環 

 
  2.0裏面默認就能夠添加劇複數據 

 
  arr.forEach(function(item,index){ 

});

 
  去掉了隱式一些變量 

 
  $index $key 

 
  以前: 

 
  v-for="(index,val) in array" 

 
  如今: 

 
  v-for="(val,index) in array" 

 
 4. track-by="id" 

 
  變成 

 
  <li v-for="(val,index) in list" :key="index"> 

 
 5. 自定義鍵盤指令 

 
  以前：Vue.directive('on').keyCodes.f1=17;  

 
  如今: Vue.config.keyCodes.ctrl=17 

 
 6. 過濾器 

 
  以前: 

 
  系統就自帶不少過濾 

 
  {{msg | currency}} 

 
  {{msg | json}} 

 
  .... 

 
  limitBy 

 
  filterBy 

 
  ..... 

 
  一些簡單功能，本身經過js實現 

 
  到了2.0， 內置過濾器，所有刪除了 

 
  lodash 工具庫 _.debounce(fn,200) 

 
  自定義過濾器——還有 

 
  可是,自定義過濾器傳參 

 
  以前: {{msg | toDou '12' '5'}} 

 
  如今: {{msg | toDou('12','5')}} 

 
 ------------------------------------------------------ 

 
 ------------------------------------------------------ 

 
 組件通訊: 

 
  vm.$emit() 

 
  vm.$on(); 

 
  父組件和子組件: 

 
  子組件想要拿到父組件數據: 

 
  經過 props 

 
  以前，子組件能夠更改父組件信息，能夠是同步 sync 

 
  如今，不容許直接給父級的數據，作賦值操做 

 
  問題，就想更改： 

 
  a). 父組件每次傳一個對象給子組件, 對象之間引用 √ 

 
  b). 只是不報錯, mounted中轉 

 
 ------------------------------------------------------ 

 
 能夠單一事件管理組件通訊: vuex 

 
  var Event=new Vue(); 

 
  Event.$emit(事件名稱, 數據) 

 
  Event.$on(事件名稱,function(data){ 

 
  //data 

 
  }.bind(this)); 

 
 ------------------------------------------------------ 

 
 debounce 廢棄 

 
  -> lodash 

 
  _.debounce(fn,時間) 

 
 ------------------------------------------------------ 

 
 vue動畫 

 
 vue路由 

 
 -------------------------------------- 

 
 transition 以前 屬性 

 
 <p transition="fade"></p> 

 
 .fade-transition{} 

 
 .fade-enter{} 

 
 .fade-leave{} 

 
 -------------------------------------- 

 
 到2.0之後 transition 組件 

 
 <transition name="fade"> 

 
  運動東西(元素，屬性、路由....) 

 
 </transition> 

 
 class定義: 

 
 .fade-enter{} //初始狀態 

 
 .fade-enter-active{} //變化成什麼樣 -> 當元素出來(顯示) 

 
 .fade-leave{} 

 
 .fade-leave-active{} //變成成什麼樣 -> 當元素離開(消失) 

 
 如何animate.css配合用？ 

 
  <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> 

 
  <p v-show="show"></p> 

 
  </transition> 

 
 多個元素運動: 

 
  <transition-group enter-active-class="" leave-active-class=""> 

 
  <p :key=""></p> 

 
  <p :key=""></p> 

 
  </transition-group> 

 
 ------------------------------------------ 

 
 vue2.0 路由: 

 
  http://router.vuejs.org/zh-cn/index.html 

 
  下載：bower install vue-router 

 
 基本使用: 

 
 1. 佈局 

 
  <router-link to="/home">主頁</router-link> 

 
  <router-view></router-view> 

 
 2. 路由具體寫法 

 
  //組件 

 
  var Home={ 

 
  template:'<h3>我是主頁</h3>' 

};

 
  var News={ 

 
  template:'<h3>我是新聞</h3>' 

};

 
  //配置路由 

 
  const routes=[ 

 
  {path:'/home', componet:Home}, 

 
  {path:'/news', componet:News}, 

];

 
  //生成路由實例 

 
  const router=new VueRouter({ 

 
  routes 

});

 
  //最後掛到vue上 

 
  new Vue({ 

 
  router, 

 
  el:'#box' 

});

 
 3. 重定向 

 
  以前 router.rediect 廢棄了 

 
  {path:'*', redirect:'/home'} 

 
 ------------------------------------------ 

 
 ------------------------------------------ 

 
 路由嵌套: 

 
  /user/username 

 
  const routes=[ 

 
  {path:'/home', component:Home}, 

{

 
  path:'/user', 

 
  component:User, 

 
  children:[ //核心 

 
  {path:'username', component:UserDetail} 

]

},

 
  {path:'*', redirect:'/home'} //404 

];

 
 ------------------------------------------ 

 
 傳參數： 

 
 /user/strive/age/10 

:id

 
 :username 

 
 :age 

 
 --------------------------------------- 

 
  路由實例方法: 

 
  router.push({path:'home'}); //直接添加一個路由,表現切換路由，本質往歷史記錄裏面添加一個 

 
  router.replace({path:'news'}) //替換路由，不會往歷史記錄裏面添加 

 
 ------------------------------------------ 

 
 vue-cli 

 
 ------------------------------------------ 

 
 npm install 

 
 命令：vue init webpack-simple vue-demo 

 
 ------------------------------------------ 

 
 腳手架: vue-loader 

 
  1.0 ->  

 
  new Vue({ 

 
  el: '#app', 

 
  components:{App} 

})

 
  2.0-> 

 
  new Vue({ 

 
  el: '#app', 

 
  render: h => h(App) 

})

 
 ------------------------------------------ 

 
 vue2.0  

 
  vue-loader和vue-router配合 

 
 vue-router安裝：cnpm install vue-router --save 

 
 ------------------------------------------ 

 
 style-loader css-loader 

 
  style!css 

 
 命令：cnpm install css-loader style-loader --save-dev 

 
 ------------------------------------------ 

 
 vue問題: 

 
  論壇 

 
  http://bbs.zhinengshe.com 

 
 ------------------------------------------------ 

 
 ------------------------------------------------- 

 
 UI組件 

 
  別人提供好一堆東西 

 
  目的:  

 
  爲了提升開發效率 

 
  功能 

 
  原則: 拿過來直接使用 

 
 vue-cli -> vue-loader 

 
 bootstrap: 

 
  twitter 開源 

 
  簡潔、大方 

 
  官網文檔 

 
  基於 jquery 

 
  柵格化系統+響應式工具 (移動端、pad、pc) 

 
  按鈕 

 
 -------------------------------- 

 
 bower 前端包管理器 jquery#1.11.1 

 
  自動解決依賴 

 
 npm node包管理器 jquery@1.11.1 

 
 -------------------------------- 

 
 餓了麼團隊開源一個基於vue 組件庫 

 
  elementUI PC 

 
  MintUI 移動端 

 
 -------------------------------- 

 
 elementUI: 

 
  如何使用 

 
  官網:http://element.eleme.io/ 

 
 使用: 

 
 1. 安裝 element-ui 

 
  npm i element-ui -D 

 
  npm install element-ui --save-dev 

 
  // i -> install 

 
  // D -> --save-dev 

 
  // S -> --save 

 
 2. 引入 main.js 入口文件 

 
  import ElementUI from 'element-ui' 

 
  import 'element-ui/lib/theme-default/index.css' 

 
  所有引入 

 
 3. 使用組件 

 
  Vue.use(ElementUI) 

 
  css-loader 引入css 

 
  字體圖標 file-loader 

 
  less: 

 
  less 

 
  less-loader 

 
 ------------------------------------------------- 

 
 按需加載相應組件: √ 

 
  就須要 按鈕 

 
 1. babel-plugin-component 

 
  cnpm install babel-plugin-component -D 

 
 2. .babelrc文件裏面新增一個配置 

 
  "plugins": [["component", [ 

{

 
  "libraryName": "element-ui", 

 
  "styleLibraryName": "theme-default" 

}

]]]

 
 3. 想用哪一個組件就用哪一個 

 
  引入: 

 
  import {Button,Radio} from 'element-ui' 

 
  使用: 

 
  a). Vue.component(Button.name, Button); 我的不太喜歡 

 
  b). Vue.use(Button); √ 

 
 --------------------------------------------------- 

 
 發送請求: 

 
  vue-resourse 交互 

 
  axios 

 
 --------------------------------------------------- 

 
 element-ui -> pc 

 
 mint-ui 

 
  移動端 ui庫 

 
  http://mint-ui.github.io/ 

 
 1. 下載 

 
  npm install mint-ui -S 

-S

 
  --save 

 
 2. 引入 

 
  import Vue from 'vue'; 

 
  import Mint from 'mint-ui'; 

 
  import 'mint-ui/lib/style.css' 

 
  Vue.use(Mint); 

 
  按需引入: 

 
  import { Cell, Checklist } from 'minu-ui'; 

 
  Vue.component(Cell.name, Cell); 

 
  Vue.component(Checklist.name, Checklist); 

 
 http://mint-ui.github.io/docs/#!/zh-cn2 

 
 論壇: 

 
 ------------------------------------------------------- 

 
 Mint-ui-demo: 看着手冊走了一遍 

 
 https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo 

 
 1. 下載 

 
  npm install mint-ui -S 

-S

 
  --save 

 
 2. 引入 

 
  import Vue from 'vue'; 

 
  import Mint from 'mint-ui'; 

 
  import 'mint-ui/lib/style.css' 

 
  Vue.use(Mint); 

 
  按需引入: 

 
  import { Cell, Checklist } from 'minu-ui'; 

 
  Vue.component(Cell.name, Cell); 

 
  Vue.component(Checklist.name, Checklist); 

 
 http://mint-ui.github.io/docs/#!/zh-cn2 

  cnpm install babel-loader 

 
 proxyTable配置接口地址代理 

  在項目開發的時候，接口聯調的時候通常都是同域名下，且不存在跨域的狀況下進行接口聯調，可是當咱們如今使用 
 vue-cli進行項目打包的時候，咱們在本地啓動服務器後，好比本地開發服務下是 http://localhost:8080 這樣的訪問頁面，可是咱們的接口地址是 http://xxxx.com/save/index 這樣的接口地址，咱們這樣直接使用會存在跨域的請求，致使接口請求不成功，所以咱們須要在打包的時候配置一下，咱們進入 config/index.js 代碼下以下配置便可： 

  dev: { 
 // 靜態資源文件夾 assetsSubDirectory: 'static', // 發佈路徑 assetsPublicPath: '/', // 代理配置表，在這裏能夠配置特定的請求代理到對應的API接口 // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html proxyTable: { '/api': { target: 'http://xxxxxx.com', // 接口的域名 // secure: false, // 若是是https接口，須要配置這個參數 changeOrigin: true, // 若是接口跨域，須要進行這個參數配置 pathRewrite: { '^/api': '' } } }, // 本地訪問 http://localhost:8080 host: 'localhost', // can be overwritten by process.env.HOST 

  接口地址本來是 /save/index，可是爲了匹配代理地址，在前面加一個 /api,  所以接口地址須要寫成這樣的便可生效 
  /api/save/index。 

 
 注意： '/api' 爲匹配項，target 爲被請求的地址，由於在 ajax 的 url 中加了前綴 '/api'，而本來的接口是沒有這個前綴的，因此須要經過 pathRewrite 來重寫地址，將前綴 '/api' 轉爲 '/'。若是自己的接口地址就有 '/api' 這種通用前綴，就能夠把 pathRewrite 刪掉。 

 
  render: h => h(App)  

 
 { render: h => h(App); } 

  等價於 

 
 { render: h => { return h(App); } } 

  等價於 

 
 { render: function(h) { return h(App); } } 

  即： 

 
 { render: function(createElement) { return createElement(App); } } 

 
 createElement 參數 

  看了 createElement 的官方文檔，其實我仍是不明白 createElement 的用法的。createElement 方法的參數有幾個？各個參數的含義、類型是什麼？ 

  示例 

 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="https://unpkg.com/vue"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', // 提供一個在頁面上已經存在的 DOM 元素做爲 Vue 實例掛載目標 render: function (createElement) { return createElement('h2', 'Hello Vue!'); } }); </script> </body> </html> 

 
 <keep-alive> 

  是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。 

 
 methods是個方法，好比你點擊事件要執行一個方法，這時候就用methods, 

 
 computed是計算屬性，實時響應的，好比你要根據data裏一個值隨時變化作出一些處理，就用computed。 

 
 Vue.prototype 

  做用：定義全局變量、定義全局函數 

  定義全局變量: 用export default 暴露出去，在main.js裏面使用Vue.prototype掛載到vue實例上面或者在其它地方須要使用時，引入該模塊即可。 

  定義全局函數：在main.js裏面經過Vue.prototype將函數掛載到Vue實例上面，經過this.函數名，來運行函數。 

  能夠參考： 
 http://www.javashuo.com/article/p-ayqsoopz-ea.html 

 
 sessionStorage 

  經過sessionStorage實如今Vue中多個頁面間的變量的保存與讀取 

  如在登陸成功後，咱們將用戶名保存在sessionStorage中 

 
 sessionStorage.setItem('userName', res.data.userName); 

  在其餘頁面，咱們經過sessionStorage取出用戶名 

 
 var userName = sessionStorage.getItem('userName'); 

 
 如何用JS判斷是蘋果客戶端仍是安卓客戶端： 

  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 

  //alert(navigator.userAgent); 

  window.location.href ="iPhone.html"; 

  } else if (/(Android)/i.test(navigator.userAgent)) { 

  //alert(navigator.userAgent); 

  window.location.href ="Android.html"; 

  } else { 

  window.location.href ="pc.html"; 

};

 
 navigator.userAgent 

 
 聲明瞭瀏覽器用於 HTTP 請求的用戶代理頭的值 

 
  掛載數據 
 
   在實例化Vue的時候，兩種方式掛載數據 
 
   方法一：最經常使用的方法 
 
   var app=new vue({ 
 
   el:"#app", 
 
   data(){} 
 
   ````` 
 
   }) 
 
   注：文檔中最經常使用的作法就是直接在實例化的時候利用el:"#app"來掛載元素 
 
   方法二：$mount  
 
   var app=new vue({ 
 
   data(){} 
 
   }) 
 
   app.$mount("#app") 
 
   注：利用$mount掛載的方法有一個很大的好處，就是將實例化的內容和他對HTML的關聯分開，能夠更直觀的展示。 
 
  require('qs') 
 
   使用 
  qs庫來格式化數據 
 
  var qs = require('qs'); axios.post('/foo', qs.stringify({'bar':123})); 
 
  參考：https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral

1. VueJs 學習筆記
2. Vuejs 學習筆記
3. 【vuejs】1/5vue 學習筆記
4. Vuejs學習筆記（全）
5. VueJs學習記錄
6. VueJs筆記
7. VueJs項目筆記
8. VUEJS入門學習
9. 爲何學習Vuejs
10. VueJs學習彙總
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。