Vue学习笔记

vue学习笔记（五）

一、vue模块化开发所谓的模块化开发是指将不同的部分封装到不同的模块中，不再将所有的组件、路由等写在一个页面中。各模块各司其职，提高开发效率。使用vue-cli生成的项目目录里，我们主要关注src目录。1.main.js文件main.js是整个项目的入口文件，vue-cli自动生成的文件内容如下：importVuefrom'vue'importAppfrom'./App'importrouterf
间阳幕宾·2019-12-24 09:40

Vue学习笔记-数组操作

变异方法push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。pop()方法用于删除并返回数组的最后一个元素。shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。sort()方法用于对数组的元素进行排序。reverse()方
赵客缦胡缨v吴钩霜雪明·2019-12-24 04:37

Vue 学习笔记02 —— my-project 示例项目分析

通过Vue学习笔记01——开发环境搭建我们创建了一个my-project。我们需要对项目的结构进行了解才能更好的进行vue项目的开发。
Laughingg·2019-12-24 03:00

vue学习笔记（四）

一、vue-router1、简介我们经常使用vue开发单页面应用程序（SPA）。开发SPA过程中，路由必不可少，vue的官方推荐是vue-router。单页面应用程序看起来好像是一个页面，其实是在一个页面中切换不同的html部分，从而达到所谓的单页面,在这切换之中，就需要使用路由来实现不同的页面内容的展现。2、基本用法（1）.使用步骤vue-router的基本使用步骤如下：定义需要切换的组件配置路
间阳幕宾·2019-12-23 19:58

vue学习笔记（二）

