vue专栏
vue 框架的一些知识
致我逝去的青春
人生可以浓缩成三句话:1、你的责任就是你的方向,你的经历就是你的资本,你的性格就是你的命运。2、复杂的事情简单做,你就是专家;简单的事情重复做,你就是行家;重复的事情用心做,你就是赢家。3、美好是属于自信者的,机会是属于开拓者的,奇迹是属于执著者的
展开
-
vue-cli 脚手架的配置及其使用
vue-cli 脚手架• 参考网站:https://cli.vuejs.org/zh/guide/• npm i @vue/cli -g 或者 yarn global add @vue/cli 下载vue脚手架(一般安装在全局)• 安装成功后,全局环境下会生成一个 vue的可执行命令, vue --version查看版本号• 脚手架:帮助我们把webpack等相关配置都处理好,我们只需要基...原创 2020-03-05 15:16:09 · 186 阅读 · 0 评论 -
vue小案例 购物车 计算本
购物车数据[ { "isSelected": false, "productName": "深入浅出xx", "productInfo": "颜色:xx学习", "productPrice": 57.8, "productCount": 3 }, { "isSelected": true, "productName": "深入...原创 2020-03-05 15:14:38 · 254 阅读 · 0 评论 -
封装vue-router,实现基础功能
封装vue-router源码class VueRouter{ constructor(options){ const {routes}=options; // 监听当前页面的hash值的切换 // 当第一次解析页面时,会有一个默认的hash值 /// 循环遍历routes,把path和component重新放入一个新的对象...原创 2020-03-05 15:11:06 · 395 阅读 · 0 评论 -
VUE的路由(vue-router)传参以及路由重定向
VUE的路由(vue-router)• 参考网址:https://router.vuejs.org/zh/• Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌• 路由:一个路径对应一个组件• 一个简单的路由配置需要4步• 创建组件• 配置路由映射表• 注册路由配置表• 把路由挂在在根实例上vue-rout...原创 2020-03-05 15:09:54 · 2008 阅读 · 0 评论 -
封装vuex,实现其基础功能
封装vuex源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2020-03-05 15:05:06 · 113 阅读 · 0 评论 -
vuex 核心理念 及使用方法
vuex• 参考网址:https://vuex.vuejs.org/zh/guide/mutations.html• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。• 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状...原创 2020-03-05 15:03:18 · 245 阅读 · 1 评论 -
vue MVVM原理 ,生命周期,以及方法和数据传递
VUE官网:https://cn.vuejs.org/• vue我们现在学习和使用的是第二代版本• VUE是渐进式框架• Vue是一个类• 每当创建一个实例,就相当于创建一个viewModel监听器:可以监听对应视图和对应数据的相互改变• 在框架中,框架没有直接操作真正的DOM,而是操作了虚拟的DOM(js对象),更改数据以后,就会更改虚拟的DOM,然后进行DOM-diff的对比,只需...原创 2020-03-05 14:55:53 · 451 阅读 · 0 评论 -
Vue extend,mixins ,extends以及Vue.use的install和Vue.nextTick
1.Vue.extend场景:vue 组件中有些需要将一些元素挂载到元素上,这个时候 extend 就起到作用了是构造一个组件的语法器写法:// 创建构造器var Profile = Vue.extend({ template: '<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>',//template对应的标签最外层必须只有一个标签 data: function () { return {原创 2020-07-22 23:02:40 · 909 阅读 · 0 评论 -
Vue render函数 异步组件 动态组件 递归组件和函数式组件
1.render函数1.场景:有些代码在 template 里面写会重复很多,所以这个时候 render 函数就有作用啦// 根据 props 生成标签// 初级<template> <div> <div v-if="level === 1"> <slot></slot> </div> <p v-else-if="level === 2"> <slot></slot> &l转载 2020-07-22 22:51:37 · 3121 阅读 · 0 评论 -
vue的 require.context,watch 和 组件通讯的详细使用
1.require.context()1.场景:如页面需要导入多个组件,原始写法:import titleCom from '@/components/home/titleCom'import bannerCom from '@/components/home/bannerCom'import cellCom from '@/components/home/cellCom'components:{titleCom,bannerCom,cellCom}2.这样就写了大量重复的代码,利用 requ原创 2020-07-22 22:20:11 · 470 阅读 · 0 评论