vue
关注
分享
扫一扫
yaxi_yaxi_yaxi
错过了半世不可再错过一生！
展开
-
vue-可排序的列表组件
该组件的功能 可排序，并且添加数据后，可以根据原数据的排序状态立即进行排序，实现的原理就是给元素绑定一个属性记录下排序后的状态原创 2018-12-13 13:55:42 · 3730 阅读 · 1 评论 -
递归组件的用法
先看效果图：1：先mock数据//list.jsvar list = { list: [{ title: '成人票', children: [{ title: '成人三馆联票' }, { title: '成人四馆联票', children: [{ ...原创 2019-02-26 15:37:37 · 1220 阅读 · 0 评论 -
slot插槽
代码模板如下： <div id="app"> <h1>插槽slot</h1> <h1>具名插槽</h1> <button-counter v-model="message"><p slot="header"&g原创 2019-02-26 11:25:46 · 108 阅读 · 0 评论 -
v-model的使用
组件中v-model的使用：v2.2以前的版本是这样应用的，<body> <div id="app"> <h1>组件中v-model的使用</h1> <h1>1,子组件中props要有value属性，2:子组件动态绑定value至props,3，子组件触发input事件后触发$emit&l..原创 2019-02-25 18:35:20 · 933 阅读 · 0 评论 -
vue祖孙组件之间的数据传递
**解决的问题：** 使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递。**注意：**本方法针对vue2.4版本及以上，使用$attrs和$listeners来实现的**解决方案：****首先创建父组件：** 父组件用于动态数据的绑定与事件的定义<template> <div>...原创 2019-02-25 18:08:04 · 13921 阅读 · 3 评论 -
vue 报错： [Vue warn]: Computed property "checkall" was assigned to but it has no setter.
报错如图：报错原因： computed:{ checkall:{ //购物车与checked数量一致时，全选为true get(){ return this.cartCheckedCount===this.items.length; } } }分析： 该报错是和computed联系在一起的，我们知道computed动态...原创 2019-01-19 18:00:36 · 14368 阅读 · 1 评论 -
编程式路由
编程式路由就是通过js来跳转组件现在实现通过goods组件向购物组件的跳转，他们都挂载于app.vue上第一步： app.vue 添加挂载&lt;router-view&gt;&lt;/router-view&gt;第二步：实现goods组件的代码：&lt;template&gt; &lt;div&gt; &lt;h1&gt原创 2019-01-06 15:00:09 · 428 阅读 · 1 评论 -
嵌套路由
嵌套路由使用场景：左侧为菜单，右侧为内容，当点击菜单时，切换内容组件而整个页面却不刷新.嵌套路由的知识点大致和动态路由一样，不同点如下：eg: good组件中嵌套title组件和content组件router/index.js中的配置。import goods from './../views/goods.vue';import title from './../components/...原创 2019-01-06 14:23:33 · 156 阅读 · 0 评论 -
动态路由
何为动态路由：动态路由就是带参数的路径，也就是不固定的路径eg: localhost:8080/user/123, 其中123就是参数动态路由用到的知识点1：&amp;amp;lt;router-view&amp;amp;gt;&amp;amp;lt;/router-view&amp;amp;gt; //作用：挂载组件2：&amp;amp;lt;router-link :to='{name:'名字',params:{原创 2019-01-05 22:51:04 · 1156 阅读 · 0 评论 -
vue父子组件间通信
父组件向子组件通信原理： 父组件data中存在一属性，子组件通过props接收，父组件动态绑定该数据。子组件代码：&lt;template&gt;&lt;div class="child"&gt; &lt;button&gt;减一&lt;/button&gt; {{number}} &lt;button&原创 2019-01-05 20:48:09 · 146 阅读 · 0 评论 -
Vue-留言列表
一：该例使用到的知识点效果图：1. 注意子组件引用时名称的书写方式 eg:Vue.component(‘vInput’,{}), 这里子组件名称为vInput, 则引用时需要这样书写： <v-input :username="username" v-model="username" v-focus='jujiao' ref="names"></v-input&g...原创 2018-12-13 15:04:03 · 1460 阅读 · 0 评论 -
vue watch的用法
vue watch的三种用法var app = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { // watch的第一种形式 a: function (val, oldVal) { // 在监听$route时，第一个参数表示to, 第二个参数表示from console.log() ...原创 2019-03-22 16:41:36 · 2713 阅读 · 3 评论