Vue基礎筆記-3

條件渲染

• v-else-if:和v-if、v-else，false不會被渲染
• v-show:控制本div元素是否顯示，會被渲染，只是改變display
• v-cloak:頁面某些元素沒有加載，隱藏未編譯的 Mustache 標籤直到實例準備完畢。

組件

• 全局組件與局部組件
• 父子組件通訊-數據傳遞：只允許父組件改變子組件數據
• Slot：插槽

通過props將父組件的值傳遞給子組件。子組件綁定自定義函數，this.$emit(“綁定的函數名”);

路由

<router-link></router-link>或this.$rout.push({path:""})

<router-view></router-view>

• 動態路由匹配： { path: '/usercenter/:userId', name: 'usercenter', component: Usercenter }
• 嵌套路由：包含子路由， <router-link to="/job/title">``</router-link>
• 編程式路由：通過js實現頁面跳轉$router.push({path:"name",query:{a:123}})
$router.go(1)
• 命名路由和命名視圖：給路由定義不同名字，根據名字匹配；或給不同的router-view定義名字，通過名字進行組件渲染動態路由時<router-link :to="{name: 'detail',params:{cartId:123}}"></router-link>
  
  
  在router-view中添加name=“視圖名”，在index.js中將component改成components添加視圖名:組件

tip

• 其實是對history的封裝（go、back、pushState）
• 可通過{{$route.params.路由上的ID等參數}}
• 地址欄有#爲hash，沒有#爲history模式。可以在rout下的index.js添加mode:‘history’
• 單路由：$route；多路由：$router;

Vue-Resource基礎介紹

命令行：npm install vue-resource --save

API

問題？？

• query和param的區別
  param在動態路由獲取參數的時候使用，
  query在編程式路由獲取參數時使用

安裝Ruby

Selenium Webdriver 進行 WEB 自動化測試
Capybara 驅動 WEB 應用

安裝sass

前提：ruby已經安裝完成
命令：gem install sass

使用Element

• 前提：安裝webpak
• 安裝：npm i element-ui -S
• 在main.js中寫入

import Vue from 'vue';
import ElementUI from 'element-ui';
// 樣式文件需要單獨引入
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

• 安裝babel-plugin-component

npm install babel-plugin-component -D

並修改文件，詳情請點擊官方文檔