Vue学习
IT_CREATE
小小编程码农一名,嘿嘿
展开
-
webpack4.x打包图片文件遇到效果不显示的问题(file-loader加载遇到的狗血问题)
file-loader加载遇到的狗血问题-webpack4.x最近在学习vue,看的b站视频学习,b站里面用的是webpack3.6,而我用的是webpack4.43.0版本的,在webpack4.x版本和3.x版本还是挺有区别的,比如配置,打包方式就不一样。在学习到图片文件的打包配置时,遇到了狗血问题,现阶段我还是说一下webpack4.x的操作步骤,怎么样执行到打包图片文件这个地方,遇到了什么问题?(当图片大于limit限制,启动file-loader加载生成文件,生成成功但是页面没有效果,同时配置f原创 2020-06-21 23:12:28 · 3291 阅读 · 0 评论 -
十二、VUE基础学习篇(key指令的使用)-清除表单元素切换遗留之前元素的内容
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(key指令的使用)请看案例: <!--没有添加key的情况--> <p style="color: red">没有添加key的情况</p> <span v-if="isUser"> <lable for="userName">用户名称</lable> <input type="text" id原创 2020-06-07 02:18:42 · 624 阅读 · 0 评论 -
十一、VUE基础学习篇(组件化component、components)-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(组件化component、components)1、组件化的概念■人面对复杂问题的处理方式 口任何一个人处理信息的逻辑能力都是有限的 口所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。 口但是,我们人有一种天生的能力,就是将问题进行拆解。 口如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。■组件化也是类原创 2020-06-07 00:56:15 · 1071 阅读 · 0 评论 -
十、VUE基础学习篇(双向绑定)- v-model、v-model修饰符、值绑定
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(双向绑定)1、v-model的使用v-model 用在表单中,与数据是双向绑定关系,相当于表单绑定的vue实例中data的数据改变了,表单的渲染也会改变,同样操作表单,改变了表单的数据,相应的vue实例中data的数据也会发生相应的改变,这种页面渲染的表单数据和vue实例的data数据互相影响,任何一方改变都会导致另一方数据的改变就是数据的双向绑定下面介绍几种常见的表单数据绑定:1)inp原创 2020-06-06 23:43:47 · 508 阅读 · 0 评论 -
九、VUE基础学习篇(数组中的响应式)
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(数组中的响应式)所谓数组中的响应式,也就是我们标签绑定的vue实例中data属性中数组类型的数据,数据的增、删、改、查的改变,都会实时渲染到对应的页面上。不过对于数组中元素的修改,我们不能用 数组名[索引] = 值 这种形式来修改,虽然值改变了,但页面渲染不会生效,如果数组中是对像,我们修改对象的属性是可以的 数组名[索引].属性名 = 值 ,如果替换整个对象,也是不可被渲染的<!DOC原创 2020-06-06 19:57:29 · 379 阅读 · 1 评论 -
八、VUE基础学习篇(条件判断)- v-if和v-else-if和v-else的使用、v-show的使用
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(条件判断)v-if和v-else和v-else-if的使用就和我们普通的js语法一样,if - else if - else的使用是一样的,条件成立,执行标签内部的操作,条件不满足则不执行标签内部操作,同样的支持嵌套操作,同样的if可单独存在,if和else if和else的层次结构表达和js一致<!DOCTYPE html><html lang="en"><h原创 2020-06-06 18:52:42 · 1159 阅读 · 0 评论 -
七、VUE基础学习篇(事件监听)- v-on、事件修饰符、按键监听
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(事件监听)1、v-on监听事件监听事件:vue事件,以 v-on: 开头,指定不同的事件,事件的属性值可以是方法,也可以是代码片段@ 是语法糖的一种写法,等价于v-on:,为了简写方便,用以替换v-on:格式:v-on:事件名称@:事件名称事件修饰符:事件修饰符的使用,也就是在事件监听后以 .xxx结尾的就是事件修饰符格式:v-on:事件名称.修饰符四种修饰符:.stop原创 2020-06-06 17:54:32 · 486 阅读 · 0 评论 -
六、VUE基础学习篇(es6语法补充)- let和var的区别、对象增强写法、const的含义与使用、高阶函数
VUE基础篇(es6语法补充)1、var和let的区别、const常量es5和es6中var和let的区别:es5中的var是没有块级作用域的,es6中的let是具有块级作用域的const的含义与使用:const修饰常量,表示不可被修改,只在初始化时进行一次赋值,const必须在定义时进行初始化const修饰的对象不能改变,但是对象内部的属性可以被改变,学过java的都知道在es6中,优先使用const,只有在需要改变某一个标识符的时候才用let<!DOCTYPE html>&原创 2020-06-06 17:08:18 · 798 阅读 · 0 评论 -
五、VUE基础学习篇(计算属性的操作computed)- computed和methods的差异
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(计算属性操作)1、computed的基本用法计算属性操作是我们遇到一些稍显复杂的计算或者拼接等场景下使用的,理解起来就是平时我们我们做计算或者拼接可以是用Mustache语法,也就是大括号的方式,比如:{{a * b}},{{firstStr + lastStr}} 等简单计算拼接,但是如果我们遇到复杂情况,这种写法就满足不了我们的要求,同时这么写也显得代码冗余,不容易维护使用:vue实例对象原创 2020-06-06 16:19:38 · 352 阅读 · 0 评论 -
四、VUE基础学习篇(循环v-for)- v-for、v-bind:key
VUE基础篇(循环)1、v-forv-for 是vue标签中指定for循环的标签,标签对应的值的也就是类似python中for循环或者java中foreach的写法在vue中遍历可以分为三个部分:1)遍历数组2)遍历对象3)数字迭代1.1 遍历数组遍历数组可以分为两种:1)遍历元素 ,格式 : 元素 in 数组2)遍历元素和索引 , 格式:(元素,索引) in 数组<!DOCTYPE html><html lang="en"><head> &原创 2020-06-06 15:25:03 · 4939 阅读 · 0 评论 -
三、VUE基础学习篇(动态绑定)- v-bind(v-bind:src 、v-bind:href、v-bind:class、v-bind:style)
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(插值操作)1、v-bind在标签上绑定属性值,不可以用Mustache语法,也就是{{ }},必须使用v-bind来绑定属性,v-bind的格式是 v-bind:标签属性名或者语法糖形式 :标签属性名代码中展示了 v-bind:src 、v-bind:href 、v-bind:class—对于 v-bind:src 、v-bind:href来说 可以绑定data中的变量,也可以绑定方法,方原创 2020-06-05 23:08:45 · 6112 阅读 · 0 评论 -
二、VUE基础学习篇(插值操作)-Mustache语法、v-once、v-text、v-pre、v-html、v-cloak
码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexiVUE基础篇(插值操作)1、Mustache语法Mustache语法 ,也就双大括号 {{ }} ,包裹的数据数据是响应式的,也就是可以实时替换 ,当vue实例中对应数据改变,页面渲染的值也会改变,它的作用范围是在内容中,不是在标签上,替换的是vue实例对象中data属性对应的数据对象中的一些属性Mustache语法支持:----普通值替换----简单的表达式<!DOCTYPE html>原创 2020-06-05 22:27:01 · 431 阅读 · 0 评论 -
一、vue基础学习篇(初体验)- methods、data、el
VUE基础篇1、vue.js的引入需要先去官网下载vue.js,然后在我们需要使用的html文件中引入该js文件<script src="../js/vue.js"></script>2、vue.js的使用2.1、vue对象的创建与数据绑定创建Vue对象,直接 new Vue() ,在new的时候传入一个待vue解析的对象,这个对象含有一些属性,比如:el(用于挂载要管理的元素),data(定义的数据,最终会替换html中指定的变量值)等等{{属性名}} 作为值替换,原创 2020-06-05 21:38:34 · 451 阅读 · 0 评论