vue学习总结-CSDN博客

作为一个切图两年的前端小白，在学习vue的过程中简直是打开了新世界的大门，一串串的问号在脑中浮现，借此记录下我的学习之路，也开启我的第一篇文章！

开始

前提是已经安装了node、npm环境

安装vue-cli 3.0

npm install -g @vue/cli
复制代码

根据远程preset创建项目

vue create --preset cklwblove/vue-preset my-project
复制代码

（这个模板是我们小组的项目模板，省去了很多的配置问题，有自己模板的可按照自己的规则来，或者直接自己创建项目 vue create my-project）

本地预览

cd my-project && yarn run serve
复制代码

运行

npm run serve
复制代码

样式

声明式渲染

相对于静态页面所有的数据都写死，Vue.js的核心是数据的动态渲染，所以要转换思想，采用简洁的模板语法来声明式地将数据渲染进DOM的系统：

最常用的方式：Mustache(插值语法)，也就是 {{}} 语法
解释：{{}}从数据对象data中获取数据
说明：数据对象的属性值发生了改变，插值处的内容都-会更新
说明：{{}}中只能出现JavaScript表达式而不能解析js语句
注意：Mustache 语法不能作用在 HTML 元素的属性上

<h2>{{title}}</h2>

data() {
    return {
      title: "标题"
    };
  }
复制代码

注意：需要数据绑定的变量，都需要定义

指令

指令是带有v-前缀的特殊属性，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

常用的有v-text v-model v-html v-bind v-on，具体的用法我就不写了，戳官网吧

样式命名

使用小驼峰命名，每个页面完成后格式化，保持代码样式的整洁性，其他的样式编写按照模板的规定来即可（这是我做模板demo时的小细节，没有模板的朋友按照自己的风格来）

图片加载

vue中的本地图片路径放到data中要加require

data(){
    return{
	 dataList:[
	    {
	       	 image: require("../../assets/img/slide1.png")
	     }
	  ]
      }
   }
复制代码

axios

这次的主要难点是数据接口这块

安装axios

npm install axios
复制代码

在main.js中配置

import axios from ‘axios’
Vue.prototype.$axios = axios;
复制代码

模板中需在public文件夹config.local.js 中配置主域名

window.LOCAL_CONFIG = {
  API_HOME: 'https://api.github.com/',
}
复制代码

在service文件夹下REATFULLRURL.js中配置配置主域名后面的地址

export default {
  "octocat": "users/octocat",
}
复制代码

注意：在组件中执行请求时，axios需要用方法包含起来

methods:{
	getData(){
	    this.$axios.get('url')
		.then(res => {})
		.catch(err => {})
	   }
       }
复制代码

组件

组件系统是Vue的另一个重要概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。

创建组件的两种方式：全局组件、局部组件

全局组件

全局组件在所有的vue实例中都可以使用，在这次的demo中自己创建了一个全局的组件

在components文件夹下创建新的组件TabBar，在App.vue引入所需的组件

<template>
  <div id="app">
    <div class="pages">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <TabBar/>
  </div>
</template>
复制代码

import { TabBar } from "@components";

components: {
    TabBar
  }
复制代码

注意：组件名需要统一

在这里会出现一个bug，在移动端应用里，为了便于代码组织，通常我们要将组件放在各个路由的 .vue 文件里，但是因为此时组件并不在 body 下，加上定位，overflowscrolling 设置等原因，会出现遮罩在弹层之上，z-index 失效等问题。

因此我们要在组件上使用 v-transfer-dom 实现自动移动到 body 下，解决以上问题。

比如我在页面同时引入了picker组件和TabBar组件，底部的TabBar把picker弹框给遮住了，解决方法在picker组件上使用v-transfer-dom

<div class="memberList" v-show="show" v-transfer-dom>
      <group-title class="listTitle">
        <div>请选择场地</div>
        <div @click="pageInquire">完成</div>
      </group-title>
      <picker :data="venusItem" v-model="venusMsg"></picker>
    </div>
复制代码

局部组件

局部组件，是在某一个具体的vue实例中定义的，只能在这个vue实例中使用

UI框架引用

在项目过程中，难免会用到框架，在选择框架的时候要先看社区生态和维护是怎么样的，更新是否及时，解决问题的速度，是否支持项目中安装的vue-cli版本，否则会有bug解决不了，比如vux的坑我就掉进去出不来了

引用框架，比如vant

安装vant

npm i vant -S
复制代码

按需引入组件

import Button from 'vant/lib/button';
components: { button }
复制代码

swiper引用

在这次引用swiper库的过程中遇到了一个问题，当 loop:true的时候，第一页往前翻的那一页，以及最后一页往后翻的那一页点击跳转无效（即dom绑定事件无法生效）。

当 loop设置为true的时候，点击事件不能绑定在dom上，有很多的坑需要注意，在此附上我老大关于这个问题的解决方法：segmentfault.com/a/119000001…

以上是我做demo的一些小记录，有自己的模板，所以很多是按照模板的配置要求来，用法不同的可看官网