2.1过滤器
(目前3.0已不支持使用2.0可以继续使用)
作用:常用于文本的格式化。可以用在:插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部,由管道符进行调用
示例:
注意点:
1.要定义到filters节点下,本质是一个函数
2.在过滤器中,一定要有return值
3.在过滤器的形参中,就可以获取到管道符前面待处理的那个值
2.2 私有过滤器和全局过滤器
定义到filters节点下的过滤器称为私有过滤器因为它只能在当前vm实例所控制的el区域内使用
如果希望在多个vue实例之间共享过滤器,则可以按照如下格式定义全局过滤器:
侦听器
watch侦听器允许开发者去监视数据的变化,从而针对数据的变化做特定的操作
语法格式:
侦听器的格式
1.方法格式侦听器
缺点1:无法在刚进入页面的时候,自动触发
缺点2:如果侦听的是一个对象,如果对象中的属性发生变化,不会触发侦听器
2.对象格式侦听器
好处1:可以通过immediate选项,让侦听器自动触发
好处2:可以通过deep选项,让侦听器深度监听对象中每个属性的变化
深度侦听
计算属性
计算属性是指通过一系列运算之后,最终得到的一个属性
这个动态计算出来的属性值可以被模板结构或methods方法使用
所有的计算属性都要定义到computed节点之下
计算属性在定义的时候,要定义成“方法格式”
好处:
1.实现了代码复用
2.只要计算属性中依赖的数据源变化了,计算属性就会自动重新求值
axios:是前端最火的、专注于数据请求的库
基本使用方式
1.发起get请求
解构赋值的时候,使用:进行重命名
调用axios之后,使用async/await进行简化
使用解构赋值,从axios封装到大对象中,把data属性结构出来
把结构出来的data属性,使用冒号进行重命名
vue-cil
1.是什么:vuejs开发的标准工具
2.作用:简化了程序员基于webpack创建工程的Vue项目的过程。程序员可以专注撰写应用,而不必去纠结webpack的配置
3.安装和使用
(1)输入命令npm i -g @vue/cli即可安装到自己的电脑上
(2)输入vue-V检测是否安装成功
(3)基于vue-cli快速生成工程化项目:
找到要生成的项目文件夹下输入命令vue create 项目名称
回车后看到已下界面我们上下箭头进行选择
选择好之后开始选择要安装的工具
前面带*号的代表已选择(按空格进行选择)
选择vue版本,这里选择vue2
选择css域处理器这里选择less
把Babel、ESlint等插件的配置项,放到自己独立的配置文件中
是否把刚才设置的选择创建为预设
创建完成!
vue项目中src目录的构成:
assets文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
components文件夹程序员封装的、可复用的组件,都要放到components目录下
main.js是 是项目入口。整个项目运行,要先执行main.js
App.vue是项目的根组件
4.vue项目的运行流程
在工程化的项目中,vue要做的事很单纯:通过main.js把App.vue渲染到index.html的指定区域中
vue组件
1.什么是组件开发
指的是根据封装的思想,把页面上可重复用到UI结构封装为组件,从而方便项目的开发和维护
2.vue组件的三个组成部分
template:组件的模板结构
script:组件的JavaScript行为
style:组件的样式
启用less语法: