Vue框架快速上手

yetangjian發表於2023-10-02
Vue框架

Vue基礎

vue指令

內容繫結

v-text

設定標籤的內容一般透過雙大括號的表示式{{ }}去替換內容

{{ hello }}

v-html

與v-text類似區別在於html中的結構會被解析為標籤設定元素的innerHTML,v-text只會解析文字

事件繫結

v-on

可以簡寫為@，繫結的方法在methods中

顯示切換

v-show

原理是修改的元素的display實現隱藏，指令後的內容最終都會解析為布林值

v-if

可以搭配v-else-if v-else使用

透過表示式來確認是否從dom樹中刪除

<body>
    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <button v-show="imgNum != '0'" @click="changeNum">上一張</button>
        <img :src="imgNum+'.jpg'" alt="" class="picSize">
        <button>下一張</button>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgNum:"1"
            },
            methods:{
                changeNum: function(){
                    let n = parseInt(this.imgNum);
                    n++;
                    n %= 3;
                    this.imgNum = n.toString();
                }
            }
        })
    </script>
</body>

屬性繫結

v-bind

可以透過簡寫：屬性名來繫結屬性

列表迴圈

v-for

通常搭配陣列一起使用，語法（item,index） in 資料

        <ul>
            <li v-for="(item,index) in noteHistory">
                {{ item }} <span v-show="item?true:false" @click="deleteHistory(index)">x</span>
            </li>
        </ul>

雙向資料繫結

v-model

繫結資料和表單元素相關聯

<body>
    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="updateList">
        <ul>
            <li v-for="(item,index) in noteHistory">
                {{ item }} <span v-show="item?true:false" @click="deleteHistory(index)">x</span>
            </li>
        </ul>
        <span v-show="noteHistory.length > 0 ">總條數：<strong> {{ noteHistory.length }} </strong> </span>
        <button @click="clear" v-show="noteHistory.length > 0 ">清空</button>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                noteHistory:[],
                message: ""
            },
            methods:{
                updateList: function(){
                    this.noteHistory.push(this.message);
                    // 新增後清空message
                    this.message = "";
                },
                deleteHistory: function(index){
                    this.noteHistory.splice(index,1);
                },
                clear: function(){
                    this.noteHistory = [];
                }
            }
        })
    </script>
</body>

前期安裝

  1. 我們的框架需要透過NPM來管理我們的NodeJs的包
    • 下載地址 https://nodejs.org/en 選擇穩定版本
  2. Vue CLi是vue的腳手架，我們透過命令npm install -g@vue/cli建立一個專案vue create + 專案名稱
  3. package.json所有的依賴包都在這裡，我們可以透過npm install 安裝
    • 透過npm run serve執行

元件開發

  1. 元件字尾名都是.vue
  2. 每個元件基本有三部分組成template標籤中是元件的結構，script放入元件js程式碼，style是元件的樣式程式碼
<template>
    <div>
        <h1>{{ question }}</h1>
    </div>
</template>
<script>
    export default{
        name:"movie",
        data:function(){
            return {
                question:"顯示問題"
            }
        }
    }
</script>

父元件傳值props兩種方法一種透過路由物件獲取

第二種方法，需要在main.js中routes設定屬性props：true，元件中在定義屬性名稱

//動態路由
[{path:'song/:id',component: Song, props:true}]
<template>
    <div>
        <!-- 第一種方法獲取路由中的id-->
        <h6>{{ $route.params.id }}</h6>
        <!-- 第二種辦法是設定props-->
        <h6>{{ id }}</h6>
    </div>
    
</template>

<script>
    export default({
        props:['id']
    })
</script>

element.ui

安裝npm i element-ui -s

方便使用我們可以在main.js裡面全域性import ElementUI from 'element-ui'

Axios:前端頁面向伺服器發起請求

安裝

npm install axios

在專案的main.js中匯入，同時設定請求baseUrl

import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:5000"
Vue.prototype.$http = axios

傳送網路請求

第一個then後面跟著處理成功的情況，catch用來處理失敗的情況，最後一個then總是會執行的。

get請求

axios.get(uri,{params:{ }}).then(function(response)){ }.catch(function(error){ }).then(function(){ })

post請求

axios.post(uri,{ }).then(function(response)){ }.catch(function(error){ })

在需要使用的網路請求的地方使用

export default {
  name: 'App',
  data(){
    return {
      name: "",
      age: 0
    }
  },
  components: {
    HelloWorld,
    movie
  },
  //網路請求一般在created裡面做，在掛載的時候做
  created:function(){
    this.$http.post("/index",{"name":"Jack","age":30})
    .then((response)=>{
      console.log(response.data.name);
      this.name = response.data.name;
      this.age = response.data.age;
    })
    .catch((error)=>{
      console.log(error.data.name);
      console.log(error);
    })
  }
}

mockjs

npm install mockjs

在專案建立mock目錄，新建index.js檔案

//引入mock.js
import Mock from 'mockjs'
//使用mockjs
Mock.mock(RegExp('/index'),{"name":"MOCK","age":30})

在專案中main.js中匯入就可以了，如果不想用了直接刪掉main.js中匯入的包即可

import './mock'

VueRouter

這是官方的路由元件，用來管理單頁面的路由和元件的對映

安裝npm install vue-router@3 （vue2）npm install vue-router@4 （vue3）

在需要管理的元件（.Vue）中做路由連結,需要使用路由站位標籤

<template>
    <div>
        <h1>我的音樂</h1>
        <!-- 宣告路由連結-->
        <router-link to="/my/song/1">歌曲1</router-link>
        <router-link to="/my/song/2">歌曲2</router-link>
        <router-link to="/my/song/3">歌曲3</router-link>
        <!-- 路由需要站位標籤-->
        <router-view></router-view>
    </div>
</template>

新建一個檔案router，在檔案下新建一個index.js

透過routes來控制路由和元件的對映：重定向、路由巢狀、動態路由

import VueRouter from "vue-router";
import Vue from "vue";
//把需要的元件匯入進來
import Discover from '../components/Discover'
import Friend from '../components/Friend'
import My from '../components/My'
import Music from '../components/Music'
import Song from '../components/Song'
//將vuerouter註冊為vue的外掛
Vue.use(VueRouter)
// 執行屬性與元件的對應關係
const router = new VueRouter({
    routes:[
        //首頁重定向
        {path:'/',redirect: Discover},
        {path:'/discover',component: Discover,
        //透過children來宣告子路由，做路由巢狀/discover/music
        children:[
            {path:'music',component: Music}
        ]
    },
        {path:'/friend',component: Friend},
        {path:'/my',component: My,children:
        //動態路由
        [{path:'song/:id',component: Song, props:true}]
        }
    ]
})
//需要做一個匯出
export default router

在專案的main.js中匯入並且在Vue中新增上這個router

import router from './router'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  //key和value名字一直可以就寫一個key
  router
}).$mount('#app')

 

相關文章