vue开发
文章平均质量分 58
vue开发笔记
huhanghao
Dream it Wish it Do it
展开
-
Vue再学习13——路由
Vue再学习13——路由原创 2022-07-20 17:39:53 · 657 阅读 · 1 评论 -
Vue再学习12——vuex学习
Vue再学习12——vuex学习原创 2022-07-07 09:55:47 · 325 阅读 · 0 评论 -
Vue再学习11——插槽
Vue再学习11——插槽原创 2022-07-06 22:26:16 · 812 阅读 · 0 评论 -
Vue再学习9——网络数据访问
Vue再学习9——网络数据访问原创 2022-07-04 22:53:57 · 473 阅读 · 2 评论 -
8体系化Vue再学习——vue动画
vue动画原创 2022-06-07 16:09:46 · 333 阅读 · 1 评论 -
7体系化Vue再学习——全局事件总线及消息订阅
全局事件总线及消息订阅原创 2022-06-07 15:42:20 · 250 阅读 · 2 评论 -
6体系化Vue再学习——本地存储及自定义事件
本地存储及自定义事件原创 2022-06-07 15:29:52 · 136 阅读 · 0 评论 -
5体系化Vue再学习——Todo-list案例
Todo-list案例原创 2022-06-07 15:20:07 · 169 阅读 · 0 评论 -
4体系化Vue再学习——脚手架、props、插件、混入
脚手架、props、插件、混入原创 2022-06-07 14:59:32 · 221 阅读 · 0 评论 -
3体系化Vue再学习——组件开发
体系化Vue再学习——组件开发原创 2022-06-07 14:04:12 · 147 阅读 · 0 评论 -
2体系化Vue再学习——vue对象基础2
体系化Vue再学习——vue对象基础2原创 2022-06-07 13:50:52 · 123 阅读 · 0 评论 -
1体系化Vue再学习——vue对象基础1
1体系化Vue再学习——vue对象基础1原创 2022-06-07 12:11:37 · 388 阅读 · 0 评论 -
vue 通过 webpack 创建项目的eslint校验
vue 通过 webpack 创建项目的eslint校验在通过webpack 创建的项目,会自动引入eslint,在根目录下会有一个文件:.eslintrc.js,里面的内容主要就是校验的模板。基础格式:module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析...原创 2019-11-12 11:21:07 · 954 阅读 · 0 评论 -
vue 通过symbol的方式引入svg图标
vue 通过symbol的方式引入svg图标把iconfont的项目下载到本地,只需要用到里面的iconfont.js这个文件 main.jsimport './assets/iconfont'//引入iconfont.js封装一个icon.vue组件: icon.vue<template> <svg :class="iconStyle" aria-hid...原创 2019-11-12 11:18:37 · 2517 阅读 · 1 评论 -
Vue main.js各种写法和含义
Vue main.js各种写法和含义遇到的main.js的三种写法:第一种:通过webpack 初始化的项目// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alia...原创 2019-09-30 23:25:34 · 5734 阅读 · 0 评论 -
Vue 基础框架搭建
Vue 基础框架搭建项目安装和安装命令安装Vue cli环境npm install vue-cli -g创建项目vue init webpack my-project安装依赖框架npm install *--save-dev autoprefixer-loader*基础框架的引入"autoprefixer": "^6.7.2", //这英文翻译过来就是:...原创 2019-09-30 23:23:46 · 478 阅读 · 0 评论 -
Vue 通过vue init webpack 搭建项目结构目录解析
Vue 通过vue init webpack 搭建项目结构目录解析基础目录介绍{ //这个代码块里的都是项目描述,是创建者自定义的 "name": "qqmusic", //项目名称 "version": "1.0.0", //项目版本 "description": "qq music app by vue", //项目描述 "author": "author", ...原创 2019-09-30 23:21:29 · 1401 阅读 · 0 评论 -
Vue template挂载中el和mouted的使用和区别
Vuetemplate挂载中el和mouted的使用和区别// 通过 vue 对象中声明 el 属性绑定操作块元素选择器<div id="app"> <p>{{ message }}</p> <p>{{ good }} </p></div><script>new Vue({ el ...原创 2019-08-09 15:29:58 · 1425 阅读 · 0 评论 -
vue开发笔记1
vue开发笔记11、当css中使用设置height=0的时候,overflow需设置为 hidden;2、css宽高的过度变化,必须制定height的高度,不然动画不生效。对于auto的话,可以使用max-height来设置。3、对于css样式有优先级设定,有些style会被覆盖,在style不生效的时候需要去看下布局状态。通过设置!important可以强制生效4、对于要选择的c...原创 2019-07-18 10:21:55 · 268 阅读 · 0 评论 -
vue 中 input事件
vue 中 input事件input事件的使用<div:id="inputId":class="['textarea_content_right']":contenteditable="true"@input="changeText($event)"v-text= "currentValue"></div>data() { return...原创 2019-07-02 14:15:31 · 8299 阅读 · 0 评论 -
Vuex案例学习
Vuex案例学习检测state中属性变化// store.js,需要先在main.js中引入并全局引用import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);let state = { text: ''};let mutations = { text(state, data) { ...原创 2019-06-06 15:01:17 · 253 阅读 · 0 评论 -
Vue 打包发布流程
Vue 打包发布流程配置打包文件路径在vue.config.js中设置module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/ynnt/' : '/'}这里的ynnt就是我们基地址的路径。执行打包命令通过命令npm run build执行打包,最终在根目录下会生...原创 2019-05-16 16:21:38 · 13008 阅读 · 1 评论 -
vue——vuex学习
vue——vuex学习简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 组件Vue Component通过dispatch来调用actions提供的方法 而actions除了可以和api打交道外,还可以通过commit来调mutations提供的方法 ...原创 2019-05-15 13:50:53 · 262 阅读 · 0 评论 -
Vue router传参
Vue router传参router-link标签跳转传参内部router通过<router-link>进行router跳转// 1、设置对应的params <router-link :to="{name:'music',params:{data:'123'}}">进行音乐</router-link>// 2、获取参数,在created生命周...原创 2019-05-15 11:25:42 · 276 阅读 · 0 评论 -
vue中v-model和v-bind区别
vue中v-model和v-bind区别Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind: v-model: v-bindeg:v-bind:class 可简写为 :class当加上v-bind:之后,它的值classe不是字符串,而是vue实例对应的data.cl...原创 2019-05-15 11:18:05 · 45590 阅读 · 3 评论 -
Vue——slot插槽
Vue——slot插槽slot简介slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定,slot写在组件template的什么位置,父组件传过来的模板将来就显示在什么位置。单个插槽单个插槽也叫做默认插槽,可以放置在...原创 2019-05-15 11:15:17 · 191 阅读 · 0 评论 -
vue router生命周期
vue router生命周期router中的参数router异步解析执行,此时router在 resolve 完之前一直处于 等待中。三个参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子 组件中路由的生命周期中的不同方法...原创 2019-04-24 10:14:01 · 8795 阅读 · 0 评论 -
Vue再学习9_过度效果
Vue再学习9_过度效果过度效果属性// 基础语法<transition name = "过度方法"> <div></div></transition>// 实际使用:渐隐渐现过度<button v-on:click = "show = !show">点我</button><transitio...原创 2019-04-23 17:12:14 · 184 阅读 · 0 评论 -
Vue再学习8_字体图标的引入
字体图标的引入在阿里iconfont等字体图标网站选取对应的图标,然后下载代码ttf是我们的字体图标文件,iconfont.css里面是我们的字体图标引用的样式。.icon-gouwuchekong:before { content: "\f0179";}.icon-huiyuan3:before { content: "\e61d";}引入步骤// 1...原创 2019-04-09 14:36:11 · 369 阅读 · 0 评论 -
Vue再学习7_数据监听
Vue再学习7_数据监听对象监听watch// 在watch中对数据进行监测data(){ return { count:0, } }, methods:{ testClick(){ this.count++ } }, watch:{ count:function(newV,oldV){ ...原创 2019-04-09 14:28:48 · 105 阅读 · 0 评论 -
Vue再学习6_网络访问框架
Vue再学习6_网络访问框架Vue原生的vue-resource已经停止维护了,作者推荐使用axios。所以就不做过多讲解了。github地址:https://github.com/pagekit/vue-resourcevue-resource引入// 1、安装依赖$ npm install vue-resource// 2、加载插件mport VueReaourc...原创 2019-04-03 21:36:47 · 325 阅读 · 0 评论 -
Vue再学习5_路由router的使用
Vue再学习5_路由router的使用router的引入1: 下载 npm i vue-router -S2: 在main.js中引入 import VueRouter from 'vue-router';3: 安装插件 Vue.use(VueRouter);设置router// 1、添加home.vue<template> <div ...原创 2019-04-03 14:58:05 · 155 阅读 · 0 评论 -
Vue再学习4_基于 Vue.js 的移动端组件库Mint UI
Vue再学习4_基于 Vue.js 的移动端组件库Mint UI地址https://mint-ui.github.io/#!/zh-cn引入步骤1、通过npm安装对应的库Vue 2.0npm install mint-ui -S2、 引入全部组件在main.js中添加import Vue from 'vue'; import Mint from 'mint-ui';...原创 2019-04-03 14:50:40 · 109 阅读 · 0 评论 -
Vue再学习3_生命周期和DOM操作
Vue再学习3_生命周期和DOM操作Vue生命周期 beforeCreate:组件刚被实力恶化创建,组件属性计算之前。 此时,无法获取 data中的数据、methods中的方法。 created:组件实例化创建完成,属性已经绑定,但是DOM还未生成,$el属性还不存在 可以调用methods中的方法、改变data中的数据 beforeMount:模板编译之...原创 2019-04-02 16:18:45 · 5920 阅读 · 0 评论 -
Vue再学习2_组件开发
Vue再学习2_组件开发全局组件在main.js中配置,配置完成之后可以全局使用// 1、引入组件对象import GlobalTitle from './components/GlobalTitle.vue'// 2、声明全局组件 Vue.component('组件名',组件对象);Vue.component('globalTitle',GlobalTitle);// ...原创 2019-03-31 10:23:09 · 125 阅读 · 0 评论 -
Vue再学习1_环境搭建和常用v指令
Vue项目搭建安装Vue cli环境npm install vue-cli -g创建项目vue init webpack my-projectvue中常用的v-指令基础常用 v-text 是元素的innerText只能在双标签中使用 v-html 是元素的innerHTML,不能包含<!--{{xxx}} --> v-if 元素是否...原创 2019-03-31 10:22:01 · 147 阅读 · 0 评论 -
Vue基础学习7
Vue基础学习7webPack简单脚手架搭建webPack是一个前端资源模块化加载器和打包工具,它能够把各种资源作为模块来使用和处理,实际上,它是通过不同loader将这些资源加载之后打包的,然后输出打包后的文件。他就是一个模块加载器。搭建步骤:1、通过npm init生成package.json文件需要对立面的一些节点进行修改安装相关模板这里是教程提供的一些基础模...原创 2018-08-29 20:13:47 · 160 阅读 · 0 评论 -
Vue基础学习6
Vue基础学习6组件组件定义所谓的组件就是用来封装对应的代码,增加可复用性。组件的定义可以有三种。1,2是全局的定义方式。3位局部的组件。组件是相互独立的,数据也是相互独立的。 动态模板:为了防止template中代码量比较大没我们还可以将其定义在外部: 固定结构的组件:类似于ul , table这类与子类关联比较强的组件,我们在定义时最好放在一...原创 2018-08-29 20:13:13 · 150 阅读 · 0 评论 -
Vue基础学习5
Vue基础学习5Vue中的属性和方法对于Vue来说,我们new出一个对象赋值给vm之后,vm便可以操作Vue的各个属性。获取属性的值:vm.value可以直接获取data中value属性的值,而通过加入$前缀,则可以拿到属性关联的元素:vm.$data.msg:直接获取data中的msg信息。vm.$el:获取的是body中的标签结构。 如果要获取主节点...原创 2018-08-29 20:12:39 · 140 阅读 · 0 评论 -
Vue基础学习4
Vue基础4Vue的生命周期 计算属性有点类似method,但是它的主要的功能是计算属性,用来存储和处理数据。这里需要注意:计算属性不能直接修改,只能通过set方法去修改。这里要改变num2的值,只能通过set去设置,然后再通过get获取。如果只是获取的话只会调用get。所以在变更前是99,变更后是110计算属性比较重要的一个属性就是有缓存,在数据没有发生变...原创 2018-07-04 14:00:38 · 338 阅读 · 0 评论