随笔分类 -  Vue

上一页 1 2 3
Vue(基础七)_webpack打包工具用法（上）
摘要：一、前言 1、webpack原理 二、主要内容 1、webpack原理： （1）官网图：我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个，因为这些js文件是相互依赖的，webpack是一个打包工具，可以将我们多个静态资源文件，多个js打包成一个js, 多个css打包成一个c 阅读全文
posted @ 2019-04-02 09:52 mysunshine_SZZ 阅读(1120) 评论(0) 推荐(0)
Vue(基础六)_嵌套路由（续）
摘要：一、前言 1、路由嵌套里面的公共路由 2、keep-alive路由缓存 3、导航守卫 二、主要内容 1、路由嵌套里面的公共路由： （1）如下图所示是掘金网的首页，上面是父组件，里面是子组件，在切换里面的导航的时候发现里面的结构并没有变化，只是数据发生了变化，为了避免切换的时候反复操作DOM,这时候将 阅读全文
posted @ 2019-03-30 16:48 mysunshine_SZZ 阅读(328) 评论(0) 推荐(0)
Vue(基础六)_vue-router
摘要：一、前言 本文主要涉及： 1、传统方式路由的实现 2、使用vue-router 3、路由命名 4、动态路由 5、嵌套路由 二、主要内容 1、传统方式路由的实现： （1）当URL改变之后，立刻会发生请求响应整个页面，如果此时的资源过多，会出现白屏现象 （2）单页面应用，锚点值改变，不会立刻发送请求，而 阅读全文
posted @ 2019-03-30 12:27 mysunshine_SZZ 阅读(203) 评论(0) 推荐(0)
Vue(基础五)_vue中用ref和给dom添加事件的特殊情况
摘要：一、前言 这篇文章涉及的主要内容有： 1、ref绑定在标签上是获取DOM对象 2、ref绑定在子组件上获取的是子组件对象 3、案列：自动获取input焦点 二、主要内容 1、基础内容： ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素 阅读全文
posted @ 2019-03-30 10:08 mysunshine_SZZ 阅读(6203) 评论(0) 推荐(0)
Vue(基础四)_总结五种父子组件之间的通信方式
摘要：一、前言 这篇文章主要总结了几种通信方式： 1、方式一：使用props: [ ]和$emit() （适用于单层通信） 2、方式二：$attrs和$listeners（适用于多层） 3、方式三：中央处理事件：bus.$on监听触发的事件 4、方式四：provide:[]，inject:['] 5、方式 阅读全文
posted @ 2019-03-28 19:53 mysunshine_SZZ 阅读(1413) 评论(0) 推荐(0)
Vue(基础三)_监听器与计算属性
摘要：一、前言 本文主要涉及： 1、watch()监听单个属性 2、computed可以监听多个属性 3、点击li标签切换音乐案例 二、主要内容 1、watch()监听器（监听单一数据） （1）监听简单的数据类型 （2）对于复杂的数据类型（数组，对象）不能用上面的来监听 2、computed计算属性（可以 阅读全文
posted @ 2019-03-27 16:22 mysunshine_SZZ 阅读(412) 评论(0) 推荐(0)
vue(基础二)_组件，过滤器，具名插槽
摘要：一、前言 主要包括： 1、组件（全局组件和局部组件） 2、父组件和子组件之间的通信（单层） 3、插槽和具名插槽 4、过滤器 二、主要内容 1、组件 （1）组件在mvc中充当的角色 （1）局部组件 三个步骤：1、创建局部主键，2.挂载局部组件，3.使用局部组件 <!DOCTYPE html> <htm 阅读全文
posted @ 2019-03-26 21:39 mysunshine_SZZ 阅读(465) 评论(0) 推荐(0)
vue（基础一）_基本指令的使用
摘要：一、前言 1、基本骨架 2、插值表达式{{ }} 3、vue起的作用，在开发中充当的角色MVVM 4、基本指令 二、基础内容 1、基本骨架 注意：如果实例中有template加载template中的内容，没有的时候再加载#app模板中的内容 2、插值表达式{{ }} {{表达式}}中可以包含如下几个 阅读全文
posted @ 2019-03-26 10:06 mysunshine_SZZ 阅读(329) 评论(0) 推荐(0)
vue购物车和地址选配（三）
摘要：参考资料：vue.js官网 项目演示： 项目源代码： 核心代码及踩坑 删除： new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, checkAllFrag:false,//默认没有全选 deFlag:false, //当前的存起来 cu 阅读全文
posted @ 2019-03-09 00:08 mysunshine_SZZ 阅读(484) 评论(0) 推荐(0)
vue实现购物车和地址选配（二）
摘要：参考文献： vue官网： vue.js 效果展示：全选和取消全选，计算总金额 项目源代码：https://github.com/4561231/hello_world 项目核心代码实现及踩坑 vue实例代码如下 new Vue({ el:'#app', data:{ productlist:[] } 阅读全文
posted @ 2019-03-08 22:33 mysunshine_SZZ 阅读(492) 评论(0) 推荐(0)
vue实现购物车和地址选配
摘要：参考文献 vue.js官网 项目演示：数据渲染，格式化数据，点击加，减号自动加减 项目准备 1. 项目css和js文件 https://github.com/4561231/hello_world 2. 引入和安装vue-包管理工具 三种方式： 方式一：直接引入连接 方式二：将vue-resourc 阅读全文
posted @ 2019-03-07 22:37 mysunshine_SZZ 阅读(547) 评论(0) 推荐(0)

上一页 1 2 3