vue 脚手架新手入门（vue cli 3）

港控/mmm° 2023-10-15 17:36 1阅读 0赞

#### 文章目录 ####

*   *  1、vue中的 “:” 绑定和 “@” 监听
     *   *  1.1、v-model 双向绑定
     *  2、if 、else 、for
     *  3、computed 计算属性
     *  4、生命周期（属性加载顺序）
     *  5、watch 侦听器
     *  6、 components 组件
     *   *  6.1、props 从父组件获取收据
         *  6.2、emits 向父组件触发事件
         *  6.3、slots插槽， 将模板片段传递给子组件

![在这里插入图片描述][5379f7c7eb1f4449bd0f799d206f301a.png_pic_center]

### 1、vue中的 “:” 绑定和 “@” 监听 ###

*  “:” 是指令 “v-bind”的缩写。用来绑定数据
 *  @”是指令“v-on”的缩写。用来监听，并调用方法

下面是绑定class属性的数值。  
![在这里插入图片描述][33e04cb7b02e4bc1b06586f458781144.png]  
监听点击动作  
![在这里插入图片描述][e7d4aa4eb8e0412ba1bd14decb96b272.png]

#### 1.1、v-model 双向绑定 ####

双向绑定  
![在这里插入图片描述][b421e64bd6824432a7ea3ca8c664bc83.png]  
上面的操作等于

v-model 会将被绑定的值与 的值自动同步，这样我们就不必再使用事件处理函数了。  
v-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。

完整示例

### 2、if 、else 、for ###

if、else

三元表达式

for

### 3、computed 计算属性 ###

计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。  
![在这里插入图片描述][f804434d38674beb9e1ecd87596784c3.png]

### 4、生命周期（属性加载顺序） ###

![请添加图片描述][219b634135174bcdb534f97bf1b8359a.png]

### 5、watch 侦听器 ###

watch 用来侦听 某个值的变化，发生变化后会执行watch 中的方法。  
如下点击按钮后，todoId1会自增1，触发watch 中的同名方法todoId1()执行

### 6、 components 组件 ###

在 components 选项中，添加一个子组件

#### 6.1、props 从父组件获取收据 ####

父组件

子组件ChildComp.vue

#### 6.2、emits 向父组件触发事件 ####

![在这里插入图片描述][36555138d4364004a10e62a6790dd59c.png]

#### 6.3、slots插槽， 将模板片段传递给子组件 ####

![在这里插入图片描述][1223e918b11d4edaae10454a8b24489f.png]

![在这里插入图片描述][b762b59ef8b44189b6b551375148c333.png]

[5379f7c7eb1f4449bd0f799d206f301a.png_pic_center]: https://img-blog.csdnimg.cn/5379f7c7eb1f4449bd0f799d206f301a.png#pic_center
[33e04cb7b02e4bc1b06586f458781144.png]: https://img-blog.csdnimg.cn/33e04cb7b02e4bc1b06586f458781144.png
[e7d4aa4eb8e0412ba1bd14decb96b272.png]: https://img-blog.csdnimg.cn/e7d4aa4eb8e0412ba1bd14decb96b272.png
[b421e64bd6824432a7ea3ca8c664bc83.png]: https://img-blog.csdnimg.cn/b421e64bd6824432a7ea3ca8c664bc83.png
[f804434d38674beb9e1ecd87596784c3.png]: https://img-blog.csdnimg.cn/f804434d38674beb9e1ecd87596784c3.png
[219b634135174bcdb534f97bf1b8359a.png]: https://img-blog.csdnimg.cn/219b634135174bcdb534f97bf1b8359a.png
[36555138d4364004a10e62a6790dd59c.png]: https://img-blog.csdnimg.cn/36555138d4364004a10e62a6790dd59c.png
[1223e918b11d4edaae10454a8b24489f.png]: https://img-blog.csdnimg.cn/1223e918b11d4edaae10454a8b24489f.png
[b762b59ef8b44189b6b551375148c333.png]: https://img-blog.csdnimg.cn/b762b59ef8b44189b6b551375148c333.png