VueLI詳解

VueLI是一個基於Vue的UI組件庫，其中包含了許多常用的UI組件，比如按鈕、表格、彈窗、下拉框等，簡化了我們的前端開發。在VueLI中，我們可以使用Vue.js提供的數據驅動和組件化的開發方式，讓前端開發更加快速、高效、簡潔。

一、Vue里的緩存機制

VueCLI是Vue的一個基本構建工具，可以創建一個基礎的Vue項目。在VueCLI框架中，我們可以使用緩存機制來提高應用的性能。在路由中的keep-alive標籤中，我們可以將某個組件進行緩存。

<keep-alive>
  <router-view />
</keep-alive>

上述代碼中，我們使用keep-alive標籤包裹了router-view，這樣的話，進入該組件後，下次再進入該組件時會直接讀取緩存中的內容，從而起到加速應用的效果。

二、Vue兩層子路由怎麼寫

在Vue項目中，我們可以使用子路由來將多個頁面進行組合。具體方法是在父組件中的路由配置文件中，引入兩個或兩個以上的子路由配置文件。

//父組件路由配置文件
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home',
      component: layout,
      children: [
        {
          path: '/home',
          component: home,
          children:[
          	{
          		path:'/home/subpage1',
          		component:subpage1
          	},
          	{
          		path:'/home/subpage2',
          		component:subpage2
          	}
          ]
        }
      ]
    }
  ]
})

上述代碼中，我們在home組件下又進行了兩級子路由的配置，分別為/subpage1和/subpage2。在訪問/home時，會默認進入/subpage1，可以通過同級路由的<router-link>標籤進行路由的切換。

三、Vue連接資料庫

Vue無法直接連接資料庫，需要使用Node.js作為後台搭配使用。具體方法是在Node.js中編寫介面並向前端提供API介面，從而實現與資料庫的交互。

在Node.js中，我們可以使用各種ORM框架和資料庫連接池來連接不同類型的資料庫。

var mysql = require('mysql');
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'test'
});
connection.connect();
connection.query('SELECT * FROM user', function (error, results, fields) {
  if (error) throw error;
  console.log('The result is: ', results);
});
connection.end();

上述代碼中，我們使用了mysql連接池來連接資料庫，並查詢其中的user表，返回結果為results。

四、Vue兩個側邊欄實現

在Vue中，我們可以使用兩種方法實現雙側邊欄。一種是通過布局組件，在頁面的左側和右側分別插入兩個組件；另一種是通過z-index將兩個側欄進行層疊。

//雙側邊欄布局
<div class="container">
  <div class="sidebar left">
    <left-sidebar />
  </div>
  <div class="main">
    <router-view />
  </div>
  <div class="sidebar right">
    <right-sidebar />
  </div>
</div>

上述代碼中，我們將left-sidebar和right-sidebar兩個組件分別放置在了頁面的左側和右側。可以根據實際需求進行組件的替換。

五、Vue里如何使用id登錄

在Vue中使用id登錄，首先需要將用戶id存入cookie或session中，並在登錄後的頁面中通過介面獲取該id值，從而進行頁面的展示。

//登錄組件
login(){
  const params = {
    username: this.username,
    password: this.password
  }
  axios.post('/api/login',{params:params}).then(response=>{
    if(response.data.code == '0'){
      //存入cookie
      this.$cookie.set('userid', response.data.userid);
      //跳轉到登錄後頁面
      this.$router.push('/home')
    }else{
      this.$message.error(response.data.message);
    }
  })
}
//登錄後頁面
getUserId(){
  //獲取cookie中的userid
  const userid = this.$cookie.get('userid');
  //通過介面獲取用戶數據
  axios.post('/api/userinfo',{params:{userid:userid}}).then(response=>{
    if(response.data.code == '0'){
      //渲染頁面
      this.username = response.data.username;
      this.phone = response.data.phone;
    }else{
      this.$message.error(response.data.message);
    }
  })
}

上述代碼中，我們使用了cookie來存儲用戶id，並通過axios進行了介面請求，從而完成了id登錄功能的實現。

六、Vue里的change

在Vue中，我們可以通過v-model來實現change事件的綁定。

<template>
  <div>
    <input v-model="text" @change="handleChange" />
    <p>{{text}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      text:''
    }
  },
  methods:{
    handleChange(){
      console.log('input change')
    }
  }
}
</script>

上述代碼中，我們使用了v-model來綁定了text的值，並在text值發生變化時，觸發了handleChange事件。

七、Vue鏈式調用換行 vscode

在Vue中使用鏈式調用時，如果代碼較長，會導致代碼的可讀性較差。這時，我們可以在VSCode中使用shift+enter來進行換行。

import axios from 'axios';

axios.post('/api/userinfo', {params: {userid: userid}})
  .then(response => {
    if (response.data.code === '0') {
      this.username = response.data.username;
      this.phone = response.data.phone;
    } else {
      this.$message.error(response.data.message);
    }
  })
  .catch(error => {
    console.log(error);
  });

上述代碼中，我們在then、catch等鏈式方法後加入了回車，使代碼更加美觀易讀。

八、Vue利用微信JSDk報錯

在Vue中，如果需要開發微信公眾號等項目，就需要用到微信JSDk。在引入微信JSDk的時候，如果出現報錯信息，可以通過以下幾種方法解決：

1、嘗試使用微信JSDk的不同版本。

2、檢查自己的域名是否通過了微信公眾號平台的認證。

3、檢查自己的微信JSDk的地址是否正確，是否存在跨域請求等問題。

九、Vue瀏覽器返回重定向

在Vue中進行頁面跳轉時，如果直接使用瀏覽器的返回按鈕，可能會導致頁面無法正常顯示。為了解決這個問題，我們可以在頁面中使用keep-alive標籤。

//App.vue
<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

上述代碼中，我們在App.vue中使用了keep-alive標籤，並在其內部包裹了router-view，從而達到了保留頁面狀態的效果。

十、Vue瀏覽器自帶的小眼睛選取

在Vue中，我們可以使用type="password"使輸入框顯示為密碼框。在Chrome瀏覽器中，會出現一個小眼睛圖標，可以通過點擊該圖標來顯示或隱藏輸入框的內容。

<template>
  <div>
    <input type="password" v-model="password" />
  </div>
</template>

上述代碼中，我們使用type="password"來設置輸入框為密碼框。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/258665.html