vue學習筆記（全）

常用插件:live server ESLint vetur

安裝node.js 【官網下載，安裝即可】

一.准備工作

1.   安裝cnpm；安裝webpack；安裝webpack-cli；安裝vue/cli

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install webpack  -g

npm install webpack-cli -g

npm install -g @vue/cli      // @vue/cli為新版本    vue-cli為老版本  卸載老版本的命令 npm uninstall vue-cli -g

2.安裝vue   

 

3.創建項目：

vue create hello-world     //可以cd到項目里，運行 cnpm install安裝依賴

 4.運行項目

npm run serve

 

5.自動按需引入組件 (推薦)
-
- babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式
- # 安裝插件 `npm i babel-plugin-import -D`

// 在.babelrc 中添加配置
// 注意：webpack 1 無需設置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}

// 對於使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉化為方式二中的按需引入形式
import { Button } from 'vant';

 

二.綁定屬性

1.綁定屬性

<div v-bind:title="title">放上鼠標顯示<div>   v-bind:簡寫： <div :title="title">放上鼠標顯示<div>   title在data里定義，data里的數據用'' 單引號闊氣了
:src="url"    
:class  
:title

 

2.綁定Html

<div v-html="content"></div>

<div v-text="content"></div>  

3.綁定樣式：可以進行判斷

<div :class="{'red':flag}"> 你好</div>   //在樣式表定義red

<div :class="{'red':flag，'blue':!flag}"> 你好</div>    //只有真假，不是0 1
還有:style

 4.循環

<li v-for="item in list"> {{item}}</li>
<li v-for="(item,key) in list">{{key}} {{item}}</li>

<li v-for="(item,key) in list" ：class="{'red':key==0}">{{key}} {{item}}</li>   //第一行class="red"

 三.雙向數據綁定

1.針對表單元素   綁定關鍵詞 v-model='xx'

 

3獲取vue的dom節點

節點添加標識 ref=""  如userinfo
獲取DOM節點 this.$refs.userinfo
獲取DOM節點的值 this.$refs.userinfo.value

 

 

四.事件與方法

1.點擊事件與方法 v-on  簡寫@  ,方法內容放在methods里面.

2.方法與方法之間用,隔開

3.添加數據用push 如給數組list添加數據  ,this.list.push('xxxxx')    ,刪除數據:this.list.splice(index,1)   刪除數組開始的下標,刪除1個

4.執行方法傳值: 如1.@click="xx(a)"  2.方法()添加形參,3.方法內得到參數.

5.事件對象  @click="eventFn($event)"        定義對象(方法) eventFn(e)   ,,,e.xx.xx

 四.TudoList

 

this.messageArr.push(this.message)

this.messageArr.splice(index,1)

 

組件

 

 

路由：把組件按照需求自動掛載到頁面。

安裝：
npm install vue-router --save

導入並使用：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

給組件配置路由功能：如再main.js 配置。

// 1. 導入組件

import Home from './components/Home.vue'

import News from './components/News.vue'

import Content from './components/Content.vue'

// 2.給組件配置路由
// 每個路由應該映射一個組件。 其中"component" 可以是

// 通過 Vue.extend() 創建的組件構造器，
const routes = [

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

  { path: '/News', component: News },

  { path: '/Content/:id', component: Content },

  { path: '*', component: Home },

]

// 3.實例化路由

// 你還可以傳別的配置參數, 不過先這么簡單着吧。
const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes

    mode:'history'   // (縮寫) 去掉路徑中的#

})

// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啟動了！

 

根目錄App.vue 可配置

    <router-link to="/home">home</router-link>
    <router-link to="/news">news</router-link>

    <router-view></router-view>

 

路由傳遞參數

{ path: '/Content/:id', component: Content },        //對應this.$route.params    如需要訪問/Content/ 需要單獨添加一個路由。

{ path: '/PContent', component: PContent }, //對應this.$route.query     路徑/PContent可以訪問，同時，可以用？id=xx傳遞參數