导航

• 博客园
• 首页
• 新随笔
• 新文章
• 联系
• 订阅
• 管理

随笔分类 -  Vue

• 18.前端路由router-08权限控制
  摘要：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象 来应对这些变化，或使用 beforeRouteUpd 阅读全文
  posted @ 2019-07-01 15:19 sunny-cheng 阅读(1437) 评论(0) 推荐(0)
• 17.前端路由router-07keep-alive
  摘要：keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能， 由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素 当组件在keep-alive内被切换时组件的activated、deactivated这两个生命 周期钩子函数会被执行 例子： h3标签绑定事件， 阅读全文
  posted @ 2019-07-01 14:54 sunny-cheng 阅读(190) 评论(0) 推荐(0)
• 16.前端路由router-06动态路由
  摘要：动态路由就是不同的点击，显示不同路径 栗子 创建两个路由：name相同 绑定相同子组件ComDesc 阅读全文
  posted @ 2019-07-01 14:43 sunny-cheng 阅读(657) 评论(0) 推荐(0)
• 15.前端路由router-05嵌套路由
  摘要：1.实例化vue，组件APP 2.组件APP路由下，两个字路由children:[]　定义 3.对应页面 阅读全文
  posted @ 2019-07-01 12:15 sunny-cheng 阅读(261) 评论(0) 推荐(0)
• 14.前端路由router-04编程式导航
  摘要：实例化Vue和router 路由对象和匹配方式 编程式导航： 实现方式：点击button，激活事件，path改变，路由匹配到引入模板 阅读全文
  posted @ 2019-07-01 12:07 sunny-cheng 阅读(220) 评论(0) 推荐(0)
• 13.前端路由router-03路由参数
  摘要：渲染路由a标签，并且params匹配 匹配userId 控制台查看, query返回的是查找的值 控制台查看, params返回的是路由参数 阅读全文
  posted @ 2019-07-01 12:00 sunny-cheng 阅读(204) 评论(0) 推荐(0)
• 13.前端路由router-02命名路由
  摘要：1.vue使用该VueRouter创建 2.实例化vue对象 3.给路由命名和使用方式 4.页面 返回结果： 和原理返回结果是一样的，只是路由方式不同 阅读全文
  posted @ 2019-07-01 11:46 sunny-cheng 阅读(513) 评论(0) 推荐(0)
• 11.vue的双向数据绑定
  摘要：基本用法： 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。 栗子： msg初始值为‘alex’ 将input标签绑定v 阅读全文
  posted @ 2019-07-01 10:59 sunny-cheng 阅读(180) 评论(0) 推荐(0)
• 10.计算属性
  摘要：先看个例子： 上面例子中，computed { 定义一个函数 alexDesc } 当点击按钮将字符串切换， 那么 ，这个方法完全可以通一个函数来定义的，为什么弄出来个computed呢？ 不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。 对于最终的结果，两种方式确实是相同的 阅读全文
  posted @ 2019-06-25 12:36 sunny-cheng 阅读(233) 评论(0) 推荐(0)
• 9.过滤器的使用
  摘要：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： 全局过滤器： Vue.filter('过滤器名称',fu 阅读全文
  posted @ 2019-06-25 11:51 sunny-cheng 阅读(236) 评论(0) 推荐(0)
• 8.公共组件
  摘要：还记得之前那首打油诗吗？ 先声子，再挂子，再用子， 这种创建组件的方式作用域是局部作用域，那么下面我们学习一下怎么创建公共作用域的组件 创建公共作用域的组件： 栗子： 创建公共组件 创建入口组件APP1, 创建子组件Vheader ，使用公共组件 声明子组件 ，使用公共组件 返回 也就是说公共组件， 阅读全文
  posted @ 2019-06-25 11:13 sunny-cheng 阅读(517) 评论(0) 推荐(0)
• 7.Props向子组件传递数据
  摘要：组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。 可以使用 props 把数据传给子组件。 for-child-msg="aaa" ， for-child-msg可以当变量名，''aaa''是要传递给子组件的数据 子组件props：[for-child-msg] 阅读全文
  posted @ 2019-06-25 10:06 sunny-cheng 阅读(294) 评论(0) 推荐(0)
• 6.组件
  摘要：组件的概念： 组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。 如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树： 在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例： 但是 ，这样将我们渲染所有文本 阅读全文
  posted @ 2019-06-24 23:50 sunny-cheng 阅读(142) 评论(0) 推荐(0)
• 5.指令系统-事件
  摘要：1.v-on --事件绑定 绑定一个点击事件showHanlder() 初始赋值 methods声明事件，点击改变文字 2.v-model --v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定， 根据表单上的值，自 阅读全文
  posted @ 2019-06-24 23:30 sunny-cheng 阅读(233) 评论(0) 推荐(0)
• 4.指令系统
  摘要：1.传值 {{ }}（双大括号）的文本插值 返回 hello指令系统 模板语法 ··（反引号） 返回 hello 说明 当两种方式同时存在时，template 优先级高于 {{ }} 2.v-text，v-html 返回值 查看控制台 v-text 等价于 {{}} 实现原理:innerText v 阅读全文
  posted @ 2019-06-24 22:08 sunny-cheng 阅读(201) 评论(0) 推荐(0)
• 3.Vue起步
  摘要：创建一个Vue实例化对象 DOM 实例化Vue对象 参数说明： var app ： 对象名称是 app， el : 绑定DOM 元素中的 id， data ：用于定义数据属性， 打印这个实例化对象看看都有什么吧 这个方框的是不是很熟悉？ 加$的是实例化对象的属性，作用与自定义的属性作区分 当一个 V 阅读全文
  posted @ 2019-06-24 17:42 sunny-cheng 阅读(239) 评论(0) 推荐(0)
• 2.ES6对比ES5一些不同
  摘要：ECMAScript 6 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。 Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。 ECMAScript和JavaScript到底是什么关系？很多初学者会感到困惑，简 阅读全文
  posted @ 2019-06-24 17:00 sunny-cheng 阅读(888) 评论(0) 推荐(0)
• 1.Vue.js是什么？
  摘要：Vue.js是什么？ 官网解释： 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面， Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应 阅读全文
  posted @ 2019-06-24 16:23 sunny-cheng 阅读(267) 评论(0) 推荐(0)