Vue学习笔记

Vue学习笔记（一）

1.什么是Vue?Vue是一套渐进式的框架，Vue被设计为可以自底层向上的应用，可以与第三方库或者既有项目整合。2.声明式渲染？Vue的核心是采用简洁的模板语法来声明式的将数据渲染进DOM系统。所有东西都是响应式的。一个Vue应用会将其挂载到一个DOM元素上（#app），我们不在直接和HTML交互了，HTML是我们的入口，其余都会发生在新创建的Vue实例内部。3.V-？带有v-表示Vue的指令，他
小屠的博客·2020-07-28 09:34

Vue获取input的数据(ref/v-model)～VUE学习笔记

初学VUE，仅供参考，有不足之处还请指出，谢谢*Vue通过ref获取input数据{{message.text}}添加项目vartestol=newVue({el:'#textOl',data:{todos:[{text:'HTML5'},{text:'CSS'},{text:'Vue'}]},methods:{reverBut:function(){this.todos.push({text:t
叁玖贰拾柒？·2020-07-28 09:21

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

前言在上一章vue学习笔记(三)class和style绑定的内容中，我们学习了如何在vue中绑定class和style，介绍了常用的绑定方法，class的数组绑定和对象绑定以及style的数组绑定和对象绑定
二郎神杨戬·2020-07-28 09:41

关于Vue的一篇学习笔记

Vue学习笔记自己在学习Vue的时候很迷茫，学长告诉说vue的全家桶要学习，生命周期原理要明白，各种ui框架要会用。。。
Frank杰·2020-07-28 09:16

vue学习笔记-指令篇

vue指令v-textv-htmlv-prev-oncev-modelv-onv-ifv-elsev-else-ifv-showv-forv-cloak2.6.0+新增v-slotv-textv-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题相当于元素中的innerText属性不会解析html标签vue指令//创建一个vue实例varapp=newVue({el:'#a
VickQ·2020-07-28 09:30

vue学习笔记(2)

Webpack网页中常用的静态资源js.js.jsx[.coffee.ts]，[中间语言，需进一步编译才能使用]css.css.less.sass.scssimage.jpg.png.gif.bmp.svg字体.svg.ttf.eot.woff.woff2模板文件.ejs.jade.vue网页中引用静态资源多了有什么问题加载速度慢，因为有很多二次请求要处理错综复杂的依赖关系webpackwebpa
右想小小怪·2020-07-28 09:25

Vue入门学习笔记

Vue学习笔记1.MVVM模式和第一个Vue程序参考狂神说java学习教程什么是MVCMVC模式代表Model-View-Controller（模型-视图-控制器）模式。
李泽玉·2020-07-28 09:22

Vue学习笔记 ---- 虚拟DOM

Vue学习笔记----虚拟DOM什么是虚拟DOM随着时代的发展，页面上的功能越来越多，程序中需要维护的状态越来越多，DOM操作也越来越频繁我们发现像之前那样使用jQuery或原生js来开发页面，那么操作
Sleepy-god·2020-07-28 09:12

vue学习笔记之组件化开发(步骤、全局局部组件、父子组件、标签、组件通信)

一、组件化的思想如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块。而每一个组件又可以进行细分。如下面的组件图，首先是整个框是一个组件，它除了里
qq_39773416·2020-07-28 08:12

vue学习笔记之组件化开发二（父子组件的访问（children、refs、parent）、slot插槽）

一、父子组件的访问方式父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。父组件访问子组件：使用children或children或children或refs子组件访问父组件：使用parent我们先来看下parent我们先来看下parent我们先来看下children的访问this.$children是一个数组类型，它包含所有子组件对象。一、如代码父组件访问子组件的值与调用子组件的
qq_39773416·2020-07-28 08:12

vue学习笔记之表单输入绑定（v-model、插槽、父子组件传值或者方法值依赖注入，内联模板）

v-model双向绑定1、可以用v-model指令在表单、及元素上创建双向数据绑定2、v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：text和textarea元素使用value属性和input事件；在文本区域插值({{text}})并不会生效，应用v-model来代替checkbox和radio使用checked属性和change事件；select字段将value作为prop
qq_39773416·2020-07-28 08:41

Vue学习笔记2--组件化开发

组件化开发完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ官方文档内容最全组件化思想标准分治重用组合组件注册全局注册Demo–注册Vue.component('button-counter',{//组件内部需要的数据data:function(){return{count:0}},//组件的模板template:'点击了{{count}}'});使用注意事项：dat
坤坤苦学Java·2020-07-28 08:09

VUE学习笔记——Vuex

VUE学习笔记——Vuex一、创建vue项目npminstall-gvue-cli（安装vue-cli脚手架）vueinitwebpackvue_demo（创建vue_demo文件夹）cdvue_demo
喝啤酒的猫·2020-07-28 08:53

Vue学习笔记 —— 自定义指令（directive）

1、使用情况有的情况下，仍然需要对普通的DOM元素进行底层操作，此时会使用自定义指令。例子：当需要在页面加载，输入框自动获取焦点时。//注册一个全局自定义指定'v-focus'Vue.directive('focus',{//当被绑定的元素插入到DOM中时...inserted:function(el){//聚焦元素el.focus()}})newVue({el:"#app"})自定义指令注册完成
DailyLearning·2020-07-28 07:45

Vue学习笔记-Day5 -slot插槽、模块化

文章目录day5slot插槽、模块化slot插槽模块化day5slot插槽、模块化slot插槽插槽是提高了组件的扩展性，组件本来是固定的内容，有了插槽，就可以为每个组件增加的特有元素。1基本使用2具命插槽我是修改值:{{msg}}我是左边插槽修改值Heremightbeapagetitle{{cmsg}}3作用域插槽这里理解一个概念，什么是作用域？指父级模板里面的所有内容都是在父级作用域里面编译的
小菜鸡的日常问题·2020-07-28 06:48

VUE学习笔记(一) --对VUE作用域的一些思考

我学习有一个习惯，就是在用的时候一定要搞清楚一些基本问题，要不然稀里糊涂的，脑子里没有一根清晰的线，总感觉是一团乱。所以学习笔记里不会有什么语法之类的，这些在各大教程里都讲的很清楚，在这里只记录一些我自己的思考和理解，如果有不对的地方，欢迎路过的大神帮忙指点。1.VUE中，作用域及作用范围？使用Vue来开发HTML时，作用域与VUE对象的定义密切相关，一个html中，可以有多个VUE对象，但是一个
心若向阳无谓悲伤·2020-07-28 06:39

vue学习笔记 slot插槽 自定义指令 生命周期实例

slotslot1//添加自定义指令Vue.directive('addStyle',function(el,binding){el.style.backgroundColor=binding.value.color;el.innerText=binding.value.text;console.log(binding.value.color);console.log(binding.value.
Y_东东·2020-07-28 05:14

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

本文为转载，原文：Vue学习笔记进阶篇——vuex安装及使用简介Vuex是一个专为Vue.js应用程序开发的状态管理模式。
爱吃苹果的牛顿·2020-07-28 05:26

【狂神说Java】vue学习笔记10----实战快速上手

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频  我们采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度带领大家掌握Vue的使用；创建工程  注意：命令行都要使用管理员模式运行1、创建一个名为hello-vue的工程vueinitwebpackhello-vue2、安装依赖，我们需要安装vue-route
pan_h1995·2020-07-28 04:25

【狂神说Java】Vue学习笔记06----计算属性、内容分发、自定义事件

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频1、什么是计算属性  计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!  上代码TitlecurrentTime1
pan_h1995·2020-07-28 04:25

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

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

Vue学习笔记之Vuex的核心概念State

单一状态树Vuex使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。存储在Vuex中的数据
WebKoalaBoy·2020-07-27 23:23

Vue学习笔记-组件化（二）

父访问子-children-refschildren按钮{{item}}{{message}}constcpn={template:`#son`,data(){return{message:'hello,world',books:['82年生的金智英','你当像鸟飞向你的山','书店日记','时间的秩序','喜鹊谋杀案'],isshow:false}},methods:{showmessage()
gyypwrs·2020-07-27 22:19

VUE学习笔记——v-for/组件

零、VUE代码风格指南：https://cn.vuejs.org/v2/style-guide/1.当直接在DOM中使用一个组件(而不是在字符串模板或单文件组件)的时候，我们强烈推荐遵循W3C规范中的自定义组件名(字母全小写且必须包含一个连字符，即kebab-case命名)。这会帮助你避免和当前以及未来的HTML元素相冲突（HTML元素是大小写不敏感的，在DOM模板中会被自动转换为全小写，但是事件
duang_ang·2020-07-27 21:01

vue学习笔记

vueeslint关闭eslint是针对vue代码书写格式等的检测，由于在写项目的时候往往会因为一两个空格键等报错，一直在调整样式，所以这里直接将其先关闭，不然严重影响代码进度，特别是平常没有怎么注意代码书写格式的人：操作：找到webpack.base.conf.js在里面搜索eslint找到定义这个eslint的rules然后让其调用的方法注释就可以了vue的配置安装npm安装指定版本的vue配
alisaGreen·2020-07-27 19:08

vue学习笔记

vue实例对象：new出来的对象就是vue的实例对象new这个叫做构造函数里面的内容是构造参数，每一项叫参数选项el：表示组件挂载位置template：实用的模版，表示装载内容，里面是html代码或者指令data：表示数据.数据会被代理到实例对象newVue是根组件，先实例化根组件，然后在根组件里引入子组件，子组件中可以再引入子组件。根组件挂在到body生命周期是vue组件不同阶段的不同状态，可以
信不信我讹你·2020-07-27 18:27

vue学习笔记（三）——vuex—store配置

可以将不同视图的仓库放到不同的store中。——storeindex.jsfoo.jsbar.js——viewsFoo.vueBar.vueApp.vuemain.js1.配置单个store的信息foo.jsexportdefault{namespaced:true,//具名引用时使用state:{//state状态管理(通过store.state.name访问)name:'waitezhou',
aibi8107·2020-07-27 18:24

vue学习笔记第一天-vue.js简易留言板(删除，全部删除)

window.onload=function(){newVue({el:'#box',data:{myData:[],username:'',age:'',nowIndex:-100//确定删除的index的初始值},methods:{add:function(){this.myData.push({name:this.username,//myData=[name:'',age:'']age:t
adeqn48622·2020-07-27 18:59

Vue学习笔记（三）

1监听在Vue.js中可以通过watch来监听数据的变化，比如通过watch实现的简单计数器：计数器：{{count}}点我增加varvm=newVue({el:'#app',data:{count:0}})vm.$watch('count',function(newValue,oldValue){document.getElementById("info").innerHTML="修改前："+o
氷泠·2020-07-27 17:20

Vue学习笔记（四）

1表单绑定可以利用v-model在表单控件元素上创建双向的数据绑定，v-model会根据控件类型自动选取正确的方法来更新元素。2文本框文本框的绑定例子如下：input{{message}}textareanewVue({el:'#app',data:{message:'',message2:''}})3按钮3.1单选data中的值为的value，如：选中的值为：{{picked}}newVue({
氷泠·2020-07-27 17:20

Vue学习笔记----组件

组件组件初始化Vue.component('button-counter',{data:function(){return{count:0}},template:'Youclickedme{{count}}times.'})子组件传值子组件中如何引用data中的属性Vue.component('blog-post',{props:['post'],template:`{{post.title}}`
Model_Vincent·2020-07-27 16:24

Vue学习笔记之组件化的高级应用：插槽slot的使用

1、插槽slot的使用：slot，插槽，可以理解为我们现实生活中类似电脑USB的插槽，插入的东西不用，则功能就不一样。所以组件用插槽是为了封装的组件更加具有扩展性，让使用者来决定组件内部使用什么功能。插槽的使用规则：抽取共性，保留不同，即为将共性抽取到组件中，将不同暴露为插槽。同时插槽里面可以个默认值：在引用组件的时候，没有说明使用什么的时候，就会显示此默认值：2、具名插槽的使用：具名，其实就可以
大数据时代·2020-07-27 14:15

Vue学习笔记（八）插槽

在使用组件时，组件开始标签和结束标签的内容会被忽视，如下代码IwanttobeshownVue.component("myCom",{template:"thisisthetemplate"})letvm=newVue({el:"#app",data:{},methods:{}})这里my-com开始标签和结束标签间的内容不会显示出来，整个标签都被模板覆盖了，如果要在html中传入开始标签和结束标
前端小黑·2020-07-27 14:14

Vue学习笔记第二天

vue-router、axiosvue-router、axios复习今日重点过滤器获取DOM元素mint-uiwappalyzervue-router命名路由参数router-link编程导航复习重定向和404多视图嵌套路由vue-resource(了解)axios如何练习复习vue单文件方式xxx.vue1:准备好配置文件package.json(包描述文件&&封装命令npmrundev)+we
superbeyone·2020-07-27 13:34

Vue学习笔记4.7 插槽作用域 slot-scope

作用域插槽标签来包裹所要使用的内容。然后使用slot-scope来接收子组件中的数据（list）slot="XXX"是来区分不同的组件。以免数据串-->{{props.item}}---Hello{{props.item}}----HelloVue.component('child',{data:function(){return{list:[1,2,3,4]}},//template:`////
@凌晨三点半·2020-07-27 13:22

vue-admin-template笔记（四）

文章目录Vue学习笔记（四）treetable总结参考Vue学习笔记（四）学习vue-admin-templatehttps://github.com/PanJiaChen/vue-admin-template
seedcup·2020-07-27 12:57

vue-admin-template笔记（五）

文章目录Vue学习笔记（五）formnestmenu2/index.jsmenu1/index.jsmenu1/menu1-3总结参考Vue学习笔记（五）学习vue-admin-templatehttps
seedcup·2020-07-27 12:57

vue-admin-template笔记（二）

文章目录Vue学习笔记（二）login404总结参考Vue学习笔记（二）学习vue-admin-templatehttps://github.com/PanJiaChen/vue-admin-template
seedcup·2020-07-27 12:56

vue-admin-template笔记（三）

文章目录Vue学习笔记（三）dashboardstoreindex.jsgetters.jsmodule/app.jsmudule/user.jsapilogin.jsutilrequest.jsauth.js
seedcup·2020-07-27 12:56

vue学习笔记（简单易懂）

一，常用指令：1.v-text:是元素的innerText只能在双标签中使用2.v-html:是元素的innerHtml，不能包含{{xxx}}3.v-if:元素是否移除或者插入4.v-show:元素是否显示或隐藏5.v-model:双向数据绑定，v-bind是单向数据绑定(内存js改变影响页面)二，class结合v-bind使用需要根据可变的表达式的结果来给class赋值，就需要用到v-bind
前热火球员LeBron James·2020-07-27 12:23

Vue学习笔记_插槽slot

插槽：使用场景：将父组件的html片段传递给子组件。插槽使用：关键字slot在子组件中使用标签，即可以将父组件里的html片段显示在子组件slot区域。插槽使用varslot_1={template:'hello默认值'};具名插槽：在有多个插槽时，指定在子组件对应哪个插槽的内容。父组件：通过属性slot指定插槽名。collapsed=!collapsed"/>子组件：通过demo：//父组件：具
橙橙鲁·2020-07-27 11:36

Vue学习笔记 3 - 组件化 / slot(插槽)

组件化组件化是Vue.js中的重要思想组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。基本步骤组件化的使用分为三个步骤调用Vue.extend()方法创建组件构造器调用Vue.component()方法注册组件在Vue实例的作用范围内使用组件全局组件//3.使用组件//1.创建组件构造器对象constcpnC=Vue.extend(
Caramely·2020-07-27 11:59

Vue学习笔记（四）

1表单绑定可以利用v-model在表单控件元素上创建双向的数据绑定，v-model会根据控件类型自动选取正确的方法来更新元素。2文本框文本框的绑定例子如下：input{{message}}textareanewVue({el:'#app',data:{message:'',message2:''}})3按钮3.1单选data中的值为<input>的value，如：选中的值为：{{pic
qq5d1070a92e32e·2020-07-24 23:07

Vue学习笔记（四）

1表单绑定可以利用v-model在表单控件元素上创建双向的数据绑定，v-model会根据控件类型自动选取正确的方法来更新元素。2文本框文本框的绑定例子如下：input{{message}}textareanewVue({el:'#app',data:{message:'',message2:''}})3按钮3.1单选data中的值为<input>的value，如：选中的值为：{{pic
qq5d1070a92e32e·2020-07-24 23:49

Vue学习笔记（三）

1监听在Vue.js中可以通过watch来监听数据的变化，比如通过watch实现的简单计数器：计数器：{{count}}点我增加varvm=newVue({el:'#app',data:{count:0}})vm.$watch('count',function(newValue,oldValue){document.getElementById("info").innerHTML="修改前："+o
qq5d1070a92e32e·2020-07-24 23:19

四、Vue学习笔记——使用路由钩子动态修改网页名称

在router.js中设置meta属性//首页{path:"index",component:()=>import("../views/home/index/index.vue"),meta:{title:"-首页"},},通过router的钩子beforEach修改网页名称router.beforeEach((to,from,next)=>{document.title="XX有限责任公司"+t
杰克老师·2020-07-21 08:13

Vue学习笔记01

学习目录什么是Vue.js为什么要学习流行框架框架和库的区别MVC和MVVM的关系图解Node(后端)中的MVC与前端中MVVC之间的区别Vue.js基本代码和MVVM之间的对应关系html模板Vue之-`基本的代码结构`和`插值表达式`、v-cloakVue指令之`v-text`和`v-html`Vue指令之`v-bind`的三种使用方法Vue指令之`v-on`和`跑马灯效果`Vue的事件修饰符
会飞的奥特曼·2020-07-16 06:09

【狂神说Java】Vue学习笔记05-----Axios异步通信

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频什么是Axios  Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：从浏览器中创建XMLHttpRequests从node.js创建http请求支持PromiseAPI[JS中链式编程]拦截请求和响应转换请求数据和响应数
pan_h1995·2020-07-16 04:49

【狂神说Java】vue学习笔记8-----webpack使用

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频什么是Webpack  本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个
pan_h1995·2020-07-16 04:49

【狂神说Java】Vue学习笔记02-----第一个Vue程序

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频1、什么是MVVM  MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于JavaApplet，简单点说就是在浏览器上运行WPF）的架构师KenCooper和TedP
pan_h1995·2020-07-16 04:49
上一页 11 12 13 14 15 16 17 18 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他