【vue篇】 第三话--vue基础入门2

---

• 🤱作者简介：大家好！我是陪我吹吹海風吧。
• 📁喜欢：点赞收藏！持续更新vue2.0/3.0
• ✊加油，共勉！

✍ 一、侦听器

📍1.watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
📍2.默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用immediate 选项 。
📍3.如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到,此时需要使用 deep 选项。

✍二、计算属性

📍1.计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
📍2.计算属性的特点:① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
                                ② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

✍三、vue-cli

📍1.vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程
📍2.中文官网：https://cli.vuejs.org/zh/

1.安装和使用

①vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：npm install -g @vue/cli
②基于 vue-cli 快速生成工程化的 Vue 项目：
vue create 项目的名称

2.vue项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

✍四、vue 组件

📍1.组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

每个 .vue 组件都由 3 部分构成，分别是：
 template -> 组件的模板结构
 script -> 组件的 JavaScript 行为
 style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

1.template

vue 规定：每个组件对应的模板结构，需要定义到 template节点中。

注意： template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
 template 中只能包含唯一的根节点

2.script

vue 规定：开发者可以在 script节点中封装组件的 JavaScript 业务逻辑。

3.style

vue 规定：组件内的 style节点是可选的，开发者可以在 style 节点中编写样式美化当前组件的 UI 结构。

style标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式：

4.使用组件的步骤

步骤1：使用 import 语法导入需要的组件

步骤2：使用 components 节点注册组件

步骤3：以标签形式使用刚才注册的组件

通过 components 注册的是私有子组件

注册全局组件
在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。

组件的 props
props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
在声明自定义属性时，可以通过 default 来定义属性的默认值。
在声明自定义属性时，可以通过 type 来定义属性的值类型。
在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。