Vue2知识点 - 代码天地

注意:笔记内容来自网络

1Vue指令

指令是指：带有v-前缀的特殊标签属性

1.1 v-html

v-html（类似 innerHTML）

- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

举例：

展示：

1.2 v-show与v-if

1.3 v-else和v-else-if

1.4 v-on

方式一：内联语句方式

方式二：配置methods方式

1.5 v-bind

将表达式的值赋值给属性

举例：

1.6 v-for

常常用来遍历数组

1.7 v-model

1.8 指令修饰符

2 v-bind控制样式

3 计算属性

<div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{
   
   { item.name }}</td>
        <td>{
   
   { item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{
   
   { totalCount }} 个</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 2 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        // 计算属性，计算礼物总数
        totalCount() {
         return this.list.reduce((sum, item) => sum + item.num, 0)}
          
      }
    })
  </script>

this.list.reduce((sum, item) => sum + item.num, 0)}代码解释：这是遍历数组，对里面数据求和，其中0表示初始值，sum表示每次计算的值，item表示数组的每一项。

computed与methods区别？

computed具有缓存特性，可以提升性能。

假设页面中多处需要计算数值，如果采用计算属性，只要计算一次值，如果采用methods的话需要，计算多次。

计算属性的完整写法

4 字符串从常用操作

字符串常用操作

5 watch侦听器

简单写法

完整写法

6 vue的生命周期

7 图表设计

以创建饼图为例：（不同图片可以率有区别，具体可以参考文档）

步骤一：下载 - Apache ECharts

步骤二：在项目中导入echarts.js

步骤三:设计容器来显示图表

步骤四：创建vue实例，在mounted钩子中导入代码。

var myChart = echarts.init(document.getElementById('main'));
     option = {
  backgroundColor: '#2c343c',
  title: {
    text: 'Customized Pie',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: 'qq' },
        { value: 310, name: 'Email' },
        { value: 274, name: 'Union Ads' },
        { value: 235, name: 'Video Ads' },
        { value: 400, name: 'Search Engine' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};
                myChart.setOption(option);
            }

步骤五：更新图表(只需要更改data数据，图表就会跟着改变)

 // 更新图表
            this.myChart.setOption({
              // 数据项
              series: [
                {
                  // data: [
                  //   { value: 1048, name: '球鞋' },
                  //   { value: 735, name: '防晒霜' }
                  // ]
                  data: this.list.map(item => ({ value: item.price, name: item.name}))
                }
              ]
            })

总代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.min.js"></script>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script>
        var app = new Vue({
            el: '#main',
            
   mounted() {
    var myChart = echarts.init(document.getElementById('main'));
     option = {
  backgroundColor: '#2c343c',
  title: {
    text: 'Customized Pie',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: 'qq' },
        { value: 310, name: 'Email' },
        { value: 274, name: 'Union Ads' },
        { value: 235, name: 'Video Ads' },
        { value: 400, name: 'Search Engine' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};
                myChart.setOption(option);
            }
        })
    </script>

</body>
</html>

8 工程化开发

9 普通组件注册与使用

9.1局部注册

9.2局部注册组件使用

9.3 全局注册

9.4 全局注册组件使用

在任意组件上都可以直接使用。

9.5注册方式选择

10 组件样式冲突解决

解决方法：在style标签加上scoped

11 data选项必须是一个函数

12 组件之间通信

12.1 父子通信

12.1.1 父传子

12.1.2 子传父

12.1.3 props详解

12.2 非父子之间通信

12.2.1 事件总线方式

步骤一：创建一个大家都可以访问的事件总线

步骤二：设置接收方（监听方）

步骤是：设置发送方

12.2.2 provide-inject方式

provide：提供

inject：添加

13 ref与$refs

14 $nextTick

15 自定义指令

全局注册应该定义在main.js中，局部注册定义在需要用到的组件中

16插槽

16.1 默认插槽

16.2插槽的后备内容

16.3 具名插槽

16.4作用域插槽

17 路由基本使用

18 路由模块封装

步骤一：在src下创建router文件夹，然后在router下创建.js文件。

步骤二：在main.js导入

19 router-link

20 声明式导航跳转传参

20.1 方式一

在函数中调用需要多加一个this

20.2 方式二

20.3 两种方式区别

21 路由重定向

21.1 404 重定向

22 路由模式

23 编程式导航-基本跳转

23.1 方式一

23.2 方式二

23.3 传参

23.3.1 方式一

23.3.2 方式二

24 配置二级路由

25 返回到上一个路由

26 缓存组件

27 VueCli 自定义创建项目

28 ESlint代码规范及手动修复

ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则。

建议把：JavaScript Standard Style 看一遍，然后在写的时候, 遇到错误就查询解决。

手动修复

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,.....）去 ESLint 规则列表中查找其具体含义。

打开 ESLint 规则表，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。

29 通过eslint插件来实现自动修正

30 Vuex

30 vuex 的使用 - 创建仓库

3 创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

4 在 main.js 中导入挂载到 Vue 实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

30.1核心概念 - state 状态

30.1.1通过$store访问

30.1.2通过辅助函数 - mapState获取 state中的数据

30.2 开启严格模式

30.3 核心概念-mutations

30.4带参数的 mutations

30.5 辅助函数- mapMutations

31核心概念 - actions

31.1辅助函数 -mapActions

32 核心概念 - getters

33 小结

34核心概念 - module

34.1 获取模块内的state数据

34.2 获取模块内的getters数据

34.3获取模块内的mutations方法

34.4获取模块内的actions方法

34.5 小结

35 企业规范目录

36 vant组件库

组件库网址：Vant 2 - 轻量、可靠的移动端组件库 (vant-ui.github.io)

vue2的话移动端会选择vant2，vue3会选择vant4.

36.1安装与导入

Vant 2 - 轻量、可靠的移动端组件库 (vant-ui.github.io)

可以进行全局导入，与按需导入，但是推荐按需导入，这样文件大小比较小，加载速度比较快。

全部导入

按需导入

当然一般我们不会把按需导入直接注册在main.js，我们会进行文件抽离。

37 基于postcss插件实现项目vw适配

Vant 2 - 轻量、可靠的移动端组件库 (vant-ui.github.io)

步骤一：安装插件

步骤二：添加配置

在根目录下创建postcss.config.js，注意不是src

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};