一、vue生命周期vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。beforeCreate(){//组件实例刚刚创建，还未进行数据观测和事件配置},created(){//实例已经创建完成，并且已经进行数据观测和事件配置},beforeMount(){//模板编译之前，还没挂载},mounted(){//模板编
间阳幕宾·2019-12-20 04:56

Vue学习笔记（一）

Vue是什么Vue是一套用于构建用户界面的一个渐进式框架。“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？Vue具有很多特点和Web开发中常见的高级功能，如：解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOMVue与其他库/框架的区别：与Vue的对比Vue的安装方式下载与引入开发版本生产版本CDN#开发环境版本：包含有帮助的命令行警告#生产环境版本：优化了大小和速度#对于生产环境
LqZww·2019-12-20 00:00

Vue学习笔记入门篇——组件的通讯

本文为转载，原文：Vue学习笔记入门篇——组件的通讯组件意味着协同工作，通常父子组件会是这样的关系：组件A在它的模版中使用了组件B。
ChainZhang·2019-12-19 13:03

Vue学习笔记Day2

1、mustache语法如何将data中的文本数据插入到HTML中？通过使用mustache语法(也就是双大括号)，将data中的变量名插入到HTML元素中，显示在页面上。如下图：并且数据是响应式的，只要修改了data中的数据，都可以自动更新到HTML元素中并渲染在页面上。2、v-once指令一般情况下可以使用mustache语法将data中的数据插入到HTML元素中渲染到页面上，但是在某些情况下
安定-·2019-12-17 17:00

Vue学习笔记3

Class与Style绑定绑定HTMLClass1.对象语法varvm=newVue({el:'#app',data:{isActive:true,hasError:true}绑定的数据对象可以不用内联定义在模板里，可以如下定义：varvm=newVue({el:'#app',data:{classObject:{active:true,'text-danger':true}}})2.数组语法我们
qfstudy·2019-12-17 05:38

Vue学习笔记Day1

1、vue初时vue安装三种方式：1：CDN引入以下推荐国外比较稳定的两个CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。StaticfileCDN（国内）:https://cdn.staticfile.org/vue/2.2.2/vue.min.jsunpkg：https://unpkg.com/vue/dist/vue.js,会保持和npm发布的最新的版本一致。cdnjs:https
安定-·2019-12-16 13:00

Vue学习笔记Day1

1、vue初时vue安装三种方式：1：CDN引入以下推荐国外比较稳定的两个CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。StaticfileCDN（国内）:https://cdn.staticfile.org/vue/2.2.2/vue.min.jsunpkg：https://unpkg.com/vue/dist/vue.js,会保持和npm发布的最新的版本一致。cdnjs:https
安定-·2019-12-16 13:00

Vue学习笔记进阶篇——Render函数

本文为转载，原文：Vue学习笔记进阶篇——Render函数基础Vue推荐在绝大多数情况下使用template来创建你的HTML。
ChainZhang·2019-12-16 08:53

VUE学习笔记005 动态绑定class v-bind:class{changeColor:true,changeLength:true}

style.css内容.changeColorspan{background:green;}.changeLengthspan:after{content:'length';margin-left:10px;}定义class的css是用点：“.”，如.footer/////////定义id的css是用井号“#”，如#footerHenry#####################newVue({e
梦想_15eb·2019-12-15 12:43

vue学习笔记（一）

computed(计算属性)vsmethods计算属性与方法的对比两者可以相互替代，最终结果都是一样的，不同的是计算属性基于它的依赖缓存，计算属性只有它的依赖发生改变时才会从新取值，即时num不放生改变，即直接取值，多次访问则直接从缓存取值，不会重新计算。相比之下methods在每次重新渲染时，总会重新执行函数//jsvarvm2=newVue({el:'#exa2',data:{num:3},/
zhifeichuan·2019-12-15 10:42

Vue学习笔记之搭建vue项目

一、安装node环境1、下载地址为：https://nodejs.org/en/2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功image3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/输入：npminstall-gcnpm–registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到np
赵客缦胡缨v吴钩霜雪明·2019-12-14 23:43

vue学习笔记(十)路由

前言在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中，我们学习组件通信的相关内容和进行了一些组件通信的小练习，相信大家已经掌握了vue-cli中的组件通信，而本篇博客将会带你更上一层楼，
一只流浪的KK·2019-12-14 22:00

「Vue学习笔记」学习Vue响应式原理

太久没有拓展自己的知识，这次从简单的Vue响应式开始。以下是简单的模拟一个利用Object.defineProperty方法进行数据绑定，实现响应式的方法。//dependency订阅者收集//用于收集属性的订阅者classDep{constructor(){this.subs=[];}addSub(sub){this.subs.push(sub)}//通知订阅者notify(){this.sub
这名字真不对·2019-12-14 04:01

Vue学习笔记一：Vue基础环境搭建及相关文件说明

一、前言说明去年有个项目有用到Vue，当时太忙一直没有总结。今年下半年再次使用Vue时竟有些生疏，故还是写成博客记录之，以便日后再来看时能迅速记起。首先要安装webpack、nodejs。npm是node的包管理工具，其服务器在国外，有时候安装依赖会很慢，可以安装cnpm（淘宝的npm镜像），其安装步骤为：（1）cmd下直接安装：npminstall-gcnpm--registry=https:/
爱睡懒觉的老舅·2019-12-12 11:10

Vue学习笔记进阶篇——单元素过度

本文为转载，原文：Vue学习笔记进阶篇——单元素过度概述Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。
ChainZhang·2019-12-12 01:32

vue学习笔记-写一个todolist

相信很多前端小盆友在刚刚过去的2016年都看到过这样一片文章在2016年学JavaScript是一种什么样的体验？图片来源于网络确实在刚刚过去的一年前端方面涌现出许多新鲜的技术或者许多技术在社区取得了巨大的发展进步,社区资料显示出2016年最流行的前端框架是Vue.JS,因为公司项目没有涉及所以也没有深入了解,文档读了许多遍还只停留在前几节(惭愧状-_-||)心塞塞最近趁年后回来公司没什么任务好好
牛油果大虾·2019-12-12 00:48

Vue学习笔记之路由（二）

vue路由的使用vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性，一共包含6个
赵客缦胡缨v吴钩霜雪明·2019-12-08 15:08

vue学习笔记

安装nodejs官网：https://nodejs.org/en/download/安装cnpm：npminstall-gcnpm--registry=https://registry.npm.taobao.org安装webpackcnpminstallwebpack-g安装vue-cli安装：cnpminstall--globalvue-cli升级到3.0：cnpmi-g@vue/cli创建el
禾白小三飘·2019-12-08 07:04

Vue学习笔记进阶篇——函数化组件

本文为转载，原文：Vue学习笔记进阶篇——函数化组件介绍之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个接收参数的函数。
ChainZhang·2019-12-06 17:58

vue学习笔记1：vue的认识与特点与获取

Vue了解Vue：读作viewVue是一个渐进式框架与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。关于渐进式：意味着你可以把vue作为应用的一部分嵌套进去，带来更丰富的交互体验或者如果你希望将更多的业务逻辑使用vue来实
wbytts·2019-12-03 08:00

Vue学习笔记（八）：指令的本质

v-textv-html:XSS潜在风险v-show:display:nonev-ifv-else-if:不能单独存在v-else:不能单独存在v-forv-onv-bindv-modelv-slotv-pre:绕过{{}}编译过程。直接输出字符串v-cloak：使用频率很低v-once：用于性能优化语法糖：标志位自定义指令生命周期：bindinsertedupdatecomponentUpdat
smartHui·2019-12-02 04:10

老司机读书笔记——Vue学习笔记

Vue学习笔记这篇文章你将看到以下内容：一个iOS开发视角学习Vue需要学习的一些知识点Vue实例结构varvm=newVue({//样式表名el:'#example',//属性data:{message
老司机Wicky·2019-12-01 20:38

vue学习笔记(九)vue-cli中的组件通信

前言在上一篇博客vue学习笔记(八)组件校验&通信中，我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信)，上一篇博客也提到那是对组件内容的刚刚开始，而本章博客将会重点的讲解
一只流浪的KK·2019-12-01 11:00

XBoot Vue学习笔记

XBootVue学习笔记post请求this.postRequest('/stageTemplate/getFrontStages',{project_id:v}).then(res=>{if(res.success
I_Gisvity·2019-12-01 01:25

Vue学习笔记：计算属性

使用函数的缺点如果我们想要将数据经过转化后再显示，或者多个数据结合起来进行显示，一般可以直接在数据渲染或者数据绑定的时候书写表达式如果表达式过于复杂，或者逻辑太多的时候，我们可以将其封装在函数里，写在methods选项里而，使用函数的话，每次调用都会重新计算一次，对于不经常改变的数据，使用函数会特别影响性能计算属性的简单使用将数据经过处理再显示出来，我们可以使用计算属性computed：计算属性是
wbytts·2019-12-01 01:00

Vue学习笔记：v-bind 属性动态绑定

v-bind的作用v-bind指令可以将节点的属性与动态表达式绑定在一起v-bind可以绑定html元素中的各种属性例如：xxx可以是data里的变量，也可以是函数等等语法糖v-bind可以简写成:即v-bind:xxx简写成:xxxclass属性动态绑定常见的写法：class可以绑定一个放着类名的数组，也可以绑定一个对象，或者对象也可以放在数组中对象中，键表示类名，值表示这个类是否进行启用对象语
wbytts·2019-11-30 18:00

vue学习笔记：数据渲染操作

{{xxx}}基本的插值表达式插值表达式使用两个大括号{{data中定义的数据名}}可以将数据插入到指定的位置这种写法不仅可以显示data属性里定义的值，也可以书写js中的表达式，可以使用methods中定义的函数等等其他数据渲染指令v-text：指定元素的内容（纯文本）v-html：指定元素的内容（解析html）v-pre：用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语
wbytts·2019-11-30 18:00

vue学习笔记：Hello Vue

编写简单例子，了解下基本语法{{message}}varvm=newVue({el:'#app',data:{message:"HelloVue!"},});在上述的代码里面，js脚本的地方，创建了一个Vue对象，其中el选项置顶了这个Vue对象管理的元素的id在app元素中，使用{{message}}的方式引用了定义在vue实例中的data属性里的变量值，并显示出来
wbytts·2019-11-30 18:00

vue学习笔记(八)组件校验&通信

前言在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件，并学会了如何定义局部组件和全局组件，上一篇内容仅仅只是对组件一个简单的入门，并没有深入的了解组件当中的其它机制，本篇博客将会带大家深入了解组件的其它知识
一只流浪的KK·2019-11-30 16:00

2018-05-VUE学习笔记

主要使用：vue官方文档basis声明式渲染特点：响应式（reactive）,在控制台改变参数的值，会同时更新在页面上,唯一例外是使用Object.freeze(),阻止响应追踪条件与循环指令：v-if,v-for处理用户输入指令：v-on（事件监听器）,如：v-on:click="oneMethod"组件化应用构建对此概念理解不深尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更
文袁·2019-11-29 18:18

vue学习笔记(七)组件

前言在前面vue的一些博客中，我们几乎将vue的基础差不多学习完了，而从本篇博客开始将会进入到vue的另一个阶段性学习，本篇博客的内容在以后的vue项目中占很大的比重，所以小伙伴们需要认真学习，本篇博客的内容也比较简单，看过我博客的人都知道我所写的每一篇博客都是非常的详细的，所以大家不要担心学不会。我会尽量将所学的知识讲解的通俗易懂，让大家学习起来更加快乐，那么一起来看看吧！本章目标学会使用全局组
一只流浪的KK·2019-11-28 21:00

Vue学习笔记进阶篇——列表过渡及其他

本文为转载，原文：Vue学习笔记进阶篇——列表过渡及其他本文将介绍Vue中的列表过渡，动态过渡，以及可复用过渡是实现。
ChainZhang·2019-11-28 03:16

Vue学习笔记:Vuex

为什么需要Vuex管理共享状态解决一份数据在多个组件中试用的困难系统化的状态管理，区别于小型状态过来底层设计模式：全局单例模式应用场景适合中大型项目；小项目反而会因为引入更多概念和框架而带来复杂性Vuex运行机制下图和state->vue->action流程差不多，只是多了个Mutations，用于Devtools监控调试。改图必须牢记。方能在后续编码中熟练运用。如何在Vue中使用Vuex准备工作
张飞洪[厦门]·2019-11-26 09:00

Vue学习笔记:提升开发效率和体验的常用工具

Vetur用途：语法高亮标签补全，模板生成Lint检查格式化vscode环境配置文件文件-->首选项-->搜索veture（找不到需要自行安装）-->在setting.json中编辑配置文件代码如下：{"extensions.ignoreRecommendations":false,"team.showWelcomeMessage":false,"git.enableSmartCommit":tr
张飞洪[厦门]·2019-11-23 13:00

Vue学习笔记:Vue组件的核心概念(下)

1.双向绑定和单向数据流：本质上还是单向数据流视图数据v-model：仅仅是一个简写，用更少代码去实现功能。自定义事件.sync修饰符2.虚拟DOM及KEY属性作用jquery:vue:virtualdom新旧DOM树比较同层级比较：节点移动不带Key移动带Key移动插入有KEY(性能高)节点删除新建（算法因为同层级策略，无法达到最优解）3.如何触发组件更新数据驱动任何修改DOM的行为都是在作死！
张飞洪[厦门]·2019-11-19 09:00

vue学习笔记(五)条件渲染和列表渲染

前言在众多的编程语言中，我们的基础语法总是少不了一些专业语法，比如像定义变量，条件语句，for循环，数组，函数等等，vue.js这个优秀的前端框架中也有同样的语法，我们换一个名词，将条件语句改成专业词汇叫做条件渲染，循环语句改成专业词汇叫做列表渲染，这样比较舒服一点。本章目标学会条件渲染的使用学会可复用的key的使用学会列表渲染的使用条件渲染1.v-if的使用成绩为Aletvm=newVue({e
一只流浪的KK·2019-11-17 11:00

vue学习笔记（三）： 启动说明

1、启动页面：index.htmlhcmanage其中是用于挂载页面的2、启动js:main.jsimportVuefrom'vue'//引入vue.jsimportAppfrom'./App'//引入App.vueimportrouterfrom'./router'//引入router下的所有路由import'./plugins/element.js'//引入element-uiVue.conf
宙冰·2019-11-15 21:00

vue学习笔记（一）： 建立 vue-cli 初始网站

在安装vue-cli之前，要先安装node.js这个大家百度一下就可以了1、安装vue-clinpminstall-g@vue/cli-init2、初始化一个项目，名为hcmanage,并选择使用webpack打包方式vueinitwebpackhcmanage3、切换到hcmanage目录下cdhcmanage最终生成的网站文档结构如下4、启动hcmanage网站npmrundev执行结果如下：
宙冰·2019-11-15 18:00

Vue学习笔记

简介Vue.js是一套构建用户界面的渐进式框架，Vue只关注视图层，采用自底向上增量开发的设计，Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件创建vue项目vueinitwebpackvue_demoProjectname（工程名）:回车Projectdescription（工程介绍）：回车Author：作者名Vuebuild（是否安装编译器）:回车Installvue-r
小夏陌·2019-11-15 16:45

Vue学习笔记:Vue组件的核心概念(上)

一、组件基础和注册组件概念组件系统是Vue的另一个重要概念，他的核心就是封装和复用。细节组件的name必须是全局唯一。二、属性、事件和插槽组件的三大核心概念：属性、事件和插槽。属性，事件，插槽好文1.属性1.1导言vue组件=vue实例=newVue(options)不同的组件只不过是options的不同，90%的工作都是围绕配置options来进行1.2分类2.事件事件冒泡阻止事件冒泡3.插槽分
张飞洪[厦门]·2019-11-14 09:00

Vue学习笔记:基础篇之vue入门

为了建立高效团队，很多公司会采用全栈工程师，虽然利弊兼有，对于成本优先的创业团队，肯定是首选，特别是对.net生态圈，大部分都是小公司，就更加重要了。这里记录的是对vue的学习点滴，希望对你有所助力。1.简介更加轻量20kbmin+gizp渐进式框架【按需学习】响应式更新机制【数据驱动】学习成本低官网官网教程git学习资料2.内容介绍基础篇：Vue核心知识点生态篇：大型Vue项目所需的周边技术实战
张飞洪[厦门]·2019-11-13 08:00

Vue学习笔记(五)——配置开发环境及初建项目

前言在上一篇中，我们通过初步的认识，简单了解Vue生命周期的八个阶段，以及可以应用在之后的开发中，针对不同的阶段的钩子采取不同的操作，更好的实现我们的业务代码，处理更加复杂的业务逻辑。而在这一篇中，我们将通过配置vue的开发环境以及搭建项目，进一步的学习vue在开发中的使用方式。对于开发vue项目之前，我们需要进行vue环境配置，大致的将需要用到的工具进行归类总结如下：（可能还有其他的工具，或者配
艾三元·2019-11-10 09:00

vue学习笔记-遗留问题记录

Node.js是什么？对node.js的理解官网解释：Node.js是一个基于ChromeV8引擎的JavaScript运行时。这是一种通过JavaScript语言开发web服务端的东西Node是一个服务器程序。但是，基础Node产品肯定不像Apache或Tomcatnode.js有非阻塞，事件驱动I/O等特性，从而让高并发（highconcurrency）在的轮询（Polling）和comet构
taoweidong·2019-11-08 05:37

vue学习笔记(一)入门

前言随着前端不断的壮大，许多公司对于前端开发者的需求也越来越多了，作为一名优秀的前端工程师，如果连vue和react都不会的话，那真是out了，为什么那么说呢？这是我在招聘网站上截的一张图，十家公司有九家都是需要对vue或者react熟悉，当然仅仅熟悉肯定是不够的，毕竟掌握住了才能保住自己的铁饭碗，否则的话可能会被炒鱿鱼，精通vue或者react话就可能就需要很长时间了，反正我是不敢说精通，只能说
一只流浪的KK·2019-11-07 00:00

vue学习笔记-遗留问题记录

Node.js是什么？对node.js的理解官网解释：Node.js是一个基于ChromeV8引擎的JavaScript运行时。这是一种通过JavaScript语言开发web服务端的东西Node是一个服务器程序。但是，基础Node产品肯定不像Apache或Tomcatnode.js有非阻塞，事件驱动I/O等特性，从而让高并发（highconcurrency）在的轮询（Polling）和comet构
Taowd·2019-11-06 21:00

vue学习笔记之指令v-text && v-html && v-bind详解

一：指令的概念：指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能二：指令的语法：v-指令名=“表达式判断或者是业务模型中属性名或者事件名”三：具体指令v-text作用：操作元素中的纯文本快捷方式：{{}}栗子1简写形式：将v-text=""换成{{}}{{message}}varapp=newVue({el:'#app',data:{message:'hellow
zhangjingbibibi·2019-11-05 06:22
上一页 16 17 18 19 20 21 22 23 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他