1.生命周期钩子
- beforeCreate：在Vue实例被创建时、完成其他事项前调用
- created：在实例准备就绪之后调用。此时实例未被挂载到DOM中
- beforeMount：在挂载（添加）实例到Web页面之前调用
- mounted：当实例被挂载到页面并且DOM可见时调用
- beforeUpdate：当实例需要更新时（一般是当某个数据或计算属性发生改变时）
- updated：在把数据变化应用到模板之后调用。注意此时DOM可能还没有更新
- beforDestroy：在实例销毁之前调用
- destroyed：在实例完全销毁之后调用
2.computed计算属性
特征如下：
- 它的值基于它的依赖进行缓存，因此如果没有必要是不会重新运行函数的，从而有效防止无用的计算
- 当函数中用到的某个属性发生了改变，计算属性的值会根据需要自动更新
- 计算属性可以如其他普通属性一样使用（可以在其他的计算属性中使用计算属性）
- 计算属性只用真正应用于应用中时，才会进行计算操作
3.watch监视属性
watch是一个字典，把被侦听属性名字作为key，把侦听选项对象作为val。这个对象必须有一个handler属性，该属性可以是一个函数，也可以是一个方法的名字，接收参数：被监听的属性的新值和旧值。
watch:{
content:{
handler(val,oldVal){
console.log('new:', val, 'old:', oldVal);
},
},
},
//简写
watch:{
content(val, oldVal){
console.log('new:', val, 'old:', oldVal);
},
},
deep:
一个布尔类型，告诉Vue以递归的方式侦听嵌套对象内部值的变化。（针对对象）
immediate
会立即调用狐狸函数，而不用等到属性第一次变化时才调用，比如刷新就会调用一次
4.动态css类
利用v-bind可以简化对CSS类的操作。可以给这个指令传入一个字符串数组，而不是一个字符串
<div :class="['one', 'two', 'three']">
还可以传入一个键是类名、值时布尔类型的对象，布尔值决定是否把每个类应用到元素中。
<div :class="{ one: true, two: false, three: true }">
5.缓存
localStorage.setItem()
参数1：字符串表示的要存储的类名，参数2：存储的字符串
localStorage.getItem
参数：字符串表示的要获得的类名
存储对象或者数组时
JSON.stringify 把对象转换为JSON字符串
JSON.parse
JSON.parse(text[, reviver])
text：要转换的字符串，reviver：一个转换函数，为对象每个成员调用这个函数
6.通知
三种通知框都是window的方法，使用时window可以忽略
alert(”sometext“)，警示框只有确认
confirm(“sometext”)，有确认和取消两个选项，返回值是对应的true和false
prompt("sometext","defaultvalue"); 当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
7.Icons
收藏的按钮icon实现
<button><i class="icons">{{ selectedNote.favorite ? 'star' : 'star_border' }}</i></button>
8.排序
sort
接受一个参数0的话就是相等，正数：第一个参数在第二个参数后面，负数：第一个参数在第二个参数前面
- sort会直接修改原数组，会触发监听器
采用slice，直接创建新的副本，示例代码
this.notes.slice().sort((a,b) => a - b)
9.时间
库momentjs对日期进行格式化
moment(time).format('DD/MM/YY, HH:mm')
过滤器
在Vue实例之外创建
Vue.filter('name', time => moment..)
使用方式：变量加上管道操作符加上过滤器名字
{{ someDate | name }}
10.文本统计
split将字符串分割成字符串数组
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
linesCount(){
return content.split(/\r\n|\r|\n/).length;
}
wordsCount(){
var s = content;
s = s.replace(/\n/g, ' ');//换行符换为空格
s = s.replace(/(^\s*)|\s*$)/gi, '');//排除开头和结尾的空格
s = s.relpace(/\s\s+/gi, ' ');//将多个重复空格转换为一个
return s.split(' ').length;//返回空格数量
}
charactersCount(){
return content.split('').length
}
11.XSS攻击
恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的
不建议使用v-html对于用户提供的内容做HTML插值，因为用户可能会
应对方式（其一）：对HTML标签做转义
