Vue学习笔记

vue学习笔记

.$data.#$el$data表示vue实例中data的值$el表示vue实例中el的值,注意el效果等同getElementById.遇到多个同样classname，只处理第一个{{a}}//此处值为1{{a}}{{a}}vardata={a:1}varvm=newVue({el:'.box',data:data})vm.$data===data//=>truevm.$el===documen
李诺哦·2020-02-19 17:12

vue学习笔记

1.router使用方法：step1项目引入：importVuefrom'vue';importVueResourcefrom'vue-resource';Vue.use(VueResource);//注意这一步，要将两者关联起来step2常用配置：mode:访问路径的带不带#号hash-带history-不带base:基路径，如'/page/app'routes:路由列表routes.path-
花泽香个菜菜·2020-02-19 06:37

vue学习笔记-事件监听

最简单的点击事件Add1Thebuttonabovehasbeenclicked{{counter}}times.varexample1=newVue({el:'#example-1',data:{counter:0}})点击button一次。触发时运行一些JavaScript代码即counter+1并更新uiv-on:click执行一个方法的方式：Greetvarexample2=newVue(
听着music睡·2020-02-17 20:00

vue学习笔记-列表渲染

{{item.message}}varexample1=newVue({el:'#example-1',data:{items:[{message:'Foo'},{message:'Bar'}]}})效果：FooBar{{parentMessage}}-{{index}}-{{item.message}}varexample2=newVue({el:'#example-2',data:{paren
听着music睡·2020-02-17 19:00

vue学习笔记之数据驱动

1、数据驱动是什么vue.js的核心思想是数据驱动页面，所谓数据驱动，就是页面上的dom结构由数据的映射产生，开发项目的过程中，我们不需要去管界面的渲染，只需要集中精力管理数据的修改。最经典的例子创建一个vue的实例：当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。关于数据驱动界面，值得注意的点
zzzyZhang·2020-02-17 08:59

vue学习笔记-条件渲染

v-if最基本的条件渲染Vueisawesome!if-else的渲染Vueisawesome!Ohno注：v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。v-else-ifABCNotA/B/C渲染分组TitleParagraph1Paragraph2
听着music睡·2020-02-15 13:00

vue学习笔记-常用指令

v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。v-html内容按普通HTML插入-不会作为Vue模板进行编译双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html{{msg}}Usingmustaches:{{rawHtml}}varvm=newVue({el:"#app",da
听着music睡·2020-02-15 11:00

Vue学习笔记（双向数据绑定、样式、v-for遍历、v-if和v-show显示隐藏元素） 2020/2/14

一、v-model（1）概念v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定使用v-model指令，可以实现表单元素和Model中数据的双向数据绑定注意：v-model只能运用在表单元素中例如：input(radio,text,address,email…)selectcheckboxtextarea（2）案例（使用v-model实现简易计算器）+-*/varvm=ne
梦想是成为工程师·2020-02-14 18:45

vue学习笔记

title:vue.js学习笔记(一)date:2018-03-2819:09:16tags:vue.js前端javascript指令指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。v-if条件判断TitleParagraph1Paragraph2元素当做不可见的包裹元素ABNotA/B/Cv-if是惰性的：如果在初
这是这时·2020-02-14 16:23

Vue学习笔记实战篇——音乐播放器 · 整体布局

本文为转载，原文：Vue学习笔记实战篇——音乐播放器·整体布局创建项目使用vue-cli脚手架工具在自己指定的目录创建项目chain-vue-music，命令如下：vueinitwebpackchain-vue-music
ChainZhang·2020-02-13 21:27

vue学习笔记-生命周期

beforeCreate在实例初始化之后，数据观测(dataobserver)和event/watcher事件配置之前被调用。created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(dataobserver)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前尚不可用。beforeMount在挂载开始之前被调用：相关的render函
听着music睡·2020-02-13 20:00

Vue学习笔记（一）

一、Vue.js介绍Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。Vue有以下特点：是一个构建用户界面的框架是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似数据驱动+组件化的前端开发（核心思想）通过简单的API实现响应式的数据绑定和组合的视图组件更容易上手、小巧参考：官网文档二、第一个vue程序{{ms
间阳幕宾·2020-02-13 17:11

Vue学习笔记

序言：乱七八糟一锅粥！基于Vue.js教程、介绍—Vue.jsvue-lifecycle.png心得：在vue中，推荐始终使用kebab-case的事件名，因为html对大小写不敏感，也就是说，默认会转为全小写。其他像组件名等也使用kebab-case。浏览器渲染次数越少肯定性能越高v-html是解析成html，而大括号是解析成字符串。“Mustache”语法(双大括号)所谓的模板应该就是html
苦苦修行·2020-02-12 19:57

Vue学习笔记进阶篇——多元素及多组件过渡

本文为转载，原文：Vue学习笔记进阶篇——多元素及多组件过渡多元素的过渡对于原生标签可以使用v-if/v-else.但是有一点需要注意：当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让
ChainZhang·2020-02-12 05:38

Vue学习笔记之五Vue生命周期

5.Vue生命周期所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created:()=>this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同，this.fetchTodos的行为未定义。5.1生命周期图示Vueå®�ä¾�ç��å�½å�¨æ��
聽見下雨的_聲音·2020-02-08 12:19

Vue学习笔记

第一节：##1.下载Vue2.0的两个版本：##3官方网站：http://vuejs.org/开发版本：包含完整的警告和调试模式生产版本：删除了警告，进行了压缩2.项目结构搭建：image.png3、live-server使用用npm进行全局安装npminstalllive-server-g在项目目录中打开live-server4、编写第一个HelloWorld代码HelloworldHelloW
落魂灬·2020-02-06 01:00

Vue学习笔记-富文本编辑器wangEditor

最近开发Vue项目，想要一个功能更全面的编辑器，我找了好久，目前常见的编辑器有这些：UEditor：百度前端的开源项目，功能强大，基于jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲，并且比较重。bootstrap-wysiwyg：微型，易用，小而美，只是Bootstrap+jQuery...kindEditor：功能强大，代码简洁，需要配置后台，而且好久没见更新了。quill
赵客缦胡缨v吴钩霜雪明·2020-02-06 00:33

Vue学习笔记进阶篇——过渡状态

本文为转载，原文：Vue学习笔记进阶篇——过渡状态Vue的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。
ChainZhang·2020-02-05 01:00

Vue学习笔记(十三) 响应式原理

1、外在表现响应式系统是Vue的核心特性之一，它的实质其实就是当数据模型发生变化时，视图将会自动更新这样可以避免开发人员直接操作DOM，大大降低开发难度，这也是Vue提倡数据驱动的原因，我们看一个例子DemoCounter:{{counter}}IncreaseDecreasenewVue({el:'#app',data:{counter:0},methods:{increase:function
wsmrzx的博客·2020-02-04 00:00

vue学习笔记之过滤器的基本使用方法实例分析

本文实例讲述了vue学习笔记之过滤器的基本使用方法。
Rachel~Liu·2020-02-01 12:31

vue学习笔记之slot插槽基本用法实例分析

本文实例讲述了vue学习笔记之slot插槽基本用法。
Rachel~Liu·2020-02-01 12:47

vue学习笔记之作用域插槽实例分析

本文实例讲述了vue学习笔记之作用域插槽。
Rachel~Liu·2020-02-01 12:44

Vue笔记（有点乱）

Vue学习笔记(2019.7.31)目录Vue学习笔记(2019.7.31)vue基本指令用法v-cloakv-textv-htmlv-bindv-on跑马灯v-onv-modelclassv-forkeyv-ifv-showfilter
garxirapper·2020-01-31 22:00

Vue学习笔记-生命周期与钩子函数

vue生命周期简介生命周期探究{{message}}varapp=newVue({el:'#app',data:{message:"xuxiaoisboy"},beforeCreate:function(){console.group('beforeCreate创建前状态===============》');console.log("%c%s","color:red","el:"+this.$el
赵客缦胡缨v吴钩霜雪明·2020-01-16 10:55

vue学习笔记之动态路由匹配

1、我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用“动态路径参数”(dynamicsegment)来达到这个效果：constUser={template:'User'}constrouter=newVueRouter({routes:[//动态路径参数
WebKoalaBoy·2020-01-14 15:25

Vue学习笔记（基础篇一）

最近在学习Vue，我觉得学习最好的方式就是把自己的学习过程记录下来，我也是参考Vue官方文档来学习的。学习一门新技术，最好的还是参考官方的文档。我也把学习过程中的代码上传到了github，并且加了动图来展示运行效果，这样看起来或许会更加直观易懂一些。本文示例代码下载Vue的声明式渲染下面是最简单的一个Vue声明式渲染的例子，只需要在html文件中引入vue的js文件。然后敲下以下代码，你就成功创建
KyreeMeng·2020-01-14 10:54

vue学习笔记之生命周期函数和vue-resoruce

生命周期函数什么是生命周期？从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；生命周期钩子=生命周期函数=生命周期事件主要的生命周期函数分类创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性created：实例已经在内存中创建OK，此时data和
努力，就对了·2020-01-12 09:00

vue学习笔记——vue-router

1.什么是前端路由？前端路由是根据不同的URL地址显示不同的内容或页面。2.什么时候使用前端路由？在单页面应用时，大部分页面结构不变，只改变部分内容的时候应用。SPA：单页web应用，就是只有一张web页面的应用，是加载单个HTML页面并在用户与应用程序交互时，动态更新的web应用程序。3.vue前端路由——vue-routervue-router是用来构建SPA（singlepagewebapp
西瓜已经被占用·2020-01-08 20:34

从零开始的vue学习笔记（一）

数据与方法当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。data的数据和视图同步更新。实例创建后添加一个新的属性，对这个属性的的改动将不会触发任何视图的更新。如果需要一个属性，但是一开始它为空或不存在，仅需要设置一些初始值。Object.freeze()方法可以阻止修改现有的属性除了数据属性，Vue实例还包含实例属性与方法，前缀为$，例如：vm.$data，v
西街二叔·2020-01-08 12:00

Vue学习笔记

1、vue可以绑定文本，也可以绑定dom元素、{{message}}和v-bind:title="message"。其中v-bind属性称为指令。指令带有v-前缀，表示将这个元素节点的title属性和vue实例的message属性保持一致。2、v-on指定一个事件监听器。v-model指定来实现表单输入和应用状态之间的双向绑定。3、每个vue实例都会代理其data对象里的所有的属性。如果实例创建之
cleaner_wei·2020-01-08 04:30

vue学习笔记（一）

1.计算属性vs模板表达式模板只能处理简单运算，在模板中多次引用应该使用计算属性computedvsmethods结果相同，但是计算属性是基于它们的依赖进行缓存的，只有相关依赖发生改变时它们才会重新求值；每当触发重新渲染时，调用方法将总会再次执行函数vswatch监听属性watch代码重复计算属性的getter计算属性默认只有getter，因为一般为展示元素，也可以提供setter2.监听器wat
星月西·2020-01-07 23:29

vue学习笔记-前端

一、一些前端必备知识
LazyPet·2020-01-07 22:00

vue学习笔记es6中的箭头函数

//箭头函数：是一种定义函数的方式//当我们需要把一个函数作为返回值传给一个函数时通常会用到箭头函数//两个参数constsum=(num1,num2)=>{returnnum1+num2;}//一个参数的时候是可以省略括号的constfun=(num)=>{returnnum*num}constfun2=num=>{returnnum*num}//函数中的代码情况2//多行代码consttest
LazyPet·2020-01-07 20:00

vue学习笔记vuecli3,4

一、下载vuecli直接npminstall-g@vue/cli下载即可同时依赖于vue和vue-template-compiler这两个的版本必须一样，不然会无法构建项目可以通过npmlistvue来查看vue的版本通过vue-V查看vue-cli的版本二、使用vue构建项目直接在终端输入vuecreatemy-project（你的项目名称）三、vue-cli的配置终端输入vueui即可进入可视
LazyPet·2020-01-07 19:00

vue学习笔记runtime-only和runtime-compiler

一、vue内部过程1.首先将vue中的模板进行解析解析成abstractsyntaxtree（ast）抽象语法树2.将抽象语法树在编译成render函数3.将render函数再翻译成virtualdom虚拟dom4.将虚拟dom显示在浏览器上二、runtime-only和runtime-compiler的区别runtime-only比runtime-compiler更快，因为它省略了vue内部过程
LazyPet·2020-01-07 15:00

Vue学习笔记进阶篇——vuex安装及使用

本文为转载，原文：Vue学习笔记进阶篇——vuex安装及使用简介Vuex是一个专为Vue.js应用程序开发的状态管理模式。
ChainZhang·2020-01-06 23:25

vue学习笔记(5)：filter过滤器，padStart/End，按键修饰符

data{msg:'曾经，我也是一个单纯的少年，单纯的我傻傻的问，谁是世界上最单纯的男人'}1.filter:过滤例子：varnewList=this.list.filter(item=>{if(item.name.includes(keywords))returnitem;})注意：es6中，为字符串提供了一个新方法，叫做String.prototype.includes("要包含的字符串")，
不会改变·2020-01-03 12:50

vue学习笔记

1.vuedata属性里面的getter和setterdata的每个属性都有两个相对应的get和set属性。ES5的对象原型有两个新的属性__defineGetter__和__defineSetter__，专门用来给对象绑定get和set。可以这样书写：vue双向绑定原理是由数据劫持结合发布者-订阅者模式实现的。vue的数据劫持是通过Object.defineProperty()来对对象的sett
GXW_Lyon·2020-01-03 03:27

vue学习笔记(六)表单输入绑定

前言在上一章vue学习笔记(四)事件处理器这一篇博客的内容中，我们已经了解vue是如何绑定事件的，而本篇博客主要讲解的是vue中表单输入的绑定，通常我们自己提交信息的时候都是通过表单将信息到服务器的，例如登陆
一只流浪的KK·2020-01-03 00:00

vue学习笔记(四)事件处理器

前言在上一章vue学习笔记(三)class和style绑定的内容中，我们学习了如何在vue中绑定class和style，介绍了常用的绑定方法，class的数组绑定和对象绑定以及style的数组绑定和对象绑定
一只流浪的KK·2020-01-02 22:00

Vue学习笔记02：目录结构分析 绑定数据 绑定对象 循环数组渲染数据

vue项目结构其中node_modules是我们项目所需的各种依赖，src是我们开发时候所需的一些资源，package.json是我们的配置文件管理项目的各种配置以及版本号和名称，readme是项目的说明文件。我们主要编写的是src里面的文件，assets是存放静态的资源文件，App.vue是存放的根组件，组件vue中所有的内容要被一个根节点包含起来，我写了示例代码包含了对数据、数组、对象以及对象
gardenlike2·2020-01-01 00:38

vue学习笔记(三)class和style绑定

前言通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数，我们已经更近一步的知道了关于vue的一些知识，本篇博客将进一步探讨vue其它方面的内容，vue中关于class和style绑定，关于class
一只流浪的KK·2019-12-30 16:00

vue学习笔记(二)vue的生命周期和钩子函数

前言通过上一章的学习，我们已经初步的了解了vue到底是什么东西，可以干什么，而这一篇博客主要介绍vue的生命周期和它常用的钩子函数，如果有学过java的园友可能有接触到在学习servlet的时候学过servlet的生命周期servlet加载--->实例化--->服务--->销毁,对于vue的而言他也有自己的生命周期，那么一起来看看吧！本章目标学会并了解vue的生命周期和钩子函数学会使用手动挂载和调
一只流浪的KK·2019-12-29 14:00

vue学习笔记--组件的命名方式及注意点

一、组件名命名方式：帕斯卡命名方式：ComponentName短横线分隔：component-name使用自定义元素的时候，两种命名方式都允许，但是当应用到dom的时候，应该使用短横线分割命名方式。如下，两种命名方式都是正确的：图一：image.png图二：image.png但是应用到dom应该使用短横线分割命名方式，否则就会报错：代码片段：image.png报错内容：image.png在自定义事
一个总在代码里给自己下毒的小白·2019-12-29 14:16

Vue学习笔记之条件渲染

上一篇：Vue学习之Class与Style绑定v-ifYes也可以用v-else添加一个“else块”：YesNo在元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含元素。TitleParagraph1Paragraph2v-elsev-else元素必须紧
aitality·2019-12-29 06:11

Vue学习笔记

一、常用网址https://cn.vuejs.org/v2/api/#vm-emit官网APIhttp://www.i7758.com/archives/2684.htmlvue开源项目汇总http://mint-ui.github.io/docs/#/zh-cn2mint-ui文档二、个人收藏网址https://segmentfault.com/a/1190000007480285项目起手htt
sailor4518·2019-12-28 10:11

Vue学习笔记（二）

计算属性模板内的表达式非常便利，如果在模板中放入太多的逻辑并且多次引用会让模板过重且难以维护，所以在此时应当使用计算属性。基本使用具体代码：{{name+''+age+'岁'}}{{info}}constapp=newVue({el:'#app',data:{name:'zww',age:20},computed:{info(){returnthis.name+''+this.age+'岁'}}}
LqZww·2019-12-26 17:00

vue学习笔记

vue:读音:v-u-eviewvue到底是什么?一个mvvm框架(库)、和angular类似比较容易上手、小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuejs.org/手册：http://cn.vuejs.org/api/vue和angular区别?vue——简单、易学指令以v-xxx一片html代码配合上json，在new出来vue实例个人维护项目适合:移动端项目,小巧v
smallBear·2019-12-26 11:05

Vue学习笔记Day04

1、组件化开发创建组件构造器：组件标题组件内容consttestComponent=Vue.extend({template:'模板名'}):Vue.extend()是一个组件构造器函数，template是自定义组件模板注册组件：Vue.component=('cpn',testComponent);cpn是自定义标签，在调用该组件时直接在html中插入该标签即可，组件调用必须在挂载的vue实例下
安定-·2019-12-24 21:00

Vue学习笔记Day03

1、ES6相关新特性let的使用：let是更完美的var；在使用var声明变量时，变量的作用域主要是和函数的定义相关，针对与其他块级作用域来说是没有作用域的，比如if/for等，在这时我们开发往往会引起一些问题。比如：但使用let的话就避免了这些问题const的使用：上面说到let是声明变量时的用法，那么当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性，所以在ES6开发中
安定-·2019-12-24 17:00
上一页 15 16 17 18 19 20 21 22 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他