小白学习vue
文章平均质量分 57
歪歪100
与你happy畅谈。发表的博客内容仅是自己的学习记录,愿与你分享
展开
-
Vuejs的随笔录
VUE-CLI命令行1.npm install -g vue-cli2.vue init webpack my-project3.cd my project 4.npm install 5.npm run dev Vue:vue:组件的引入不必加大括号vue:组件的直接引入HTML文档时必须在vue实例元素内并且为闭合式:<any> </ any >,组件引用时不可使用驼峰...原创 2018-04-14 16:40:55 · 350 阅读 · 0 评论 -
vuex的使用
VUE + vuex的使用总结如下(查阅资料):写在前面本文旨在通过一个简单的例子,练习vuex的几个常用方法,使初学者以最快的速度跑起来一个vue + vuex的示例。学习vuex需要你知道VUE的一些基础知识和用法。相信点开本文的同学都具备这个基础。另外对vuex已经比较熟悉的大佬可以忽略本文。生成基于VUE的项目基于vue-cli脚手架生成一个vue项目常用npm命令:npm i vue-c...原创 2018-05-25 14:44:43 · 485 阅读 · 0 评论 -
Vue与ref属性与refs
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册实例:这里为了在create的时候引用DOM元素,先在DOM中使用ref标签进行了注册,然后便可以通过’this.$refs’再跟注册时的名称来...转载 2018-05-25 18:31:04 · 175265 阅读 · 6 评论 -
vue的路由和vuex的使用
我们使用vue-router及vuex时引入它们的方式是直接以<script src =“xxx”>的方式引入且就在一个文件中写。但是实际开发时,我们并不是这样操作的,一般我们会使用VUE-CLI脚手架。但是使用VUE-CLI的话,我们在引入VUE路由器及vuex时写法会稍有不同,这里我来举个通俗易懂的例子(每一步都很详细且代码中比较重要或者难以理解的地方我都注释出来了,希望对大家有所...转载 2018-05-25 19:19:12 · 6521 阅读 · 1 评论 -
vuejs的组件
组件的基本使用注册组件组件注册就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传入这个组件的配置。 Vue.component('mycomponent',{ template: `<div>这是一个自定义组件</div>`, data () { return { message: 'hello wor...转载 2018-05-22 19:04:40 · 253 阅读 · 0 评论 -
vue+elementUI多级菜单动态渲染组件
以下是组件代码:[HTML] 查看纯字幕: < template > < div class = “navMenu” > < label v-for = “navMenus中的navMenu” > < el-menu-item v-if = “navMenu.childs == nu...转载 2018-05-22 19:39:48 · 30069 阅读 · 8 评论 -
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
表头主要复杂在:1,有三层,一层是大类,第二层是具体项,第三层是标准值/对比值2,首列和末尾列是一层3,整个表格的维度是根据数据的输入自己生成,也就是动态的下面是在 vue + eleUI 中的解决方案:<el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...原创 2018-05-22 19:53:35 · 30025 阅读 · 2 评论 -
vue 中的cookie使用
一,安装饼干在Vue2.0下,这个貌似已经不需要安装了。因为当你创建一个项目的时候,npm install已经为我们安装好了。我的安装方式如下:# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project$ ...原创 2018-07-06 09:50:22 · 11530 阅读 · 1 评论 -
vue的响应式+data更新
关于数组使用数组变异方法对Vue实例中data里面的数组使用变异方法操作的时候,Vue可以检测到变化并进行更新变异方法包括push()pop()shift()unshift()splice()sort()reverse()非变异方法非变异方法因为不会直接改变原始数组,所以需要使用另外的方法,比如用新数组去替换原数组。用含有相同元素的数组去替换原来的数组是非常高效的操作var example1 = ...转载 2018-06-08 11:42:50 · 9137 阅读 · 0 评论 -
vue的坑
路由变化页面数据不刷新问题setTimeout/setInterval(泛指异步回掉函数的this指向)this指向改变,无法用this访问VUe实例setInterval路由跳转继续运行并没有及时进行销毁vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等实现vue路由拦截浏览器的需求,进行 一系列操作 草稿保存等等v-once 只渲染元素和组件一次,优化更新渲染性能vue本地代理配置 ...转载 2018-06-20 16:48:35 · 495 阅读 · 0 评论 -
vue+element UI 实现无限极分类(一)
简单的例子参考,参考别人的简书[ { "id": 1, "parent_id": 0, "menu_name": "第一级菜单 1", "sorting": 0, "node": [ { "id": 2,原创 2018-06-28 11:11:04 · 5236 阅读 · 2 评论 -
vue+element UI 实现无限极分类(二)
这是自己项目的经历,真是很复杂!!!大概记录一下代码的逻辑可以无限添加el-submenu 和el-menu-item<template> <div class='leftList' style=' overflow:auto'> <el-aside width="99%" style="background-color:#2c3e50;"> ...原创 2018-06-28 11:20:39 · 1554 阅读 · 1 评论 -
vue.set
一:在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。如下代码:<!DOCTYPE html><html><head><meta charset="utf...原创 2018-07-18 10:14:48 · 1542 阅读 · 0 评论 -
vue 里面的slot属性
总结如下:深入理解VUE中的槽与槽范围写在前面VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了VUE的说明文档。实际上,插槽的概念很简单,下面通过分三部分来讲,这三部分也是按照VUE说明文档的顺序来写的。进入这三部分之前,...转载 2018-05-25 14:11:09 · 159162 阅读 · 31 评论 -
vuejs的render方法使用
非使用渲染方法的情况完整代码:<!DOCTYPE html><html><head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>转载 2018-05-21 10:57:14 · 6733 阅读 · 1 评论 -
Vuejs框架的总结
前端知识点总结——Vue2018-04-15 web前端开发1.框架和库的区别框架(framework):有着自己的语法特点、都有对应的各个模块。库(library):专注于一点。框架的好处:提到代码的质量,开发速度提高代码的复用率降低模块之间的耦合度(高内聚低耦合)UI:user interfaceGUI:graphical user interfaceCLI:command line inte...转载 2018-04-15 10:52:33 · 3923 阅读 · 0 评论 -
vue全家桶
Vue全家桶实践项目总结从前端的角度看,Vue可以说是目前最理想的前端MVVM框架,一切为界面服务,上手难度低,本文就将记录使用Vue全家桶(Vue+Vue-router+Vuex)重构一个jQuery+template项目的过程,以及期间的收获。入门Vue的官方文档就是学习Vue的最佳教程,没有之一,可能因为框架作者是设计出身,没有后端背景,因此各种抽象概念在Vue里都得以用最容易理解的方式被恰...转载 2018-04-15 11:39:00 · 1555 阅读 · 0 评论 -
记录总结Vue+webpack的安装及配置
Web前端框架Vue+webpack搭建利用vue自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架。基本步骤,参考URL1. 在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/(默认全局安装node,npm,无需手动配置环境变量,即可全局使用node和n...原创 2018-04-17 17:15:30 · 4196 阅读 · 0 评论 -
vue组件之间的通信
VUE组件之间的传递数据是很重要,坑也很多,一,父组件向子组件传值1.创建子组件,在src / components /文件夹下新建一个Child.vue 2.Child.vue的中创建道具,然后创建一个名为message的属性child.png3.在App.vue中注册子组件,并在模板中加入子标签,标签中添加邮件属性并赋值App2.png4.保存修改的文件,查看浏览器browser.png5.我...原创 2018-05-09 13:58:05 · 2202 阅读 · 0 评论 -
v-model和v-bind
VUE的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{名称}}的形式,一种是v-绑定,还有一种是v模型{{名称}}的形式比较好理解,就是以文本的形式和实例数据中对应的属性进行绑定比如。:var app = new Vue({el:'#app',template:'<div @ click =“toggleName”&g...转载 2018-05-09 14:52:23 · 4114 阅读 · 1 评论 -
Vue单页面应用
总结如下: 单页面应用指一个系统只加载一次资源,然后下面的操作交互、数据交互是通过router、ajax来进 行,页面并没有刷新;<1>在vue搭建的环境里面怎么有没有公用的css和js?如果有是怎么引用的? 有公用的css和js,有两种引用的方法:(要深刻理解单页面应用程序哦,单页面就是引入后在哪里都能使用) 1.全局公共引用样式和js文件 ...原创 2018-04-25 13:58:59 · 16612 阅读 · 1 评论 -
实现返回上一级
1,vue里面实现返回上一级或返回VUE里面实现返回上一级:此$ router.back(-1);2,vuex的实现方式: 如果(这个。$商店。状态。previousRouter。名){ 这个。$路由器。推({ 名称: 此。$商店。状态。previousRouter。名称 }); }3,vuex的安装及使用: 项目报错如下:TypeError: Cannot read...原创 2018-05-10 15:16:19 · 5334 阅读 · 0 评论 -
Vue里面的v-if与v-show
在Vue的内部指令中,v-show与v-if的区别,总结如下:在Vue中,我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令(条件渲染)。这里所说的指令就是directive,指特殊的带有前缀v-的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。v-if 根据表达式的值true或false在...原创 2018-04-26 10:55:19 · 12045 阅读 · 0 评论 -
vue的路由嵌套
嵌套路由就是路由里面嵌套他的子路由子路由关键属性children每一个子路由里面可以嵌套多个组件子组件又有路由导航和路由容器<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link><!DOCTYPE html><html lang="en"><head> <转载 2018-05-04 10:15:27 · 304 阅读 · 0 评论 -
配置Vue的路由
在Vue环境中,找到index.js文件中 代码如下:import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'import FirstNode from '@/components/FirstNode'import introduce from '...原创 2018-04-26 14:09:58 · 359 阅读 · 0 评论 -
vuejs的标签和API总结
vuejs总结:vm指new Vue获取的实例 ①当dom标签里的值和data里的值绑定后,更改data对应的值可以实时更新标签里的值; 但后续添加的值是无效的(绑定失败)。 ②将可以将对象直接作为data的一个属性,是有效的(因为对象按值传递);所以该属性和该对象是全等的; ③vm的接口有:vm.$data是vm的data属性;vm.$el是el属性指向的dom结点;vm.$watch是监视属性...转载 2018-05-21 09:27:54 · 1756 阅读 · 0 评论 -
vuejs的路由功能
最简单的路由1,原理:通过控制父组件一个路由变量的值,来动态改变指向的组件;而被指向的组件又通过渲染方法被渲染到父组件中,因此当指向组件改变时,被渲染的组件也随之改变;因此,就相当于通过控制一个变量来实现了路由的效果;2,核心:通过渲染方法来写,比较优雅。事实上也可以通过模板标签来写,但这样写的话,就会像之前解释渲染方法的用处一样,会写很多额外的代码(通过V-如果写在标签里,来判断到底渲染哪个组件...转载 2018-05-21 10:28:56 · 5110 阅读 · 0 评论 -
vue使用的总结
一大块:1.Vuejs组件vuejs构建组件使用Vue.component('componentName',{ /*component*/ });这里注意一点,组件要先注册再使用,也就是说: Vue.component('mine',{ template:'#mineTpl', props:['name','title','city','con...转载 2018-07-18 10:24:51 · 593 阅读 · 0 评论