Vue入門篇

Vue-cli開發環境搭建

1. 安裝nodejs

2. 設置緩存文件夾

$ npm config set cache "D:\vueProject\nodejs\node_cache"

3. 設置全局模塊存放路徑(設置成功後，以後用命令npm install XXX -g安裝之後模塊就在D:\vueProject\nodejs\node_global裏)

$ npm config set prefix "D:\vueProject\nodejs\node_global"

4. 基於node js 安裝cnpm淘寶鏡像

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

5. 加入環境變量

D:\vueProject\nodejs\node_global

6. 安裝Vue

$ cnpm install vue -g

7. 安裝vue-cli腳手架

$ cnpm install vue-cli -g

8. 根據模板建立項目

$ vue init webpack mytest

• Project name :項目名稱 ，若是不須要更改直接回車就能夠了。注意：這裏不能使用大寫，因此我把名稱改爲了vueclitest
• Project description:項目描述，默認爲A Vue.js project,直接回車，不用編寫。
• Author：做者，若是你有配置git的做者，他會讀取。
• Install  vue-router? 是否安裝vue的路由插件，咱們這裏須要安裝，因此選擇Y
• Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。咱們這裏不須要輸入n，若是你是大型團隊開發，最好是進行配置。
• setup unit tests with  Karma + Mocha? 是否須要安裝單元測試工具Karma+Mocha，咱們這裏不須要，因此輸入n。
• Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試，咱們這裏不須要，因此輸入n。

 

|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- utils.js                     // 構建工具相關
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置,構建開發本地服務器
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|-- src                              // 源碼目錄
|   |-- components                   // vue公共組件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 頁面入口文件
|   |-- main.js                      // 程序入口文件，加載各類公共組件
|-- static                           // 靜態文件，好比一些圖片，json數據等
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- .postcsssrc                       // postcss配置文件
|-- README.md                        // 項目說明
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息,包依賴信息等

　　

9. 安裝工程依賴模塊

$ cd mytest && cnpm install

10. 啓動項目

$ cnpm run dev

　　

屬性綁定：

v-bind: 或者 :

<div id="root">
    <span v-bind:title="'this is '+title">hello world</span>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            title:"hello world"
        }
    })
</script>

　　

事件綁定：

v-on: 或者 @

<div id="root">
    <h1 @click="handleClick">{{msg}}</h1>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "hello",
        },
        methods: {
            handleClick: function () {
                this.msg = "world";
            }
        }
    })
</script>

　　

雙向數據綁定：

v-model

<div id="root">
    <input v-model="content">
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            content:"this is content"
        }
    })
</script>

　　

計算屬性：

computed:

<div id="root">
    姓<input v-model="firstName">
    名<input v-model="lastName">
    <div>{{fullName}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:""
        },
        computed:{
            fullName:function () {
                return this.firstName+" "+this.lastName
            }
        }
    })
</script>

　　

偵聽器：

watch

<div id="root">
    姓<input v-model="firstName">
    名<input v-model="lastName">
    <div>{{fullName}}</div>
    <div>{{count}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:"",
            count:0
        },
        computed:{
            fullName:function () {
                return this.firstName+" "+this.lastName
            }
        },
        watch:{
            firstName:function () {
                this.count ++
            },
            lastName:function () {
                this.count ++
            }
        }
    })
</script>

　　

v-if 和v-show的區別：

<div id="root">
    <div v-show="show">hello world</div>

    <button @click="handleClick">toggle</button>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            show: true
        },
        methods:{
            handleClick:function () {
                this.show = !this.show;
            }
        }
    })
</script>

　　條件爲false時：v-if 這個元素不復存在，v-show style="display:none"

v-for:

<div id="root">
<ul>
    <li v-for="(i,index) in list" :key="index">{{i}}</li>
</ul>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            list:[1,2,3]
        },

    })
</script>

　　key的存在是爲了提升遍歷性能。

組件內使用v-for

<template>
  <ul>
    <item-component v-for="item in items" :item="item"></item-component>
  </ul>
</template>

<script>
  export default {
    props: ['item']
  }
</script>