Vue 学习笔记
1. Hello word
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>hello word</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
message: "hello world",
content: 1
}
},
mounted() {
setInterval(() => {
this.content++
}, 1000)
},
template: '<div>{{message}} {{content}}</div>'
}).mount('#root');
</script>
</html>2. 指令基本用法
v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容 （同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?"red":"blue"’ 3、数组型 ‘[{red:"isred"},{blue:"isblue"}]’
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>反转、显示/隐藏</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
message: "hello world",
show: true
}
},
methods: {
handleBtnClick1() {
this.message = this.message.split("").reverse().join("");
},
handleBtnClick2() {
this.show = !this.show;
},
},
template: `
<div>
<span v-if="show">{{message}}</span>
<button v-on:click="handleBtnClick1">反转</button>
<button v-on:click="handleBtnClick2">显示/隐藏</button>
</div>
`
}).mount('#root');
</script>
</html>3. 生命周期
4. 计算属性、侦听器
computed：当计算属性依赖的内容发生变更时，才会重新执行计算
methods：只要页面重新渲染，就会重新计算
watch：可以设置监听一个表达式或函数的结果变化，变化时执行回调函数，回调函数得到的参数为变化前后的新值和旧值，表达式支持单个变量和一个简单的属性访问路径，需要监听更复杂的表达式，需要使用函数取代。可以说 computed的底层实现是 watch。
computed和method都能实现的一个功能，建议使用computed，因为有缓存computed和 watcher 都能实现的功能，建议使用computed，因为更加简洁
5. v-if 和 v-show
v-if 隐藏的原理：需要隐藏时（v-if为false时）直接删除而不显示
v-show 隐藏则是在需要隐藏时（v-show为false时）给该标签添加"display:none"属性让其不显示
- 如果是频繁使用显示和隐藏操作，用
v-show比较好。不会频繁创建删除标签操作，性能好。 - 如果不是频繁操作以上两种方式都不错。
- 如果是有多层判断可使用
v-ifv-else-ifv-else
6. 更新组件数据
- 使用数组变更函数
- 直接替换数组
- 直接更新数组内容
- 直接添加对象的内容，也可以自动的展示出来
7. 事件修饰符
stop: 防止事件冒泡
prevent：取消默认事件
capture：捕获事件
self：只会触发自己范围内的事件，不会包含子元素
once：只执行一次的点击
passive：提早告诉，提高性能
8. 组件
组件是页面的一部分。
- 组件具有复用性，数据隔离。
- 局部组件：定义了，要注册之后才能使用，性能较高。定义名字建议大写字母开头，驼峰命名。
- 全局组件：定义了，就可以处处使用，性能不高，使用简单。定义名字建议小写字母单词，中间横杆连接。
- 局部组件使用时，要做一个名字和组件间的映射对象，不写映射，Vue 也会自动尝试帮你做映射。