前端基础 - Vue 计算属性,侦听器,过滤器,组件化,生命周期钩子函数

计算属性（根据数据变动，动态算出结果）：

效果图：

侦听器(每次数据变动时候监听数据的前后变化)：

效果图：

应用场景：监听数据上限，如果超过上限，则将数据值为最大值。

过滤器：常用来处理文本可是化的操作，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式


这个1,0 是从数据库中取出来的，代表着男，女。但是只是数据库中的数据，要把它转换成“男，女”
可以在插值表达式中用三元运算符：

如果在复杂场景，这样是不行的，这时就要用到过滤器:

这个过滤器是写在Vue 对象里面的，成为局部过滤器。也可以写一个全局过滤器：

组件化：

效果和Vue 对象绑定的元素是一样的。


声明一个局部变量组件：


效果图：

生命周期：

测试生命周期钩子函数代码：

使用Vue 脚手架进行模板化开发

最终生成了vue 项目文件：
整体结构:

build 文件夹: 与打包工具webpack 有关的代码。
config 文件夹: 配置信息，主要有端口配置…
package.json: npm 依赖包的信息，每安装一个依赖，都会在该文件出现相关的信息。
package-lock.json: 依赖包的详细信息
src 文件夹: 编写代码文件夹，所有写的功能都集中在src 文件夹下。所以开发期间只关注src 文件夹。这个文件夹下有一个非常重要的文件: main.js。这个就是主程序，

里面有一个Vue 实例，就是用来挂载index.html 的id=“app” 的div 的。

index.html: (主入口页面 )首页相关内容。

router: 页面跳转规则(url)，这些规则被封装在router 的index.js 中

components ：包含的都是一个个组件。图片显示一个组件从App.vue 文件中进行引入。一个.vue 文件都称为一个vue 的单文件组件
一个vue 组件的基本组成：

template: 页面模板。
script: vue 的写法
style: 样式

当访问路径是"localhost:端口号:/" 的时候，就访问name 为Helloworld 的组件，这个组件从src/components/Helloworld 中获取。
注意：要使用Vue 的路由功能和Vue 功能都要导入一下两个组件：

自己写的一个vue 组件

在index.js 中引入该组件

效果图：

当访问"/Hello" 的时候，就会来到自己写的Hello.vue 中.
为什么上面的logo不会消失呢？

是因为这个路由视图在起作用。

可以利用vue 提供的跳转标签，进行页面之间跳转。