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>