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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容