#vue学习

Vue学习笔记

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

小白的vue学习之路04项目

项目技术框架：项目首页：项目：main.js'usestrict';//引入第三方包开始importVuefrom'vue';//VueRouter:引入路由对象importVueRouterfrom'vue-router';//VueRouter:安装插件Vue.use(VueRouter);//Mint:引入mint-uiimportMintfrom'mint-ui';//Mint:引入css
weixin_37770640·2020-07-08 18:05

vue第一课——认识数据绑定

2019独角兽企业重金招聘Python工程师标准>>>一起学vue——vue学习总路线前言上次解决了直接引入报错的问题，今天开始学习。
weixin_33824363·2020-07-08 15:13

vue第一课——模板语法

2019独角兽企业重金招聘Python工程师标准>>>一起学vue——vue学习总路线——————————^~^我是萌萌哒分割线^~^————————————————v-html作用：用于输出html代码用法
weixin_33671935·2020-07-08 15:48

vue 学习中遇到的一些问题

vue学习中遇到的一些问题Vue中data有return返回函数问题：在简单的vue实例中会看到Vue实例中data属性展示方式如下：letapp=newVue({el:"#app",data:{msg
z-pan·2020-07-08 14:24

Vue学习之路第十四篇：v-for指令中key的使用注意事项

1、学前准备：JavaScript中有一个方法：unshift()，其作用是向数组的开头添加一个或更多元素，并返回新的长度。该方法的第一个参数将成为数组的新元素0，如果还有第二个参数，它将成为新的元素1，以此类推。2、直接上代码序号： 车名： 添加序号：{{item.id}},车名：{{item.name}}varvm=newVue({el:"#app",data:{idVal
weixin_30591551·2020-07-08 14:48

Vue学习之路5-v-model指令

1.指令释义v-model在表单控件或者组件上创建双向绑定，本质上是负责监听用户的输入事件（onchange，onkeyup，onkeydown等，具体是哪个，还请查阅官方底层实现文档）以更新数据，并对一些极端场景进行一些特殊处理。2.表单输入绑定方式和方法2.1input框实现双向数据绑定示例：123{{title}}45请输入:6你在input框中输入了:{{inputs}}789101112
weixin_30569153·2020-07-08 14:38

Vue学习-基础语法

Vuev-if指令Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。v-if:v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"expression是一个返回bool值的表达式，表
weixin_30457065·2020-07-08 13:03

Vue学习-单选全选的示例

平时开发过程中，经常用到单选和全选的情况，现将示例保留，供以后查阅，该示例取自于TODOMVC示例：HTML中部分代码：todosMarkallascomplete{{item.content}}{{remaining}}item{{remaining===1?'':'s'}}leftAllActiveCompletedremaining"@click="removeCompleted"class
生活体验师·2020-07-08 09:53

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学习--常用指令

1、创建一个vue实例vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先获取到界面的标签元素，并实例化一个vue实例。例如在HTML创建一个div：{{msg}}在js中将其实例化为vue对象：letapp=newVue({el:'#app',//标签的类名、id，用于获取元素       //以键值对的形式存放用到的数据
Trajec_Tory·2020-07-08 07:49

VUE学习03--VUE数据绑定（绑定数据，绑定属性，绑定样式，双向数据绑定）

今天我们一起来学一学VUE的绑定。一、数据绑定首先可以先把数据定义在Vue页面中的标签内，然后在标签中通过{{变量名去取}}。另一种方法：如果变量是对象，可以{{对象.属性}}去取。如果变量是集合，可以通过v-for遍历去取。请看下面实例（我们在新建项目中的App.vue）：hellovue绑定数据：{{msg}}绑定数据的另一种方法：{{obj.name}}{{item}}{{item.titl
stalin_·2020-07-08 06:34

VUE学习04--VUE字符串过滤器的使用

由于后端对字符串的处理特别多，在学习前端时又发现了VUE有一个过滤器的功能，我们可以通过自定义过滤器来对字符串进行处理。下面我们来学习一下字符串过滤器的使用。首先我们来说一下用法：正常显示一个数据我们会这样{{message}}在使用过滤器就像linux中命令的管道符一样，用|进行过滤。{{message|filters1|filters2|.....}}然后filters定义在标签内，与data
stalin_·2020-07-08 06:34

VUE学习01--如何使用VSCode搭建一个可以运行的VUE项目

初学前端，将自己学习路上的一点经验总结一下，供大家参考，欢迎大家多提建议~共同进步~首先大概介绍一下VUE框架。VUE是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。由于VUE框架
stalin_·2020-07-08 06:34

VUE学习02--VUE项目各级目录及文件作用介绍

我们创建完成vue项目，会发现有很多目录及文件，我给大家简单介绍一下各个目录的作用。build--主要是一些webpack项目打包的配置文件config--项目运行时的一些配置，如项目端口号等。node_module--项目依赖，由命令npminstall生成index.html--入口文件package.json--项目的配置文件创建项目填写的一些选项都写到这里了。webpack.config.
stalin_·2020-07-08 06:34

VUE学习05--VUE流程控制语句（ if / else if / v-show 条件判断 , for 循环 , for + if 使用）

对于每一门语言，流程控制语句都十分的重要，有了它们我们才能实现更加复杂的需求，实现更加强大的功能。在VUE中对应也有一些特有的标签。下面我们来了解一下~一、条件判断标签：v-if--对应if用法v-if="表达式"v-else-if--对应elseif用法v-else-if="表达式"v-else--对应else用法v-elsev-show--与v-if作用相同，但不能和else，elseif连用
stalin_·2020-07-08 06:34

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学习之路（一）--vue-cli安装+vue-router+vue-resource

一、Vue-cli:脚手架安装a)安装nodejs；b)win+r，输入cmd进入命令行工具；c)安装vue-cli：（-g：全局安装）i.方法一：npminstallvue-cli-g：此方法链接的是国外网站会比较卡；ii.方法二：安装cnpm，通过淘宝镜像安装：npminstall-gcnpm--registry=https://registry.npm.taobao.org，然后：cnpmi
Mosowe·2020-07-08 06:14

vue学习及知识点总结

1：兼容性Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMAScript5的浏览器。2：指令声明式渲染鼠标悬停几秒钟查看此处动态绑定的提示信息！varapp2=newVue({el:'#app-2',data:{message:'页面加载于'+newDate().toLocaleString()}})v-bind特性被称为指令。指令带
恋念思尔悄悄然·2020-07-08 04:30

Vue学习系列（二十）：vue-cli脚手架快速搭建Vue项目

Vue学习系列：上一篇：Vue学习系列（十九）：Vue的路由在使用vue-cli搭建Vue项目之前，我们需要通过npm或cnpm安装vue-cli，这样我们才可以使用vue-cli来搭建Vue项目。
看地阔天高云深处·2020-07-08 03:57

Vue学习系列（二十一）：Element-ui的初体验

Vue学习系列：上一篇：Vue学习系列（二十）：vue-cli脚手架快速搭建Vue项目第一步：搭建vue-cli项目vuecreateelement-ui-demo第二步：安装element-ui的依赖
看地阔天高云深处·2020-07-08 03:57

Vue学习系列（十九）：Vue的路由

Vue学习系列：上一篇：Vue学习系列（十八）：Vue的组件之子组件向父组件通信Title{{message}}默认会被渲染成一个``标签-->GotoFooGotoBarHomeUserRegisterGotoreplaceGotoappendGotoRoute1constFoo
看地阔天高云深处·2020-07-08 03:25

vue学习

基础脚手架安装Vue脚手架npminstall-g@vue/clivue--version(一般是3.x.x)vuecreatemy-project拉取2.x模板npminstall-g@vue/cli-initvueinitwebpackmy-projectvueinitwebpackmy-project什么是前端渲染，什么是后端渲染后端渲染：后台服务器传到前台就已经渲染好了。后端路由：后端处理
爱一半码一半·2020-07-08 01:08

Vue学习—选项(三) mixins混入

mixins：mixins选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在Vue.extend()里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。也就是说同一个生命周期钩子写在构造器外部的会比构造器里面的先调用，如下例子结果如图：
我家小薇薇·2020-07-08 01:23

Vue学习之路——创建简单实例

随着软件行业的发展，我们做程序猿的自然也是要日益提高自己的技能，才能才在这个行业生存，那么如何更好地生存呢，以前说有一技之长便可吃遍天下，不过随着时间的推移，我们得不断地完善自己的技术了，现在看招聘网站也都是得会前端的，所以我们自然也是得学习的，那么一起学习Vue吧Vue.js官网地址：https://cn.vuejs.org/v2/guide/syntax.html起步官方指南假设你已了解关于H
清風徐來！·2020-07-08 01:59

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学习 5vue事件，点击、双击、鼠标事件

vue中绑定事件：v-on:click="add(1)"，使用v-on:绑定一个事件（也可以用@符号，如@click="add(1)"）,(如点击事件，触发add()方法)htmlVue.jsEvent涨一岁减一岁涨十岁减十岁他的年龄是{{age}}{{x}},{{y}}app.js'usestrict';//实例化vue对象newVue({el:"#vue-app",data:{age:30,x
数学太陡·2020-07-07 20:00

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学习（七） 自定义列表鼠标移入变色，点击变色（仿el-table实现）

常规列表数据用elementUI的el-table标签即可实现，但有些需要自定义列表数据样式的，则需要手写，这样如何做出和el-table一样的效果呢？一下代码可以实现页面渲染aaaaaaaaaaaaaaa其中通过tableDate遍历的序号动态绑定列表的class属性:class="[currentIdx==index?'itemBg':'',currentCheckIdx==index?'ch
两个娃他爹·2020-07-07 17:10

vue学习 四 v-on的事件修饰符和按键修饰符

方法只有纯粹的数据逻辑，而不是去处理DOM事件细节，为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。.stop阻止事件继续传播.prevent阻止标签的默认事件发生.capture.self.once事件只会发生一次.passive......使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self
liusongjing·2020-07-07 17:06

【vue学习】渲染函数&jsx

Vue推荐在绝大多数情况下使用模板来创建你的HTML。然而在一些场景中，你真的需要JavaScript的完全编程的能力。这时你可以用渲染函数先贴官网地址：渲染函数&jsx官网简单案例h1~h6模板写法render写法调用Vue-render函数createElement创建虚拟DomcreateElement到底会返回什么呢？其实不是一个实际的DOM元素。它更准确的名字可能是createNodeD
哈哈n·2020-07-07 13:17

【vue学习】动态组件和异步组件

动态组件有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：is上述内容可以通过Vue的元素加一个特殊的is特性来实现在上述示例中，currentTabComponent可以包括已注册组件的名字，或一个组件的选项对象component中绑定参数的方式和普通组件一样解析DOM模板时的注意事项：有些HTML元素，诸如、、和，对于哪些元素可以出现在其内部是有严格限制的。而有些元素
哈哈n·2020-07-07 13:17

day 86 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

本节目录一vue获取原生DOM的方式二DIY脚手架三vue-cli脚手架的使用四webpack创建项目的玩法五element-ui的使用六xxx七xxx八xxx一vue获取原生DOM的方式$refs之前我们获取dom是通过原生js或者jQuery的选择器来获取的，那么vue也给我们提供了一些获取dom的方法。方式：给标签或者组件添加ref属性，将来我们通过this.$refs属性可以获取到这个标签
deng6648·2020-07-07 06:30

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 实现添加标签删除标签

vue学习语法demo1{{error}}{{item.tag}}varapp=newVue({el:'#app',data:{txt:"",arr:[],error:""},watch:{},methods
datou-leo·2020-07-07 05:11

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

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

vue学习第17天，渲染 JSX 插件

1，每个虚拟DOMVNode都是唯一的可以多次使用工厂函数创建多个组件的实例2，在渲染函数中有些语法可以使用javascript不用再使用vue的API3，在渲染函数中使用ifelse而不是v-if4，在渲染函数中使用map而不是v-for5，在渲染函数中重写v-model6，提供了在渲染函数中被on的时候事件和按键的修饰符的前缀7，在渲染函数中通过this.$slots()获取VNode中的静态
Sukla·2020-07-07 00:37

点击列表中的哪一项, 那么该项的文字变成红色 Vue小练习

看Vue学习视频中看到这个小练习，如title。
Renaway·2020-07-07 00:08

vue学习进阶：组件入门练习到使用vue-cli开发

新建index.html，直接复制以下代码，双击浏览器运行即可。代码包含Vue的组件使用，可对照练习。Vue组件-->todoList提交{{item}}全局组件todo-item全局组件局部组件//全局组件Vue.component('my-p',{template:'我是一个P标签'})//局部组件varmyH2={template:'我是一个h2标签'}Vue.component('todo
Irene1991·2020-07-06 22:05

Vue学习-iView组件-Form表单

文章目录Form表单#1环境#2原生form#3iView组件#3.1添加字段校验Form表单#1环境"view-design":"^4.0.0","vue":"^2.5.2",#2原生form登录exportdefault{name:"test",data(){return{form:{username:"admin",password:"123456",}}},methods:{submitF
Coxhuang·2020-07-06 21:00

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学习系列（七）：Vue的v-on指令

Vue学习系列：上一篇：Vue学习系列（六）：使用IDEA开发Vue是v-开头指令爆红解决方法在Vue中，v-开头的指定都是和Vue相关的，其中v-bind是用来绑定标签属性的，而v-on是用来绑定DOM
看地阔天高云深处·2020-07-06 18:51

vue 学习 例子 整理 记录 自学 前端

vue学习例子整理记录自学前端{{msg}}开始停止varvm=newVue({el:'#app',data:{msg:'冠状病毒',intervalId:null},methods:{start:function
InJavaWeTrust·2020-07-06 15:54

webpack详解（再回顾）---vue学习过程

什么是Webpack？webpack是一个现代的JavaScript应用的静态模块打包工具。前端模块化webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用打包如何理解呢？就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle
zlppassion·2020-07-06 13:22

vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符

事件传递----冒泡和捕获DOM事件标准定义了两种事件流，这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safa
广积粮缓称王·2020-07-06 13:07

Vue学习13----数据请求模块fetch-jsonp

第三方提供的数据请求模块文档：https://www.npmjs.com/package/fetch-jsonpfetch-jsonp使用方法1.安装模块cnpminstallfetch-jsonp--save2.在使用的文件中引用importfetchJsonpfrom‘fetch-jsonp’;3.根据api使用App.vue代码：请求数据{{item.title}}/*fetch-jsonp
zhaihaohao1·2020-07-06 12:24

vue学习四：vue-resource 实现 get, post, jsonp请求

vue-resourcevue-resource的配置步骤：直接在页面中，通过`script`标签，引入`vue-resource`的脚本文件；注意：引用的先后顺序是：先引用`Vue`的脚本文件，再引用`vue-resource`的脚本文件；vue-resource实现get,post,jsonp请求：首先设置vue对象装载位置的html代码：然后设置实例选项：el:'#app',data:{},
zerobaek·2020-07-06 12:55
上一页 35 36 37 38 39 40 41 42 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他