smellsummer的博客

①插值语法：{{ }} 可以获取数据状态值，也可以写一些简单的表达式，如果对象里数据状态值改变，那么插值处的内容都会更新。①V-on 绑定事件监听，可简写为@，经过v-on绑定的属性可以直接执行js代码,也可以去vue中。③在id为root元素中，使用模板作为展示的内容，也就是把模板放到id为root元素中。// v-bind指令作用，标签上某个属性绑定内容时使用，而插值语法是标签内部绑定内容。// 创建实例，定义组件，最后将实例挂载在root节点下。// ①创建一个Vue的实例，实例的名字是app。

/</// createApp表示创建一个Vue应用，存储到app变量中// 传入的参数表示应用最外层的组件应该如何展示// vue面向对象编程参考了mvvm设计模式，m->moddle数据，v->view 视图，vm->viewModel 视图数据连接层constcreateAppdatareturnmessage'hello'template;// vm代表的就是vue应用的根组件constmount'#root';</

存储vue实例或者组件里面的数值等价于等价于。

简写为如：简写为constcreateAppdatareturnmessage'hello'template<div内容</div>;</实现效果：给div添加了一个name属性，属性值为data中message的值。

字符串形式对象形式数组形式.redcolor;.bluecolor;</</</</</constcreateAppdatareturn// ①字符串形式'red'// ②对象形式redfalsegreentrue// ③数组形式classArray'red''green'bluetruetemplate;</实现效果：通过控制台修改数据，颜色发生变化。

新增

按钮</button>

/ 修饰符 lazy, number, trimconstcreateAppdatareturnmessage'hello'template;

/包了一层 template : ` <counter /> ` });data() {return {const//包了一层 template : ` <counter /> ` });data() {return {//包了一层 template : ` <counter /> ` });data() {return {createApp//包了一层 template : ` <counter /> ` });

运行结果：①父组件调用子组件的标签，通过标签上的属性向子组件传递值②子组件通过props接收属性值之后，可以在模板中直接使用从父组件中接收过来的数据了运行结果：父组件调用子组件的标签，通过标签上的属性向子组件传递值(其中：将属性内容定义在data数据项中，通过v-bind指令传递)运行结果：type：String，Boolean，Array，Object，Function，Symbol运行结果:2. Function类型校验必填校验required 必填若父组件未向子组件传递cont

/v-bind="params 等同于上一行代码constcreateAppdatareturnparamscontent1234a123b456c789template;

counter内容</div><div :style="$attrs.style">counter内容</div><div :style="$attrs.style">counter内容</div><div v-bind="$attrs">counter内容</div><div v-bind="$attrs">counter内容

子组件向外触发add事件时带了参数2，父组件监add事件就可以获取参数。若想更换接收参数名字，可在v-model后加冒号设置别名接收。例如一：在父组件完成计算部分。例如二：在子组件完成计算部分。对对象向外触发的参数进行校验。② 向外触发事件的名字是。属性为对象形式：可通过。① 接收的参数名字是。

/当不传递修饰符时，默认给modelModifiers一个空对象；当传内容时，uppercase就会放到对象里面，显示为{uppercase: true}

定义插槽（子组件的模板中定义）：其中子组件的插槽中内容也会展示< slot > 子组件插槽中的默认内容 < / slot >< child > 其中的内容全部替换到子组件的插槽中 < / child >< slot ：name : "name" > 子组件插槽中的默认内容 < / slot >message } } < / div > < / template > < / child > //可简写为 < child > < template #name > < div > {

切换

只显示一次值在页面上，之后若是动态修改值也不会进行渲染。(实际值进行了修改)</</constcreateAppdatareturncount1template{{count}}</div>;</

/ app:指的是vue实例 options：使用插件时，额外传入的参数 const mtPlugin = {consol . log(app , options) } } //或者使用箭头函数 const validatorPlugin =(app , options) => {

composition API（组合式API）特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便；经过reactive函数处理之后返回的对象，如果给这个对象解构或者展开，会让数据丢失响应式的能力，为了解决这个问题需要引入toRefs函数，保证该对象展开的每个属性都是响应式的。给从响应式对象中解构出的属性添加响应式，并与原响应式对象保持链，修改解构出的属性，原响应式对象也会被修改。

在setup函数中使用计算属性函数，根据现有响应式数据经过一定的计算得到全新的数据。接收一个getter函数，并为getter函数返回的值，返回一个不变的ref对象。接收一个具有get和set的对象，返回一个可变的（可读写）ref对象。显示指定依赖源，依赖源更新时执行回调函数。配置immediate属性未true。，依赖源更新时候重新执行自身。

卸载老脚手架：在窗口中输入（该步骤可略过)安装脚手架：在窗口中输入安装vue脚手架工具npm install -g @vue/cli@4.5.9 安装4.5.9版本脚手架工具（安装特定版本脚手架）创建项目目录：在窗口中输入 vue create demo（其中demo为项目名称）桌面就有了一个demo目录，切换至项目的目录中后，启动项目npm可通过链接访问项目也可在vs-code启动。

mutations感知到提交的change改变，执行mutations下的change方法改变数据。store感知到change这个action，执行store中actiona下的change方法。2. mutations感知到，change方法改变数据。组件中commit提交一个叫做change的数据改变；VueX创建一个全局唯一的仓库，用来存放全局的数据。commit提交一个叫做change的数据改变。举例2：修改全局数据（异步修改）举例2：修改全局数据（同步修改）举例1：创建全局数据并引用。