vue的一些基础回顾

一、 vue的基础用法

v-if :是否插入元素 (用的相对较少)
v-show :是否隐藏元素

二、父子组件传值(父传子)

  • 1.父传子的时候通过属性传递
  • 2.子要声明props:["属性名"]来接收
  • 3.收到就是自己的了,随便你用
    。在template中 直接用
    。在js中 this.属性名 用

总结:父传子 --父传子(属性),子声明(收),子直接用

三、注册全局组件

  • 全局API Vue.component("组件名",组件对象);

四、附加功能:过滤器&监视改动

1.filter || filters

。filter为全局过滤器(给数据添油加醋显示)vue.filter("过滤器名,过滤方式fn")
。组件内的过滤器 filters:{"过滤器名",过滤方式fn}

示例一:filters的使用 ---- 示例二:filters对象的方法里面可以传很多参数的使用

2.监视的使用
  • watch监视单个
  • computed监视多个
    computed:{监视的业务名:function(){ return 显示一些内容 }}
    使用:{{ 计算属性的名称 }}

[watch简单例子1:] (https://upload-images.jianshu.io/upload_images/8496278-e961ee2d18f30d86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
watch监视复杂类型的例子2:图1-----图2深度监视
computed使用的例子:图.png

总结:

  • 当组件/过滤器为全局:大家直接用 全局不带s
  • 过滤器:function(原始数据,参数1,参数2){ return 结果;}
    。调用{{ '数据' | 过滤器名(参数1,参数2) }}
    -监视
    。watch 单个监视
    。computed 群体监视

五、slot的使用

  • 内置的组件
  • slot就是子组件里给DOM留下的坑 外部填入html内容
  • <子组件>DOM</子组件>
  • slot动态的DOM、props是动态的数据
    例子1图片

总结
- slot其实就是父组件传递的DOM结构
- vue提供的内置组件<slot></slot>

六、组件的生命周期

  • beforeCreate

组件创建之前,这里不能操作数据,只是初始化了事件等

  • created

组件创建之后,可以操作数据、并且实现vue->页面的影响。应用:发起ajax请求。

  • beforeMount

vue起作用,装载数据到DOM之前 只执行一次 即new Vue 发生装载 替换<div id="app">之前

  • mounted

vue起作用,装载数据到DOM之后(就是vue作用以后的DOM )只执行一次 注:此处才能使用this.refs.'xxxx'的dom元素。

  • beforeUpdate

基于数据改变 影响页面 数据更新前

  • updated

基于数据改变 影响页面 数据更新后

  • activated

结合kepp-alive使用 组件被激活了

  • deactivated

结合kepp-alive使用 组件被停用了

  • beforeDestroy

销毁之前 对应父组件v-if false (在父组件利用变量使子组件消失和出现 只能和v-if配套使用) 就销毁当前组件
//销毁,最终都是做一些其他功能的释放,比如:保存到localStorage、重置数据等功能

  • destroyed

销毁之后
//销毁,最终都是做一些其他功能的释放,比如:保存到localStorage、重置数据等功能

  • 总结

1.created 和 actived 都是v-if=“true” 子组件的状态
2.created没有被keep-alive内置组件包裹,actived被包裹了。
销毁和停用同上

七、获取DOM元素

  • 救命稻草,document.querySelector
  • 1:在template中标识元素 ref="xxxx"
  • 2:在要获取的时候,this.$refs.xxxx获取元素
    。创建组件,装载DOM,用户点击按钮
  • ref在DOM上获取的是原生DOM对象
  • ref在组件上获取的是组件对象
    。$el是拿其DOM
    。这个对象就相当于我们平时玩的this,也可以直接调用函数
  • 总结
// $属性:$refs 获取组件内的元素,
// $parent: 获取当前组件对象的父组件
// $root : 获取new Vue的实例
// $el: 组件对象的DOM元素
一个小例子:
[01$ref获取不到dom的情况.jpg] (https://upload-images.jianshu.io/upload_images/8496278-6fe2debdfefcd87f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[02vue操作dom的细节点.jpg](https://upload-images.jianshu.io/upload_images/8496278-5f8870157287a452.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[03解决$ref获取不到dom的情况.jpg](https://upload-images.jianshu.io/upload_images/8496278-82acb8d4cc9153bb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

八、路由

1.路由原理
- 传统开发方式 url改变后立刻发起请求,响应整个页面,渲染整个页面
- SPA锚点值改变后不会发起请求,发起ajax请求,局部改变页面数据
    。页面不跳转,用户体验更好。
 注:SPA是什么?
    - single page application(单页面应用程序)
    - 前端路由
      。锚点值监视
      。ajax获取动态数据
      。核心点是锚点值
    - 前端框架Vue/angular/react都很适合开发单页应用
#demo1
<script>
      // hashchange事件..  url上的部分锚点数据(#xxx)改变. 可以获取到这个事件
      window.addEventListener('hashchange',function(){
                  console.log(location.hash)
        });
</script>
[01路由的核心.jpg](https://upload-images.jianshu.io/upload_images/8496278-d71e97ed36b01c51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.命名路由
- 1.给路由对象一个名称 { name:'home',path:'/home',component:Home }
- 2.在router-link的to属性中描述这个规则
    。<router-link :to="{'name':'home'}"></router-link>
    。通过名称找路由对象,获取其path。生成自己的href

 - 大大降低维护成本,锚点值改变只用在main.js中改变path属性即可
#demo2 router-link的使用
[01.router-link的使用.jpg](https://upload-images.jianshu.io/upload_images/8496278-67ca385c57ce3147.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • 总结

总结.png

3.query与params
  - $route 路由信息对象,只读对象
  - $router 路由操作对象,只写对象

query与params.jpg
query与params使用总结.jpg

4.嵌套路由
嵌套路由的概念.png
  • 知识点介绍
>1.路由meta元数据->meta是对于路由规则是否需要验证权限的配置
   。路由对象中和name属性同级{ meta:{ isChecked:true } }

>2.路由钩子 ->权限控制的函数执行时
  。每次路由匹配后,渲染组件到router-view之前
  。router.beforeEach( function(to,from,next) {   } )
4.编程式导航

-1:跳到指定的锚点,并显示页面this.$router.push({ name:'xxx',query:{id:1} }) 或者this.$router.push({ name:'xxx',params:{name:'abc'} })
-2:配置规则{name:'xxx' ,path:'/xxx/:name'}
-3:根据历史记录,前进或后退this.$router.go(-1)或this.$router.go(1) 1:代表进一步,-1代表退一步

九、axios

axios相关文档链接

1.拦截器

十、webpack

1.webpack打包模块的源码
  • 1:把所有模块的代码放入到函数中,用一个数组保存起来。
  • 2:根据require时传入的数组索引,能知道需要哪一段代码。
  • 3:从数组中,根据索引取出包含我们代码的函数。
  • 4:执行该函数,传入一个对象module.exports
  • 5:我们的代码,按照约定,正好是用module.exports='xxxx'进行赋值。
  • 6:调用函数结束后,module.exports从原来的空对象,就有值了。
  • 7:最终return module.exports作为require函数的返回值

十一、vue项目目录

十二、vue的实际项目运用的知识点

十三、vuex的知识点

  • State 描述状态即保存数据
  • Getter 获取数据,定义变量的存取
  • Mutation 修改数据,发生变化 只能是同步代码
  • Action 在行为中可以存着异步操作(或向后台发送请求),但是最终还是通知mutations
  • Module

1.1vuex使用步骤-没有使用actions.png
1.2vuex的取值和改变值-没有使用actions.png
2.1vuex使用actions解决需要在更改数据前的异步.png
2.2使用actionsvuex的取值和改变值.png
3.Module的使用.png

十四、hash模式与history模式

十五、骨架屏

1、npm i -g lavas
2、lavas init
3、选择包含app_shell 也包含了骨架屏的功能

十六、细节点

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

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,044评论 0 29
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,365评论 0 11
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,521评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 10,978评论 4 129
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,185评论 0 25