Vue小笔记

官网中文手册

常用命令

vue标签大杂烩

• v-if：条件渲染
• v-else: 如果为 false, 当前标签才会输出到页面
• v-show : 通过控制 display 样式来控制显示/隐藏
• v-for： 列表渲染
• v-on： 事件监听。
  • v-on：= @。事件修饰符：
  • 鼠标事件：.stop、.prevent、.self、.capture、.once、.passive
  • 键盘事件：.enter、.tab、.delete (捕获“Delete”和“Backspace”两个按键)、.esc、.space、.up、.down、.left、.right
• v-bind: 单行绑定，会当成vue.js来执行。
  • v-bind: = :。v-bind:href=“newHref” == :href=“newHref”
• v-model: 表单类元素绑定，得有默认的value值，双向数据绑定
• v-text : 更新元素的 textContent
• v-html : 更新元素的 innerHTML
• v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
• onMounted()：生命周期钩子函数
• watch()：异步监听函数
• watchEffect()
• ref: 模版引用

散碎知识点

• reactive():函数接收一个复杂数据类型的数据（对象或数组）作为参数，并返回一个响应式代理对象。（响应式数据即当数据发生变化时 UI 也会自动更新）
• ref():函数接收一个基本数据类型的参数同时返回一个基于该值的响应性对象，该对象内部有且仅有一个属性 value，该对象中的值一旦被改变和访问就会被跟踪到，通过修改 refData.value 的值，可以触发模版的重新的渲染，显示最新的值。reactive 则是修改 state.reactiveField 的值。
• 如果不使用 <script setup>，需确保从 setup() 返回return ref：
• 列表渲染：<span v-for="n in 10">{{ n }}</span> #注意此处 n 的初值是从 1 开始而非 0。
• => 箭头函数，没有自己的this，一般返回上级对象。vue所管理的函数一定不要写箭头函数，没有this不会被vue接管
• MVVM：model（js数据）、view（页面模版）、viewMode（vue连接读取处理映射）
• js中的方法Object.defineProperty设置对象中指定key的值。自带set:function(){}，setter方法和getter方法，实现数据代理。

• function:下的函数没有数据代理，只会对data: 的数据进行数据代理/数据劫持
• 事件对象event：event.target.innerText、event.preventDefault()阻止默认事件、event.cancelBubble()阻止事件冒泡
• 除了重命名的键盘事件外，如何使用其他键盘：输出键盘事件event的所有key，选择合适的key，大写字母改成小写，不同单词间用-连接。
• @keyup.ctrl.y= ：键盘输入后点击ctrl和y后才会触发。
• js的字符串截取。str.slice(0,3) 截取0、1、2，前三个
• computed计算属性：要用的属性不存在，要通过已有的属性计算的来。底层借助了Object.defineProperty的setter和getter方法。get初始化时会调一次；相关变量更改也会同步更新，有缓存机制，比method高级。内的this，直接指向的是vue的实例化vm，不能使用箭头函数声明，this会指向上级windows对象。
• @οnclick=“” 里可以写简单的js语句
• vue2的声明对象的配置项：el:{}、data:{} 、computed:{}、methods:{}、watch:{}
• watch下的监视的对象自带回调函数handler(newValue, oldValue)方法。第二种方法vm.$watch(‘value’,{配置})
• watch下的多级监视，配置项添加deep:true
• computed计算属性下不能开启异步函数，比如setTimeout()，return被包含里面了，外部computed就没有返回了。watch监视属性可以开启异步函数，比如setTimeout()
• vue的响应式原理：声明data自动生成set和get