vue编写时的一些注意事项（1）（---漫无目的的哔哔赖赖）

1、不要盲目使用箭头函数
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。(摘于vue.js的文档)
·
2.文本的渲染与富文本的渲染
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html (经常会忘记这个v-html)但不要对用户提供的内容进行v-html ,因为它很容易导致 XSS 攻击。

3.{{}}中只能使用三目运算符
·
4.修饰符
vue中的修饰符是很好用的，善用修饰符可以省去很多麻烦
例:
.prevent相当于对触发的事件调用 event.preventDefault()
.stop 可以阻止该元素以及子元素的事件向上冒泡
.number 将输入的内容转为数字，如果不能转换，就返回输入的内容
·
注：element-ui 的 .number 有个坑（有时候也能输入数值以外的值，这里有个坑 ，当输入的值不是number类型的时候，v-model对应的值是空的，但是界面会显示这个值，坑！！！！）
·
5.computed与watch
computed能监视多个值的变化，如果只是监视值变化，计算属性computed 最佳
·
watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。（_.debounce 是通过Lodash限制操作频率的函数）
·
6.动态添加/删除class写法
（1）对象

	<div :class="{className:isAddClass,otherClassName:isAddClass}">测试对象</div>

	<div :class="[{ otherClassName: isAddClass}, className]"></div>

·
（2）三目运算符

	<div :class="isAddClass ? 'className' : 'otherClassName' ">测试对象</div>

·
(3)对象与三目运算符的配合使用

	<div :class="[isAddClass? otherClassName: '', className]" ></div>

·
·其中，isAddClass 是变量，可以是bool值，也可以是其他值，className,otherClassName 是类名，根据isAddClass的值判断添加哪一个class,==如果是需要一次添加多个值，对象里添加多个键值对，三木运算里的class 添加多个即可 - > isAddClass ? ‘className className1 classNam3’ : ‘otherClassName otherClassName1 otherClassName2’ ==
·
（4 ) 用在组件上

	<my-component  class="otherClass">我的组件</my-component>

·
otherClass 是额外添加在这个组件的类名列表里面的，不会影响它已有的类

·
7.动态添加/删除 style写法
（1）对象写法

	<div :style="{color:ColorData,fontSize:fontSizeData}" ></div>

· 键名即是样式名称，可以写成小驼峰式 （fontSize）或是 短横线分隔 （font-size）, 也可以写在一个变量里面，动态改变这个变量
（2）三目运算符

	<div :style="{isAddFisrstStyle ? 'color:red' : 'color:blue' }"></div>

· 字符串里面的内容，即是一般在css中的写法

	<div :style="isAddFisrstStyle ? redStyle : blueStyle "></div>

·
多重值的写法： 详见：vue.js文档
·
8.使用key 管理可复用的元素
使用v-if 对不同登陆方式进行切换时：

	<template v-if="loginType === 'username'">
	  <label>Username</label>
	  <input placeholder="Enter your username">
	</template>
	<template v-else>
	  <label>Email</label>
	  <input placeholder="Enter your email address">
	</template>

·
但是上面这种写法，标签都相同，只会改变input的placeholder,不会清楚已经输入的内容 (vue会尽可能高效的渲染内容,元素会被高效地复用)
·
如果想每次切换的时候，内容会清空，则需要加上 唯一的key值

	<template v-if="loginType === 'username'">
	  <label>Username</label>
	  <input placeholder="Enter your username" key="username">
	</template>
	<template v-else>
	  <label>Email</label>
	  <input placeholder="Enter your email address" key="Email">
	</template>

·
9.v-for 用于遍历一个数组，快速渲染 v-for时最好加上 key
·
（1）v-for=“item in array” 或 v-for=“item of array” 一个参数的写法
（2）v-for="(item,index) in array" 或 v-for="(item,index) of array" 一个参数的写法
其中，item 就是数组每一项的别名，index是数组的下标 ，arry 是数组

	<div v-for="(item,index) in array"  :key="index">{{item}}</div>

组件上也可以使用v-for,==2.2.0+ 的版本==里，当在组件上使用 v-for 时，==key== 现在是必须的

·
10.v-for 与 v-if
·
v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。（所以不推荐一起使用）

当你只想为部分项渲染节点时，这种优先级的机制会十分有用

	<div v-for="(item,index) in array"  :key="index" v-if="item.isShow">{{item}}{</div>

·
11.v-if 与 v-show

• v-if 切换开销较大，不适合频繁切换，会销毁和重建组件
• v-show 相当于 display 切换