Vue 学习笔记1（《Vue.js 项目实战》个人学习记录）

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标签做转义