vue安裝使用

1、安裝（cmd）

一、全局安裝vue

cnpm install --global vue-cli

二、cd到須要建立項目的文件夾下

三、建立項目 項目是基於webpack的

vue init webpack my-project（項目名稱）

四、安裝依賴庫

cd 項目

cnpm i

五、啓動文件

npm start（npm run dev）       --vue2.0

npm run serve                          --vue3.0

六、安裝成功

 

2、vue目錄

 一、項目安裝成功界面（http://localhost:8080/#/）

二、項目目錄

build	項目構建(webpack)相關代碼
config	配置目錄，包括端口號等。咱們初學能夠使用默認的。
node_modules	npm 加載的項目依賴模塊
src	這裏是咱們要開發的目錄，基本上要作的事情都在這個目錄裏。裏面包含了幾個目錄及文件： assets: 放置一些圖片，如logo等。 components: 目錄裏面放了一個組件文件，能夠不用。 App.vue: 項目入口文件，咱們也能夠直接將組件寫這裏，而不使用 components 目錄。 main.js: 項目的核心文件。
static	靜態資源目錄，如圖片、字體等。
test	初始測試目錄，可刪除
.xxxx文件	這些是一些配置文件，包括語法配置，git配置等。
index.html	首頁入口文件，你能夠添加一些 meta 信息或統計代碼啥的。
package.json	項目配置文件。
README.md	項目的說明文檔，markdown 格式

 

3、成績表練習

main.js App.vue項目入口文件

index.html 首頁入口文件

Achievement.vue 成績單組件

index.js 路由

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
//導入Achievement組件
import Achievement from '@/components/Achievement'

Vue.use(Router)

export default new Router({
    // 路由
  routes: [
    {
      path: '/',
      name: 'Achievement',
      component: Achievement
    }
  ]
})

index.js

App.vue 項目入口

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

App.vue

Achievement.vue 成績單組件

 

<template>
    <div class="achievement">
        <h1>成績單</h1>
        <div class="searchclass inputclass">
            姓名: <input type="text" class="texts" v-model="newname">
            <input type="button" class="addbutton" value="搜索" @click="search()">
        </div>
        <div>
            <table cellpadding="0" cellspacing="0" border="1">
                <tr :class="th">
                    <td>姓名</td>
                    <td>性別</td>
                    <td>分數</td>
                    <td>操做</td>
                </tr>               
                <!-- 用於第一個過濾方法     -->
                <!-- <tr v-for="(item,index) in arr" v-if="myfilter(index)" :key="index"> -->
                <tr v-for="(item,index) in newarr" :key="index">
                    <td>{{item.username}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.grade}}</td>
                    <td>
                        <a href="#" @click="delClick(index)">刪除</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="addclass inputclass">
            姓名: <input type="text" class="texts" v-model="username">
            性別: <select v-model="sex">
                <option value ="男">男</option>
                <option value ="女">女</option>
            </select>
            分數: <input type="number" class="texts" v-model="grade">
            <input type="button" class="addbutton" value="添加" @click="addClick">
        </div>
    </div>
</template>

<script>
export default {
    name: 'Achievement',
    data () {
        return {
            th: "ths",
            newname: "",
            name: "",
            temp: "true",
            username: "",
            sex: "男",
            grade: "",
            arr: [{username:"小趙", sex:"男", grade:90},{username:"小錢", sex:"女", grade:80},{username:"小孫", sex:"男", grade:70},{username:"小李", sex:"女", grade:60}]
        }
    },
    methods: {
        // 搜索按鈕函數 將搜索框中數值賦值給name
        search() {
            this.name=this.newname;
        },
        // 添加按鈕函數 將數據使用push函數添加進arr數組中
        addClick () {
            if (this.grade == ""){
                alert("請輸入分數！")
            }
            else if (this.username == ""){
                alert("請輸入姓名！")
            }
            else if (this.sex == ""){
                alert("請選擇性別！")
            }
            else{               
                this.arr.push({username:this.username, sex:this.sex, grade:this.grade});
            }
        },
        // 刪除按鈕函數 splice數據刪除
        delClick (index) {
            this.arr.splice(index,1);
        }
    },
    computed: {
        // 實現搜索過濾功能：
        // 方法一:在頁面只渲染搜索到的數據
        // myfilter() {
        //     return function(index){
        //         return this.arr[index].username.match(this.name)!==null;         
        //     }           
        // } 
        // 方法二:將搜索的數據放到一個新的數組中 渲染新數組
        newarr:function(){
            let arr = this.arr;
            let newname = this.name;
            // 檢索指定的值indexOf返回的是指定值的位置match返回的是指定的值
            return arr.filter(item => item.username.indexOf(newname) != -1 )
            // return arr.filter(item => item.username.match(newname) != null )
        }
    },
    mounted(){
        console.log(this)
    }
}
</script>

<!-- "scoped" 意思是此樣式只對本組件有用 -->
<style scoped>
    input {
        font-size: 20px;
    }
    table {
        font-size: 25px;
        margin: 30px auto;
    }
    .ths {
        font-weight: bold;
        background: #F0F0F0;
    }
    td {
        height: 50px;
        width: 150px;
    }
    a {
        text-decoration: none;
        color: red;
    }
    .inputclass {
        font-size: 25px;
        line-height: 30px;
    }
    .texts {
        height: 30px;
        width: 80px;
    }
    .addbutton,select {
        height: 35px;
        width: 60px;
    }
</style>

Achievement.vue