Vue
关注
分享
扫一扫
文章平均质量分 59
很小白的小白
励志成为前端架构师。
展开
-
Vue入门篇
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统响应式布局基础语法 双括号和指令{{ xxx}} ==>写在HTML标签中的变量(<div>{{foo}}</div>)双括号可以填写的内容有：变量。表达式。函数，三目运算（data中的数据，和）<div>{{foo()|| foo>0?2:3...原创 2018-09-25 14:06:22 · 213 阅读 · 0 评论 -
非父子组件之间的传值,发布订阅模式/观察者模式/总线机制/Bus
一个网页可以拆分成很多组件 ：可以构成父子组件和兄弟组件。如果我想实现1~3之间的数据传递，不得不经过2。那有没有直接让1~3进行数据传递了（给他们开出新通道）。又比如3~3之间传递数据。第一种：在Vue中有一个数据框架VueX第二种：发布订阅模式/观察者模式/总线机制主要来说第二种方式：总线机制。<div id="app"> <foo co...原创 2018-10-21 23:47:30 · 160 阅读 · 0 评论 -
组件细节
is：解决HTMLbug （tr这个标签是row标签）data问题：必须是一个函数。返回一个对象（子组件会被多次调用。不像主组件调用一次，）。每一个子组件都拥有独立的数据存储Vue操作dom：给标签添加ref=‘’ 属性...原创 2018-10-21 23:45:13 · 135 阅读 · 0 评论 -
vue之vuex(数据层)入门了解
在一般的开发中vue一般承担视图层的开发内容。当我们遇到大量数据之间传递的时候，往往我们需要一个数据框架进行辅助这个就是vuex了（官网文档学习）设计理念：状态管理库（创建一个公共的响应式数据存储仓库）一张图带你学习vuex数据的获取数据都存放在state中。组件可以直接调用state中的数据数据的改变：（数据不能通过组件去直接改变，需要走一个流程（单项数据流））分...原创 2018-10-10 16:22:08 · 819 阅读 · 0 评论 -
vue之组件名的几个用处
做自身递归对某个页面取消缓存。浏览器中的vue开发工具（会显示组件名字）细节文章：https://blog.youkuaiyun.com/Uookic/article/details/80420472转载 2018-10-20 12:16:02 · 704 阅读 · 0 评论 -
vue之生命周期函数入门了解
以下是一个vue实例的整个生命周期：红色圆角都是对应的生命周期钩子图来自官方： 对应的生命周期参考资源来自：https://segmentfault.com/a/1190000008010666 https://segmentfault.com/a/1190000008010666<!DOCTYPE html>...原创 2018-10-25 22:04:44 · 127 阅读 · 0 评论 -
vue性能优化之keep-alive
路由被切换的时候会重新发送ajax请求。mounted钩子函数会被重新执行vue自带标签 kepp-alvie keep-alvie ：路由内容加载一次后，就把路由内容放在内存中（相当于cookie），下次加载的时候就不用发送ajax请求了当我们需要重新发送ajax请求时 当我们使用keep-alvie 时候 组件会多一个钩子函数 activaedactivaed（）...原创 2018-10-21 23:44:06 · 1271 阅读 · 0 评论 -
理解vue原理以及实现流程
从 jquery 的操作 dom 到 vue，react等框架的vdom实现，大大减少了dom的操作，提高性能。前端的刀耕火种，到现在的模块化，前端的内容每天都在发生着变化，每天都有着进步。前端的发展中我们绕不过一个坎，那就是jquery，接下来我们会对比jquery和现在框架，来发现这些年前端取得的进步。jquery与框架的区别：jquery的本质还是操作dom，在处理dom的时候，也会...原创 2018-12-14 14:25:45 · 1393 阅读 · 1 评论 -
vue项目代码结构
最外层文件：README.md ————> 说明文件package.json ————>依赖文件存储地package-lock.json ————>依赖的版本LICENSE ————>开源协议说明index.heml ————>项目首页的默认文件（深入）postcssrc.js ————>postcss的配置项。gitigno...原创 2018-10-05 16:10:51 · 1180 阅读 · 0 评论 -
多页面应用和单页面应用
多页面应用：页面跳转——>返回html（发送请求）优点：首屏时间快。seo效果好（搜索引擎排名效果（html））缺点：页面切换慢 单页面应用：页面跳转——>JS渲染（不会再次去请求html文件）优点：页面切换快缺点：首屏时间稍慢（第一次请求html和js），SEO差（搜索引擎优化效果差，网页排名差）（缺点服务器端渲染技术解决）——完美 rou...原创 2018-10-05 16:54:34 · 357 阅读 · 0 评论 -
项目环境搭建
第一步 下载node.js第二步 下载 git 第三步 远程仓库的选择（码云 or github） vuecil脚手架的安装（https://github.com/vuejs/vue-cli/tree/master）以下以码云为例在码云上创建了基础文件。然后使用git 克隆到本地 使用 git clone 命令 以下是复制需要克隆的项目链接在克隆项目里配置vue...原创 2018-10-05 16:57:17 · 182 阅读 · 0 评论 -
在Vue中使用插槽（slot）
什么是插槽：顾名思义，一个萝卜一个坑。子组件创建的标签插入的内容不会在浏览器显示。这时需要用到Vue新的语法slot。Vue为什么要用插槽：组件标签是组件定义好的内容，当我们想在组件标签内放一些东西的时候。是不具有作用的。他不会显示。<foo> <div>hello</div></foo>浏览器中不会显示hello。d...原创 2018-10-06 10:42:25 · 433 阅读 · 0 评论 -
Vue之cli
使用vue-cli的目的：生成目录结构 本地开发调试 代码部署 热加载（实时更新浏览器） 单元测试搭建编程环境。安装条件：Node.js版本要大于6.0。npm大于3.0（Node.js大于6.0的版本 里面npm版本大于3.0）。还有Git详情见：https://github.com/vuejs/vue-cli/tree/master安装Node环境http://nod...原创 2018-09-25 15:32:26 · 684 阅读 · 0 评论 -
Vue之computed 和 wacth
计算属性computed ，监听属性wacth：计算属性存在的意义：在html中插入一个普通函数时（methdos中的函数），每次修改数据，html结果就会刷新（局部的重排和重绘）。同时普通函数也会重复执行。这样性能大打折扣。所以就有了计算属性computed。computed的内部机制：当他依赖的值发生变化的时候。他会重新计算内部设置有缓存，会缓存当前数据。会监听当前值的变化...原创 2018-12-14 14:20:39 · 359 阅读 · 0 评论 -
Vue之组件参数校验与非props特性
子组件对父组件传递数据的校验：何为校验：就是对父组件传递的数据进行一定的限制。比如我子组件只接收字符串类型数据。其他不要等等。（如果数据类型不符合。Vue会在控制台抛出警告。）一下是数据可以为数字类型或者字符串类型的写法。以数组的形式：数据类型的其他写法。放要求数据必须传过来时：content写成对象形式：required 为true表示必传子组件可以设置默认值（没...原创 2018-10-24 14:51:13 · 232 阅读 · 0 评论 -
Vue之父子组件传值
单项数据流‘：父组件可以随意传数据给子组件， 父可以随意修改 ， 子不能修改父的数据，会报错。如果子组件修改了父组件的数据。那么会对其他的子组件也会有相应的影响。处理方式：父组件的值，子组件接收够用一个变量接收。这样就变成子组件自用的了 （完美解决）父组件向子组件传值：通过属性传值父组件要传值给子组件，需要在子组件上绑定属性（用v-bind动态绑定，如果不用那就相当于传入固定值）...原创 2018-10-24 14:39:26 · 255 阅读 · 0 评论 -
Vue 的插件机制
Vue 的插件机制vue 提供了一个 use 方法，来加载插件：Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])); if (installedPlugins.i...转载 2018-12-15 15:48:12 · 793 阅读 · 0 评论