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/n/258665.html