Vue学习笔记

【狂神说Java】Vue学习笔记07-----第一个vue-cli项目

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频1、什么是vue-cli  vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；  预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；  项目的功能统一的目录结构本地调试热部署单元测试集成打
pan_h1995·2020-07-16 04:49

【狂神说Java】Vue学习笔记01：前端知识体系

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频2、前端知识体系想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。2.1、前端三要素HTML（结构）：超文本标记语言（H
pan_h1995·2020-07-16 04:49

【狂神说Java】Vue学习笔记03-----基础语法指令

本文根据B站【狂神说Java】vue系列视频整理，如需观看视频，请点击链接跳转【狂神说Java】Vue视频1、v-bind  我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!  我们还可以使用v-bind来绑定元素特性!  上代码Title鼠标
pan_h1995·2020-07-16 04:18

【狂神说Java】vue学习笔记09----vue-router路由

说明  学习的时候，尽量的打开官方的文档  VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vuejs过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSSclass的链接HTML5历史模式或hash模式，在IE9中自动降级自定义的滚动行为安装 
pan_h1995·2020-07-16 04:18

Vue学习笔记（一）——Intellij IDEA搭建Vue脚手架

1.安装nodejs及npm（已安装）命令行查看是否安装好nodejs和npmnode-vnpm-vps：如未安装请自行查找教程安装2.创建一个StaticWeb项目自己命名项目名称3.安装vue脚手架工具Alt+F12打开Termainal安装vue脚手架工具安装npm的淘宝镜像，输入以下命令：npmi-gcnpm--registry=https://registry.npm.taobao.or
ChingZio·2020-07-15 17:50

vue学习笔记01day_01Vue的基本代码

Document{{msg}}//2.创建一个Vue的实例//当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数//注意：我们new出来的这个vm对象，就是我们MVVM中的VM调度者varvm=newVue({el:'#app',//表示，当前我们new的这个Vue实例，要控制页面上的哪个区域//这里的data就是MVVM中的M，专门用来保存每个页面的数据的data:{//data属性中
菜鸟柱子·2020-07-15 10:55

Vue学习笔记（4）

1.Vue.js是什么?1).一位华裔前Google工程师(尤雨溪)开发的前端js库2).作用:动态构建用户界面3).特点:*遵循MVVM模式*编码简洁,体积小,运行效率高,移动/PC端开发*它本身只关注UI,可以轻松引入vue插件和其它第三库开发项目4).与其它框架的关联:*借鉴angular的模板和数据绑定技术*借鉴react的组件化和虚拟DOM技术5).vue包含一系列的扩展插件(库):*v
SS独行SS·2020-07-15 08:35

Vue学习笔记——实现异步加载

