vue基础

Vue基础知识

目录一、Vue起步1HelloWorld2开发TodoList（v-modelv-forv-on）3MVVM模式4前端组件化5使用组件改造TodoList▲6组件间传值二、Vue基础1Vue实例2Vue
taoqidejingling·2020-08-16 08:33

Vue基础入门

Vue是什么？借用官网的介绍：Vue.js（读音/vjuː/,类似于view）是一套构建用户界面（View）的渐进式MVVM框架。Vue被设计为可以自底向上逐层应用。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。vue官方教程网址使用Vue1、我们要使用vue，有两种方式(1).一是在咱们的传统项目中使用，通过script标签来引入vue.js的库，这个vue.js的库可
hcg1023·2020-08-16 08:52

Vue基础汇总实践

1)双向绑定：{{message}}newVue({el:'#app',data:{message:'Hellovue.js'}})2)渲染列表{{todo.text}}newVue({el:'#app',data:{todos:[{text:'学习vue'},{text:'学习Sass'},{text:'学习webpack'}]}})3)处理用户输入{{message}}反转newVue({el
bboyjoe·2020-08-16 05:11

vue基础知识点

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

vue基础：获取表单数据，双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

vue基础：获取表单数据，双向数据绑定Vue事件介绍以及Vue中的ref获取dom节点1.在vue中我们通过v-model进行数据绑定，vue其实就是实现mvvm的框架，mvvm表示，model的改变会影响
谷咕咕·2020-08-15 10:50

Vue基础-文本显示，v-html插入html代码

1.显示内容{{}}{{message}}newVue({el:'#app',//el是选择元素的挂载节点，这里#是加父节点iddata:{//赋值message:'HelloVue.js!'}})效果：HelloVue.js!2.v-htmlnewVue({el:'#app',data:{message:'aaa'}})alert(document.getElementById('app').i
weixin_30776863·2020-08-15 08:50

vue基础methods、computed、created、mounted简析

1.methods：定义方法，methods将被混入到Vue实例中。可以直接通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例。{{msg}}{{price}}外部调用vue里的方法//要给对象赋值letvm=newVue({el:'#app',data:{price:199,msg:'methods',},methods:{add(){//console.lo
JaydenSun·2020-08-15 07:19

Vue基础技术|vue-loader+webpack项目配置

项目初始化首先需要创建一个空目录vue-demo，然后通过命令行进入该目录后，执行npminit指令来初始化为一个npm的项目，基本选项都可以选择默认值即可，初始化完成后会在当前目录下生成一个package.json文件，该文件是项目的配置文件。➜~cdDocuments/workspace/vue-demo➜vue-demopwd/Users/a1/Documents/workspace/vue
不忘初心 砥砺前行·2020-08-15 07:43

前端工程化--关于npm/yarn、webpack、vue的工具链

webpack、vue的工具链管理工具npm/yarn安装起步包的安装删除包和依赖安装所有依赖更新包清楚缓存设置webpack配置安装webpack4.0和webpcak-cliwebpack基础入门Vue
kikpin·2020-08-14 22:04

vue2.0 axios封装、vuex介绍

这篇博客针对了解过vue基础，但是没有做过vue项目的童鞋。如果想看基础指令，可以看我之前的一篇博客，请点击跳转，不过我还是建议看文档比较好。
weixin_30625691·2020-08-14 20:03

VUE基础知识介绍（二）VUE提高

组件基础什么是组件**需求:**如果页面中有多个一样结构的控件,比如{{count1}}按钮{{count2}}按钮{{count3}}按钮{{count4}}按钮{{count5}}按钮newVue({el:'#app',data:{count1:0,count2:0,count3:0,count4:0,count5:0},methods:{changeCount1(){this.count1+
liuerchong·2020-08-14 14:09

VUE基础之项目构建

写在前面前端学习无论如何都绕不过VUE这个山头，那么现阶段大火的VUE到底是何方神圣呢？Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。v
沈熙杭·2020-08-14 12:33

vue基础

指令，事件//指令5双向数据数据与{{msg}}功能一样，但前面那个的好处是网速慢的时候也不会看到小胡子，另一个网如果不好会看到小胡子{{content}}只绑定一次，以后不会再受数据变化就更新了把HTML字符当HTML代码渲染，如msg:"hello"页面显示就是hello，但如果用小胡子显示数据的话就是hello要循环谁就在谁身上添加该属性,item就是当前项，index是索引//事件v-on
dituke6943·2020-08-13 13:55

【Vue基础知识再巩固】--Vue的边界情况（依赖注入等）

1，元素，组件的访问根元素：this.$root.XXX(真实项目中多用VueX对全局的状态进行管理)父元素：this.$parent.XXX（多层父级this.$parent.$parent.XXX寻找，无法很好扩展到更深层级的嵌套组件，引依赖注入）子组件元素：this.$refs.XXX（渲染后才可以取到，多结合this.$nextTick()使用）依赖注入：父元素设置可访问方法provide
GQ_cyan·2020-08-13 11:50

vue基础语法之分支循环结构

分支循环结构分支结构v-ifv-elesv-eles-ifv-showfalse隐藏true显示v-if和v-show的区别`v-if`控制元素是否渲染到页面v-show控制元素是否显示(已经渲染了页面)v-if适用于操作不是很多的情况隐藏就是把这个元素删除掉(removeChild)v-show频繁操作隐藏就是display:none循环结构循环结构遍历数组v-for遍历数组(数组里面的值可以是
我今年六岁·2020-08-12 17:36

Vue基础-自定义指令的使用

Vue的内置指令已经有很多了，比如v-if、v-on、v-show、v-for等等。在这些指令中，已经大部分可以满足大部分的业务需求了。不过如果要开发一些比较特殊的功能，就需要我们自己自定义一些指令来完成。举例：如何实现打开页面时，input会自动获取焦点？(https://img-blog.csdn.net/20180107164046991?watermark/2/text/aHR0cDovL
lander_xiong·2020-08-12 17:36

Vue基础

渐进式JS框架声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建原生JSvarmsg1='helloworld';vardiv=document.getELementById('msg');div.innerHTML=msg1;JQueryvarmsg2='helloworld';$('#msg').html('msg2');Vue/*基本使用步骤1.提供标签用于填充数据、2.引入
吴越子坤·2020-08-12 16:22

vue基础知识

文章目录一、过滤器1.1vue中的过滤器1.2多个vue实例1.3私有过滤器1.4全局过滤器和私有过滤器区别二、键盘修饰符和自定义键盘修饰符2.1常见键盘修饰符2.2自定义键盘修饰符三、自定义指令3.1自定义全局指令3.2自定义局部指令3.3钩子函数简写3.4使用自定义指令四、vue中的ajax请求Vue-resource五、vue的生命周期函数5.1创建期间的生命周期函数：5.2运行期间的生命周
有名的卡德除·2020-08-12 12:16

VUE基础常用功能学习和实操（引入JS形式）

文章目录1.前言2.创建普通项目3.引入Vue的js文件4.编写HelloVue!4.1动态修改5.绑定元素特性5.1效果6.判断特性codeFalseTrue6.2.Ifelse6.3.Elseif7.绑定数组7.1.div7.2.数组7.3.效果8.监听——逆转消息9.v-model双向绑定9.1.code9.2.实现效果9.3.例子29.4.实现效果10.监听属性watch11.样式绑定11
长臂人猿·2020-08-12 12:32

Java程序员入门Vue基础之指令入门学习（三）

文章目录前言1.条件渲染指令1.1v-if1.2v-else、v-else-if指令1.3v-show指令2.列表渲染成v-for指令3.方法与事件指令3.1v-bind3.2v-on指令4.v-model与数据双向绑定5.其他指令5.1v-text与v-html前言我们在学习Java的时候知道有JSP页面，我们通过EL表达式可以取到后台的值然后进行页面的渲染。在Vue中也有类似的编程特点。Vue
codegeekgao·2020-08-12 11:23

vue基础学习第六天

注意：有时候使用npminode-sass-D装不上，这时候，就必须使用cnpminode-sass-D在普通页面中使用render函数渲染组件在webpack中配置.vue组件页面的解析运行cnpmivue-S将vue安装为运行依赖；运行cnpmivue-loadervue-template-compiler-D将解析转换vue的包安装为开发依赖；运行cnpmistyle-loadercss-l
伍伍怀·2020-08-11 21:05

vue-cli 创建项目选项详解（vue基础）

从今天开始，开始写vue学习笔记专题。先写几篇基础知识，后续会有vue的一些高阶操作，例如自动化搭建vue多页面，vue插件开发，vue库的开发以及自动化脚本分开文件打包等等。vue的官方文档写得真的很好，值得我们好好仔细得研读。本专题主要记录一些vue文档没有的或者容易让人忽略的再或者不够详细的内容。让我们一起学习进步。根据的是最新版vue-cli4vuecreate基础选项?Checkthef
毕加伟·2020-08-11 20:19

vue基础之常用特性

vue常用特性表单基本操作获取单选框中的值通过v-model男女varvm=newVue({el:"#app"data:{//默认会让当前的value值为2的单选框选中gender:2,},})获取复选框中的值1.通过v-model2.和获取单选框中的值一样3.复选框checkbox这种的组合时data中的hobby我们要定义成数组否则无法实现多选爱好：篮球唱歌写代码varvm=newVue({e
fearNoBug·2020-08-11 18:52

Vue基础篇-基本指令 插值表达式,v-cloak,v-text,v-html和v-bind

1.插值表达式{{变量}}例如：{{data}}newVue({el:"#app",data:{data:"显示的数据信息"}});2.v-cloak用于处理网络延迟造成插值表达式渲染出现{{data}}的情况.例如：[v-clocak]{display:none;}{{data}}newVue({el:"#app",data:{data:"显示的数据信息"}});3.v-text用于显示文本信息
晨曦遇晓·2020-08-11 18:10

Vue文本渲染指令v-text

文本渲染指令：这里补充个vue基础指令v-text文本渲染指令，v-text取值为数据data中某项时，便以文本形式渲染到DOM中场景：如果想单纯展示vue对象中的数据，可以使用文本渲染指令v-text
PEI_WEB·2020-08-11 17:58

Vue学习02-Vue插值操作

前面一篇文章中简单的记录了一下Vue基础的内容，接下来主要记录Vue的插值与表达式，以及它的一些基本指令。
毛糖糖·2020-08-11 16:21

【Vue.js学习笔记】2：从Vue中的插值认识Vue

Vue的上一篇学习已经是上周了，深切感受到了vue-cli和node的复杂，还是先用cdn引入Vue然后好好学一下Vue基础吧。
LauZyHou·2020-08-11 16:58

Vue基础：响应式

最近换了东家，比较忙、比较累，但博客的更新速度不能明显下降。Fighting！写在前面Vue不是框架（前端框架往往需要解决路由、试图管理、数据持久化等流程），Vue只关注视图层。webpack构建Vue项目使用webpack构建Vue项目，在配置文件中会看到如下代码：module.exports={//...resolve:{alias:{//使用完整版构建，而非运行时构建版本'vue$':'vu
奋飛·2020-08-11 12:53

vue基础知识点21-25

21、Vue是如何实现数据双向绑定的？Vue数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：其中，View变化更新Data，可以通过事件监听的方式来实现，所以Vue的数据双向绑定的工作主要是如何根据Data变化更新View。Vue主要通过以下4个步骤来实现数据双向绑定的：实现一个监听器Observer：对数据对象进行遍历，包括子属性对象的属性，利用Object.defineP
向金华·2020-08-11 00:02

vue基础知识点16-20

16、你使用过Vuex吗？Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。（1）Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。（2）改变store中的状态的唯一途径就是
向金华·2020-08-11 00:02

vue基础知识点26-29

26、虚拟DOM实现原理？虚拟DOM的实现原理主要包括以下3部分：用JavaScript对象模拟真实DOM树，对真实DOM进行抽象；diff算法—比较两棵虚拟DOM树的差异；patch算法—将两个虚拟DOM对象的差异应用到真正的DOM树。27、Vue中的key有什么作用？key是为Vue中vnode的唯一标记，通过这个key，我们的diff操作可以更准确、更快速。Vue的diff过程可以概括为：o
向金华·2020-08-11 00:30

vue基础知识点11-15

11、父组件可以监听到子组件的生命周期吗？比如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，可以通过以下写法实现：//Parent.vue//Child.vuemounted(){this.$emit(“mounted”);}复制代码以上需要手动通过$emit触发父组件的事件，更简单的方式可以在父组件引用子组件时通过@hook来监听即可，如下所示
向金华·2020-08-11 00:30

Vue基础

渐进式前端框架，数据驱动vue官方文档1.Vue基础el：app对象挂载点，用css选择器选择需要挂在到哪个元素data：数据对象，字符串、数组、对象的访问如下代码所示method：方法{{message
所追寻的风·2020-08-10 21:47

Vue基础

特性检测：检测浏览器是否支持某个属性image.pngimage.pngvue指令页面渲染vue的指令都是v-这种格式，虽然v-xxx="xxx"写的值是用""包裹，但实际上是js，因此需要在双引号里再加层引号，否则会报错。v-text:用于替换插值表达式，如果有v-text，插值就不生效。v-html:输出转译过的不带HTML标签的HTML语句。富文本编辑器的内容直接渲染的话是被转译过的，那么H
壹枕星河·2020-08-10 16:52

vue基础之必备指令及使用

Vue是什么？vue是一套用于构建用户界面的渐进式框架，vue核心库只关注视图层，不仅易上手还便于与第三方库或既有项目的整合指令：本质就是属性，Vue中以v-开头的属性就是指令v-clooak防止页面加载时出现闪烁问题v-clooak的使用/*1、通过属性选择器选择到带有属性v-cloak的标签让他隐藏*/[v-cloak]{/*元素隐藏*/display:none;}{{msg}}/*让带有插值
fearNoBug·2020-08-10 15:11

vue基础语法以及父子组件如何相互传值

vue模板引擎语法，关注数据层面Mustache语法:{{msg}}主要是用date控制html赋值：v-html=”“绑定属性：v-bind:id=”“使用表达式：{OK?”yes”:”NO”}文本赋值：v-text=”“指令：v-if=”“过滤器：{{message|capitalize}}和v-bind:id=”rawId|formatId”class和style绑定对象语法：v-bind：
csl125·2020-08-10 09:27

学习vue看这篇文章就够了

最快入门vue开发安装nodejs（node中包含了npm）http://nodejs.cn/download/用npm安装vue-cli到电脑npminstall@vue/cli-g通过vue-cli生成vue
yuanyi正·2020-08-10 08:20

Vue学习

一、Vue基础指令插值表达式{{msg}}直接读取data中的数据v-cloak用法:直接在标签上加v-cloak属在css中设置[v-cloak]{display:none;}V-text用法:v-text
Guan丶·2020-08-09 21:27

新手自学VUE过程及困难

Download2.看了一大堆文字性的什么是vue...结果还是不懂3.直接看视频,就会了基础,脑袋里面大概知道是个什么概念https://www.imooc.com/video/169814.有了一点点vue
Amelia_Liu·2020-08-09 18:13

Vue基础：Vue事件修饰符的使用

1、事件处理  如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。  在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：.stop：等同于·JavaScript·中的event.stopPropagation()，防止事件冒泡
zmt0104·2020-08-09 16:11

vue基础（五）：给DOM添加事件的特殊情况 $nextTick

$nextTick是在DOM更新循环结束之后执行的延迟回调，在修改数据之后使用$nextTick可在回调中获取到更新后的DOM。newVue({el:'#app',data(){return{isShow:false}},template:''mounted:function(){this.isShow=true;console.log(this.$refs.input)//this.$refs.
锦岁·2020-08-09 14:29

Vue基础之Class和Style绑定

既然v-bind可以动态绑定标签的属性，那么也可以用v-bind来处理class和style，只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind用于class和style时，Vue.js专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组绑定HTMLClass：对象语法：我们可以传给v-bind:class一个对象，以动态地切换class，对象的属性名就是
tian361zyc·2020-08-09 12:32

vue实战记录（一）- vue实现购物车功能之前提准备

一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据作者：狐狸家的鱼本文链接：vue实战-实现购物车功能（一）GitHub：sueRimn一、前提准备1、vue
DebJane·2020-08-09 12:07

vue基础知识

1.声明式渲染Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：{{essage}}varapp=newVue({el:’#app’,data:{message:'HelloVue!'}})除了文本插值，我们还可以像这样来绑定元素attribute：varapp2=newVue({el:’#app-2’,data:{message:'页面加载于'+newData()
hfnmhgi·2020-08-09 08:57

VUE基础入门 第一个VUE项目（一）

Window10下VUE开发环境搭建开发环境准备Windows10+WebStorm+NodeJSWebStorm2018.2下载地址NodeJS下载地址安装环境安装NodeJs双击打开NodeJS安装包，一直Next选择安装路径时可以根据自己需求进行更改安装完毕，打开CMD命令行查看是否安装成功验证无误后由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所
清晨先生·2020-08-09 03:51

Vue全家桶—Vue基础

1.Vue概述Vue：渐进式JavaScript框架声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建官网：https://cn.vuejs.org/v2/guide易用：熟悉HTML、CSS、JavaScript知识后可以快速上手灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大小，超快虚拟DOM2.Vue基本使用2.1helloworld基本步骤{{msg}}//Vu
友人A ㅤ·2020-08-08 20:28

在vue中格式化表格中的时间为指定格式

在vue表格中如果直接绑定时间字段默认显示格式一般为：yyyy-MM-ddHH:mm:ss，但有时候只需要显示年月日或者时分秒，这时我们就可以用到过滤器（filter）vue基础表格使用过滤器的写法{{
intomylife·2020-08-08 20:18

vue基础之v-bind属性、class和style用法分析

一、属性属性:v-bind:src=""width/height/title…简写::src=""推荐效果能出来，但是会报一个404错误效果可以出来，不会发404请求window.onload=function(){newVue({el:'#box',data:{url:'https://www.baidu.com/img/bd_logo1.png',w:'200px',t:'这是一张美丽的图片'
易水人去丶明月如霜·2020-08-08 18:51

vue个人总结--喜欢的点赞哟!

vue基础知识补充MVC与MVVM的MVC:后端开发模式V-->view视图层或者表现层C-->control控制器M-->model数据层当用户操作了视图层,如果需要进行业务处理,通过ajax发送到服务器
gongliming_qd·2020-08-08 15:58

vue基础学习vscode的骚操作

先放一张效果图突然感觉很蛋疼，就把vue官网的文档，弄了个md文件出来。声明一下，我也不知道我是哪根筋不对这么玩。所以记录一下，看起来不是无用功的样子。下载链接百度网盘VSCode插件下载插件：MarkdownPreviewEnhancedMarkdownPDFopeninbrowser打开md文件点击右上角显示效果，然后关掉md文件，然后再打开你保存代码的文件夹点击拆分，就可以实现第一张图的效果
chengpa9968·2020-08-08 14:02
上一页 20 21 22 23 24 25 26 27 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他