Vue 学习笔记
1. Hello word
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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 把标签内部的元素原位输出
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!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 也会自动尝试帮你做映射。
微信扫描下方的二维码阅读本文
