Vue2知识点

news2024/9/20 6:32:35

注意:笔记内容来自网络

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>