Vue实现异步加载，使用的是vue-resource库。get请求this.$http.get(‘url’，options).then(function1,function2)url为:接口地址options为:可选择参数，可省略function1为:访问成功的函数function2为:访问失败的函数post请求this.$http.post(‘url’,options，配置参数).then(fu
weixin_43246812·2020-07-15 07:19

Vue学习笔记之六进入/离开 & 列表过渡

6进入/离开&列表过渡6.1概述Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：在CSS过渡和动画中自动应用class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库，如Velocity.js6.2transition过渡Vue提供了transition的封装
聽見下雨的_聲音·2020-07-15 05:40

VUE学习笔记——利用es6模板字符串实现时间格式化

本文利用es6的模板字符串来实现时间对象格式化为字符串js中的时间对象Date的函数一览：//dateapiconstdate=newDate();date.getFullYear();//获取时间对象的年份4位数时间//2018date.getMonth();//获取时间对象的月份（范围0-11）//11date.getDate();//获取时间对象的日期//18date.getDay();//
qq_39041578·2020-07-14 19:59

mpvue学习笔记

一、mpvue和Vue的生命周期对比在原生小程序的页面（Page）中包含了很多页面的生命周期方法，如onLoad、onUnload、onShow、onHide、onPullDownRefresh等等，mpvue中推荐使用Vue组件生命周期方法，而像onPullDownRefresh、onReachBottom这类特殊功能的生命周期则需直接使用原生的。二、在使用mpvue的时候那些需要特别注意的点由
妹妹你大胆地往前走啊！·2020-07-13 04:42

Vue学习笔记5--前端工程化

前端工程化完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ模块化相关规范概述传统开发问题命名冲突文件依赖模块化含义：把单独的一个功能封装到一个模块（文件）中,模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块好处：方便代码重用，提升开发效率，方便后期维护浏览器端模块化规范AMD（Require.js）CMD（Sea.js）服务器端模块化规范Comm
坤坤苦学Java·2020-07-12 22:06

Vue学习笔记（二）

1条件判断1.1普通if条件判断使用v-if指令：看到了;newVue({el:'#app',data:{seen:true}})v-if指令根据表达式的值（在这里是seen）决定是否插入1.2if-else可以使用v-else添加一个else块：0.5">12newVue({el:'#app'})也可以增加v-else-if：ABCDnewVue({el:'#app',data:{value:'
氷泠·2020-07-12 15:15

Vue学习笔记（二）

1条件判断1.1普通if条件判断使用v-if指令：看到了;newVue({el:'#app',data:{seen:true}})v-if指令根据表达式的值（在这里是seen）决定是否插入<p>1.2if-else可以使用v-else添加一个else块：0.5">12newVue({el:'#app'})也可以增加v-else-if：ABCDnewVue({el:'#app',data
qq5d1070a92e32e·2020-07-12 13:18

vue学习笔记-----vue+webpack初始化项目（vue1.0的安装）

1.安装vue-cli$npminstall-gvue-cli2.用Vue-cli生成vue+webpack的项目模板$npminstall-gvue-cli$vueinitwebpackmy-project$cdmy-project$npminstall$npmrundev3.这样默认的是Vue2.0,如果要使用Vue1.X的话，执行下面的操作。$npminstall-gvue-cli$vuei
明明是地主家的傻儿子·2020-07-12 03:26

VUE学习笔记

VUE学习笔记目录:VUE基础入门(level1)1.1基本概念和入门程序1.2入门小Demo1.3常用指令1.4v-on:事件修饰符1.5v-model双向数据绑定1.6VUE的样式设置1.7v-for
不_yu·2020-07-11 21:42

VUE学习笔记（1）：基础语法

目录：相关概念：实例的基本属性：属性绑定和双向数据绑定：VUE中的计算属性和侦听器：v-if,v-show与v-for指令：相关概念：挂载点：el属性对应的dom元素。模版：挂载点内部的所有内容。可以把模版放在Vue实例中定义，作为template属性值实例：定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中。v-text=''data''转义，原始字符串。v-htm
he0103·2020-07-11 17:07

Vue学习笔记（一）

1Vue目录结构build：项目构建webpack的相关代码config：配置目录，包括端口号等node_modules：npm加载的项目依赖模块src：开发的目录模块，包含assets（资源文件），components（组件文件），App.vue项目入口文件，main.js项目核心文件static：静态资源文件，如图片，字体等test：初始测试目录.xxx：配置文件，比如语法配置，git配置等等
氷泠·2020-07-11 13:03

vue学习笔记之——v-for与局部组件的传值

在vue2.0中列表渲染也是一门学问，如果你的列表用到了v-for进行数据遍历，而且每一项使用一个自定义组件包裹，像这样其中：user就是组件元素的属性，在创建组件时只需要通过props引入其对应的数据，就可以通过组件得到相应的列表标签，完整代码如下:newVue({el:'#app',data:{users:[{name:"BoBo",email:"[email protected]"},{name:"P
蜗牛fighting·2020-07-11 11:29

Vue学习笔记

目录一介绍二指令(directive)三组件3.1组件实例3.2DataandMethods3.3生命周期四模板语法4.1插值4.1.1文本插值4.1.2RawHTML4.1.3属性4.1.4表达式4.2指令4.2.1参数4.2.2动态参数4.2.3Modifiers4.3缩写五computed、watch六class和style数据绑定6.1class数据绑定6.2styles数据绑定七条件性渲
千霜·2020-07-11 09:20

vue学习笔记之：以对学生数据的处理作为示例实现数据过滤筛选等常规处理

示例：现有一组学生数据，通过对其中的数据筛选，获取其中的年龄最大、年龄最小、和年龄在指定区间内的学生数据学生数据：[{'name':'张三','sex':'男','age':15},{'name':'刘丽丽','sex':'女','age':25},{'name':'李艳','sex':'女','age':17},{'name':'王五','sex':'男','age':35},{'name':'
枫林血舞·2020-07-11 07:07

vue学习笔记[1] 开始

写在前面，一直想学习一下vue，但一直没有行动。在前几天看直播，看到一主播随身带的宠物不幸被车撞了。我的心随之也感觉被撞了一下，“人生很长，一辈子却又很短”，生命看似很顽强，但是载体又很脆弱。算了，不扯淡了。从现在开始，记录我的vue学习，终极目标是做一个使用vue+boostrap做一个admin后台界面。准备工作生产环境是必须的-node-npm安装vue不说了，参考vue的文档安装boots
antdz·2020-07-11 02:24

vue学习笔记--插槽、具名插槽和作用域插槽

插槽使用场景是:slot（插槽）可以理解为占位符如果子组件需要显示的内容并非来自本身，而是父组件传递进来的，而假如直接这样写，是不可以实现的，因为如果me-component没有包含一个元素，则任何传入它的内容都会被抛弃：Document我是header//插槽Vue.component('me-component',{template:`你好`})newVue({el:'#app'})要实现上面
小棋子js·2020-07-10 23:37

Vue学习笔记-项目开发4.3 渐隐渐现效果-动态样式（Header渐隐渐现）

一、渐隐渐现的效果说明：当我们选择详情页面后在详情页面顶部显示返回，在向上滑动时出现另外一个标头，在向下滑动时恢复原样，如下图所示二、代码展示及说明//1、这部分是左边的那个小箭头用于返回到首页的//2、隐藏显示的导航栏景点详情exportdefault{name:'DetailHeader',data(){return{showAbs:true,//3、透明度先设
Kasey_L·2020-07-10 22:23

Vue学习笔记（一）

1Vue目录结构build：项目构建webpack的相关代码config：配置目录，包括端口号等node_modules：npm加载的项目依赖模块src：开发的目录模块，包含assets（资源文件），components（组件文件），App.vue项目入口文件，main.js项目核心文件static：静态资源文件，如图片，字体等test：初始测试目录.xxx：配置文件，比如语法配置，git配置等等
qq5d1070a92e32e·2020-07-10 17:32

Vue学习笔记入门篇——Class 与 Style 绑定

本文为转载，原文：Vue学习笔记入门篇——Class与Style绑定绑定HTMLClass数据绑定一个常见需求是操作元素的class列表和它的内联样式。
ChainZhang·2020-07-10 11:31

Vue学习笔记（四）——v-for的key

参考文档：https://cn.vuejs.org/v2/guide/当使用v-for遍历数组时，如果没有指定key，则当数组元素顺序发生变更时，dom绑定的数据会更新，而dom本身的顺序不会变化；如果指定了key，则当数组元素顺序发生变更时，dom会和数据同步更新。下面用一个简单的例子来说明：Titledom未重新渲染{{item.message}}dom有重新渲染{{item.message}
讨厌走开啦·2020-07-09 19:27

Vue学习笔记(1).md

2017.4.11-4.13前言：上周大致浏览了Vue文档，简单使用了Vue.js文件尝试基本Vue特性。在这一周，学习Vue入门教程，完成了一个登录界面的Vue组件，并且通过与nodeJs的连接实现了登录验证。在下一周中，学习Vue组件的套用，使用less完善css，使用Vuex管理项目状态。笔记导航Vue框架搭建Vue前端组件搭建Vue服务器端通信项目要求最新作业具体要求使用VUE实现求职系统
daisimin7·2020-07-09 16:39

vue页面切换动画

VUE学习笔记vue基本语法整理条件渲染列表渲染vue路由vue路由切换动画vue基本语法整理条件渲染列表渲染vue路由vue路由切换动画vue路由切换动画，是基于vue的过渡动画效果做的。
weixin_44383184·2020-07-08 22:06

vue学习笔记之什么是渐进式框架

前言今天打开官网开始学习Vue，有一句这样的话：Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。但是一个词语就让我摸不着头脑：渐进式框架。那么问题来了什么是渐进式框架，什么是自底向上逐层应用呢？于是便有了这篇文章。何谓渐进式框架我上网查了一些资料，我认为有一篇文章讲的特别好，可以点击下面的链接：Vue2.0中
Beyond_630·2020-07-08 20:39

小汪的vue学习笔记

目录第一章1.let和const2.MVVM3.生命周期1.生命周期函数4.插值操作5.v-bind使用6.v-for的使用7.计算属性computed1.简单使用2.复杂操作3.set（）和get（）4.计算属性和methods的区别8.ES6补充1.let和var2.理解块级作用域3.const的使用4.对象字面量增强写法9.事件监听1.v-on基本使用和语法糖2.v-on的修饰符10.v-i
Fight_hard·2020-07-08 20:27

Vue草稿

Vue学习笔记1.概述、特征、以及初始化Vue是一种灵活的渐进式相应框架采用声明式的编程范式引用Vue的方法constapp=newVue({el:'#app',//用于挂载需要挂载的元素data:{message
讨嫌喵·2020-07-08 18:11

Vue学习笔记

Vue学习笔记1.概述、特征、以及初始化Vue是一种灵活的渐进式相应框架采用声明式的编程范式引用Vue的方法constapp=newVue({el:'#app',//用于挂载需要挂载的元素data:{message
讨嫌喵·2020-07-08 18:11

Vue学习笔记(一) P1~P12

文章目录hello,Vue.js!v-for遍历案例:计数器MVVMVue的options选项1.el2.data3.functionsVue的生命周期模板Mustachehello,Vue.js!{{message}}constvm=newVue({el:"#app",data:{message:"helloworld!",}})注:了解constletvar三者的区别constvm…letvm
D.D.U·2020-07-08 08:51

Vue学习笔记5.2 CSS过渡动画----使用animate.css

使用animate.css库/*1.这是正常的CSS过渡动画的方法。先写好@keyframes（CSS3）然后在.fade-enter-active和.fade-leave-active中添加相应的绑定和过渡参数*//*@keyframesbounce-in{此部分为CSS3的内容可自行查看W3Cschool0%{transform:scale(0);}50%{transform:scale(1.
@凌晨三点半·2020-07-08 06:57

vue学习笔记之Webpack详解（模块与打包、loader、el和template区别、plugin）

我们从两个点来解释上面这句话：模块和打包首先理解模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。现在许多浏览器都不支持这些模块化范式，而webpack就出现了，它就可以把这些模块化工具通过webpack变成浏览器可以识别的东西。并且在通过模块化开发完成了项目后，还需要处理模块间的各
qq_39773416·2020-07-08 00:23

vue学习笔记第一天之基本语法（{{}}、v-once、v-html、v-text 、v-pre、v-bind、计算属性）

插值操作一、Mustache（胡子、胡须）语法{{}}使用方法：对下面数据的进行表达的意思{{firstName}}//这样可以对下面数据的表达{{firstName}}流批//{{firstName+lastName}}//可以把这样使用它{{firstName+''+lastName}}{{firstName}}{{lastName}}//两个Mustache间有两个空格{{counter*2
qq_39773416·2020-07-08 00:23

Vue学习笔记之插值操作

1.mustache语法：mustache翻译过来就是胡子，而它的语法就是一对{{}}，像极了胡子。01-Mustache语法{{message}}{{firstName+lastName}}{{count*6}}{{firstName+''+lastName}}{{firstName}}{{lastName}}constapp=newVue({el:'#app',data:{message:'你
科小喵·2020-07-07 22:18

Vue学习笔记——指令和部分组件

Vue实例2v-model2v-ifv-elsev-show2v-for3Computed运算数据3Computed运算数据之排序数组4V-text和v-html4Methods4V-model和form表单的绑定5三个修饰符5复选框中加v-modle6将数据和表单标签进行绑定7V-bind7动态标签绑定7绑定样式8Style样式绑定在data数据中9Style绑定json语句9其他的指令10V-
Record Life·2020-07-07 20:58

vue学习：xmg vue学习笔记1/14代码案例

ppt笔记参考：https://blog.csdn.net/qq_22182989/article/details/94393963****************************官网：下载vuejs：https://cn.vuejs.org/v2/guide/installation.htmldemo{{message}}{{name}}-------------------------
ali是个小太阳·2020-07-07 20:07

vue学习笔记

参考链接：https://segmentfault.com/a/1190000008010666vue：https://cn.vuejs.org/v2/guide/vuex：https://vuex.vuejs.org/zh-cn/intro.htmlrouter：https://router.vuejs.org/zh-cn/essentials/named-routes.htmlless：htt
dayindayout·2020-07-07 06:36

Vue学习笔记(3)-品牌管理系统

技术点钩子函数自定义指令自定义过滤器计算属性监听属性自定义指令为什么需要自定义指令？为了代码复用和灵活。指令的分类：全局指令：在vm实例外面创建的指令；通过Vue.directive来创建；局部指令：以后补充如何定义自定义指令?（不用赋值）Vue.directive(指令名称,{inserted(el,binding){}})如何使用自定义指令？（不用赋值）v-指令名称如何定义带值的指令？Vue.
banxiecang9548·2020-07-07 03:23

Vue学习笔记5.3 使用animate时同时使用自定义动画效果。 appear :duration

CSS过渡与动画效果//2.自定义样式.fade-enter,.fade-leave-to{opacity:0;}.fade-enter-active,.fade-leave-active{transition:opacity3s;}HelloWorld切换varvm=newVue({el:'#app',data:{show:true},methods:{handleClick:function(
@凌晨三点半·2020-07-06 18:09

小白VUE学习笔记3：Vuex的this.$store.commit和在Vue项目中引用公共方法

1、在Vue项目中引用公共方法作为一个新人小白，在使用vue的过程中，难免会遇到很多的问题，比如某个方法在很多组件中都能用的上，如果在每个组件上都去引用一次的话，会比较麻烦，增加代码量。怎么做比较好呢，话不多说直接看代码把首先要在main.js中引入公共js。然后，将方法赋在Vue的原型链上。像图中这样。然后在需要的组件上去引入这个方法mouted(){//调用方法this.common.logi
Funfction_Zero·2020-07-06 06:00

Vue学习笔记（4） --传值与传引用

目录组件嵌套属性传值传值和传引用传值：传引用：传事件组件嵌套Vue的目录结构决定了整个工程可以以非常有序且高效的方式布置，组件嵌套就是其中非常重要的一部分。App.vue作为被渲染的界面，其他组件需要嵌套到该文件中：importVuefrom'vue'importAppfrom'./App.vue'import'./plugins/element.js'//importUsersfrom"@/co
eswang·2020-07-06 05:53

vue学习笔记：vue-resource、axios、fetch-jsonp请求数据，以及虚拟数据接口mock使用

mock的使用mock是可以创建虚拟的数据接口，提供前端来使用，非常便捷，我们可以在mock官网查看mock的具体文档和语法，这里只是简单介绍一下用法。引入mock：npm/cnpminstallmockjs然后在src目录下面创建一个文件夹例如mock，下面新建一个文件mock.js然后创建虚拟数据如下：importMockfrom'mockjs'Mock.mock('/user',/post|
落花别有意 流水似无情·2020-07-06 04:32

vue学习笔记：父子组件之间的传值$refs和$parent，以及父组件给子组件传值props

父组件获取子组件的值和方法父组件：html代码父组件获取子组件的值和方法js代码：importHeaderfrom'./header';exportdefault{data(){return{msg:'这是一个首页组件',name:'首页',dataone:'首页第一个数据',title:'111'}},components:{'v-header':Header},methods:{getData
落花别有意 流水似无情·2020-07-06 04:32

vue学习笔记：事件中的$event对象作用

vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。具体用法如下：1、可以通过$event进行对dom元素的获取html：获取事件对象首先我们先打印一下$event对象看一下，对象中有哪些属性，如下图其中srcElement就是当前这个标签元素，可以根据此属性来获取当前点击事件的标签元素。比如我们可以对获取的元素进行操作，就像原生js
落花别有意 流水似无情·2020-07-06 04:32

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

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

如何在Vue2中实现组件props双向绑定

Vue学习笔记-3前言Vue2.x相比较Vue1.x而言，升级变化除了实现了Virtual-Dom以外，给使用者最大不适就是移除的组件的props的双向绑定功能。
weixin_30371875·2020-07-05 20:36
上一页 12 13 14 15 16 17 18 19 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他