Vue笔记 | WWD’s Blog

Vue应用：

在一个Vue项目中，有且只有一个Vue的实例对象（在下面中App为根组件，其他的组件将作为其子组件），需要挂载应用（"#app" 为index.html中的一个id=”app”的容器）浏览器可执行文件：HTML、CSS、JS、Image（Vue使用的是vite构建工具，最终会打包到main.js中，最后一起执行该文件）

src/assets中存放资源文件

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用v-bind指令，如此可以动态地绑定值

因为 v-bind 非常常用，我们提供了特定的简写语法——直接改成:
动态绑定多个值

条件渲染

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销（不管真假都要渲染）。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名（可以用in也可以用of）

还可以如此接收数组下标、键的名称

通过key管理状态：使得渲染时节省一些内存消耗（Vue默认按照就地更新的策略通过v-for渲染，确保它们在原本指定的索引位置上渲染）所以会常用key

事件处理：

可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。
内联数据处理器、方法事件处理器

事件参数：同时传递参数和$event

事件修饰符：关注数据逻辑，不用处理DOM（常用阻止默认事件.prevent、阻止默认事件冒泡【触发子元素时父元素也被触发了】.stop）https://cn.vuejs.org/guide/essentials/event-handling.html

数组变化侦听

变更方法：push()等直接对原数组进行变更（会改变UI）
替换方法：filter(),concat(),slice()不会更改原数组，总是返回一个新数组，要实现自动更新UI则需要使用赋值的方法

计算属性：computed不在模板中写太多逻辑，使用计算属性来描述依赖响应式状态的复杂逻辑（不需要再加括号），计算属性只用计算一次，方法method也可以但其需要加括号，但需要计算多次

class绑定：对class后的”“做了增强，既可以是数组，也可以是对象（true/fasle），也可以是字符串

style绑定：与上面的class绑定相同，对象是对象的值

侦听器watch：监听页面的响应式数据变化，数据发生变化自动执行的函数（message是数据名）

表单输入绑定：v-model直接连接值绑定和更改事件监听器，它可以让你在表单元素上创建双向数据绑定，数据的改变会影响到视图的显示，视图的变化也会影响到数据。（for属性用于指定此标签与哪个表单控件相关联，其值应为相关控件的ID。）

修饰符：.lazy不再输入时才更新数据（不实时响应）、.number只要数据类型、.trim去掉前后空格

组件

组件的作用：可复用性；包含template、script、style
步骤：引入组件 → 注入组件 → 显示组件(标签形式)

使用scoped可以使得该style中的标签只在这个组件中有效

组件的嵌套关系：可以随意嵌套，采用”引入组件 → 注入组件 → 显示组件“的方式，在任意组件中实现功能，可以多次引用
组件的注册方式：全局注册、局部注册

全局注册：在main.js中操作，注册完之后使用，就不用“引入组件、显示组件”了【不建议：①有可能其并没有被用到，打包无意义 ②在大项目中依赖关系不明确，不太容易定位子组件】

组件传递数据：props，只能父亲传给儿子，任何数据类型都可以传递（在父类data里写好就行，数据要用v-bind来绑定）

校验type：输入错误则会在控制台警告默认值default：给出默认值（数组、对象必须通过工厂函数返回默认值）必选项reqiured：不传则警告

props是只读的
也可以使用传递函数Function的方式，对父进行修改

组件事件：$emit触发自定义事件，目的是可以在组件之间传递数据，主要用于子传父

组件事件配合v-model：v-model绑定事件，在子中监听事件（watch），当出现修改时，会向父发送信号，从而对父进行修改

组件的生命周期 https://cn.vuejs.org/api/options-lifecycle.html

生命周期函数

创建期

beforeCreate
created

挂载期（渲染）

beforeMounte
mounted

更新期

beforeUpdate
updated

销毁期

beforeUnmount
unmounted

生命周期的应用：不同节点做不同事情

通过ref获得DOM结构：渲染完成之后（mounted及之后）才有
模拟网络请求渲染数据：主页初始化之后就行，一般是渲染完成之后

动态组件：来回切换组件操作

<component> </component> 赋值时一定是以字符串的形式赋值

组件保持存活：可以使用<keep-alive></keep-alive>包裹<component>使得组件没有被卸载，仍然存活（再次出现的值与上次的值相同，不是默认值）

异步组件：同步是功能顺序运行（加载时组件都加载出来才能运行），异步的功能是同时进行（用到哪个组件再加载对应组件）defineAsyncComponent方法实现此功能，在浏览器的network可以看到

透传属性（了解即可）：当一个组件以单个元素作渲染时，透传等等attribute（class的值）会自动被添加到根元素上

插槽：传递视图结构

slot：插槽出口，标示了父元素在哪里被渲染

渲染作用域：插槽内容可以访问到父组件的作用域（插槽中的内容是在父模板中定义的）
插槽默认值：在slot里面输入即可
具名插槽：可以分开插入。在父在插槽中新建template，template有v-slot:"sname"来指定插槽内容的名字(可以用#来替代v-slot:)；在子中的slot中有name="snam"来调用相应的插槽
插槽中的数据传递：插槽中的内容可能也会需要用到子组件中的数据（不全是父的）：先从子传给父元素（在slot中用props的方式传递），再在父元素的插槽中调用（父元素在插槽名称中定义v-slot="sname"，在插槽中用sname.元素名称的方式调用即可）