vue2脚手架
文章平均质量分 83
vue
飘然渡沧海
这个作者很懒,什么都没留下…
展开
-
vue-vue2脚手架14-插槽(slot)
vue-vue2脚手架14-插槽作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 。分类:默认插槽、具名插槽、作用域插槽使用方式:默认插槽:父组件中: <Category> <div>html结构1</div> </Category>子组件中: <template>原创 2021-11-23 14:22:59 · 233 阅读 · 0 评论 -
vue-vue2脚手架13-github简单案例(vue-resource)
vue-vue2脚手架13-github简单案例本章学习的是访问github简单的一个demo案例,利用事件总线来数据传参与ES6 语法进行参数值合并Main.js 打开事件总线//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//关闭Vue的生产提示Vue.config.productionTip = false//创建vmnew Vue({ el:'#app', render: h => h(原创 2021-11-23 11:29:04 · 794 阅读 · 0 评论 -
vue-vue2脚手架12-配置代理(devServer:proxy)
vue-vue2脚手架12-配置代理ajax跨域问题1. 纯js版本 xhr new XMLHttpRequest xhr.open xhr.send2.jQuery $.get $.post (80%都是封装dom操作,vue的作用就是封装dom)3.axios 对xhr的封装,作者推荐使用4.fetch 在ie上兼容较差使用axios : npm i axios跨域问题解决1.cors 服务端在请求添加ht原创 2021-11-20 22:30:13 · 2410 阅读 · 0 评论 -
vue-vue2脚手架11-Vue封装的与动画过度(animate.css)
vue-vue2脚手架11-Vue封装的与动画过度作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。图示写法:准备好样式:元素进入的样式:v-enter:进入的起点v-enter-active:进入过程中v-enter-to:进入的终点元素离开的样式:v-leave:离开的起点v-leave-active:离开过程中v-leave-to:离开的终点使用<transition>包裹要过度的元素,并配置name属性:原创 2021-11-19 17:20:47 · 273 阅读 · 0 评论 -
vue-vue2脚手架10-在下一次 DOM 更新结束后执行其指定的回调(nextTick)
vue-vue2脚手架10-在下一次 DOM 更新结束后执行其指定的回调(nextTick)vue在执行方法的时候是整个方法执行完之后在对页面进行改变的,如果这个时候点完图一编辑按钮,但是又不做任何改变,继续点击下一栏编辑,光标应该落入第二行编辑栏,而不是出现图二情况很多开发会用 setTimeout 来避免方法执行完之后 this.$refs.inputTitle.focus()不生效,vue有更好的结束后回调的方法 handleEdit(todo){ // if(todo.原创 2021-11-19 15:45:55 · 1074 阅读 · 0 评论 -
vue-vue2脚手架9-消息订阅与发布(pubsub)
vue-vue2脚手架8-消息订阅与发布(pubsub)pubsub的安装与介绍一种组件间通信的方式,适用于任意组件间通信。使用步骤:安装pubsub:npm i pubsub-js引入: import pubsub from 'pubsub-js'接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。methods(){ demo(data){......}}......mounted() { this.pid = pubsub.sub原创 2021-11-18 19:30:03 · 461 阅读 · 0 评论 -
vue-vue2脚手架8-全局事件总线(GlobalEventBus)
vue-vue2脚手架8-全局事件总线(GlobalEventBus)一种组件间通信的方式,适用于任意组件间通信。安装全局事件总线:new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ......}) 使用事件总线:接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。methods(){ de原创 2021-11-15 19:28:33 · 930 阅读 · 0 评论 -
vue-vue2脚手架7-组件的自定义事件
vue-vue2脚手架7-组件的自定义事件一种组件间通信的方式,适用于:子组件 ===> 父组件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。绑定自定义事件:第一种方式,在父组件中:<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>第二种方式,在父组件中:<Demo ref="demo"/>......mounted()原创 2021-11-15 16:59:08 · 739 阅读 · 0 评论 -
vue-vue2脚手架6-浏览器本地存储webStorage
vue-vue2脚手架5-浏览器本地存储其实这边不借助vue就能实现本地存储功能, js有这种功能1. 组件化编码流程: (1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。 (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用: 1).一个组件在用:放在组件自身即可。 2). 一些组件在用:放在他们共同的父组件上(<span style="color:red">状态提升</span>)。 (原创 2021-11-15 14:32:10 · 568 阅读 · 0 评论 -
vue-vue2脚手架5-TodoList案例(2)
vue-vue2脚手架5-TodoList案例vue-vue2脚手架5-TodoList案例(1)删除按钮以下是我的代码对button按钮注释这里我前面给的静态资源有个问题 app里面 css文件时 scope 的,可以把scope删除这里需要向上一篇文章讲的那样重复讲delete按钮添加顶部代码:App.vue<template><div id="root"> <div class="todo-container"> <d原创 2021-11-12 17:33:12 · 749 阅读 · 0 评论 -
vue-vue2脚手架5-TodoList案例(1)
vue-vue2脚手架5-TodoList博主这里准备了初始化文件todolist文件纯净版原创 2021-11-05 19:40:48 · 410 阅读 · 0 评论 -
vue-vue2脚手架4-插件,scoped样式
vue-vue2脚手架4-插件,scoped样式插件1. 功能:可以把多个组件共用的配置提取成一个混入对象2. 使用方式:第一步定义混合:```{ data(){....}, methods:{....} ....}```第二步使用混入: 全局混入:```Vue.mixin(xxx)``` 局部混入:```mixins:['xxx'] ```插件 1. 功能:用于增强Vue 2. 本质:包含install方法的一个对象,install的第一个原创 2021-11-05 15:48:13 · 131 阅读 · 0 评论 -
vue-vue2脚手架3-ref函数,props配置项,mixin混入
vue-vue2脚手架3-ref函数tips: 在vscode 使用 <v 可以直接生成系列模板ref 函数1. 被用来给元素或子组件注册引用信息(id的替代者)2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)3. 使用方式:打标识:```<h1 ref="xxx">.....</h1>```或 ```<School ref="xxx"></School>```4. 获取:```this.$原创 2021-11-04 22:52:34 · 223 阅读 · 0 评论 -
vue-vue2脚手架1-初识脚手架
vue-vue2核心10-脚手架初识脚手架安装vue官网文档地址:vue cli cammand line interface文档: 安装vue脚手架之前需要安装node.jsNode.js: javascript运行环境(runtime),不同系统直接运行各种编程语言node.js官网连接博主在这里安装的时候比较尴尬,因使用的是win7系统不支持node 12.以上的版本,会报错: window server 2012 R2,or higher这里我提供一个12版本原创 2021-11-04 17:27:14 · 261 阅读 · 0 评论