Vue学习Day02

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语法:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • day01基础 官方网站地址:https://vuejs.org中文网站地址:https://cn.vuejs.o...
    Konlj阅读 2,823评论 0 1
  • Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念;打包工具 Webpack , Gu...
    cf6d95617c55阅读 1,826评论 0 0
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 9,022评论 0 6
  • Vue官方文档以下内容作为本人日常学习使用,不作为参考 一、Vue环境搭建以及vue-cli的使用 Vue多页面应...
    好一只帅卤蛋阅读 4,149评论 0 1
  • 第一章 Vue 初步认识 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端...
    黑夜里的那盏灯阅读 3,858评论 0 1