Vue
Android_la
Java入门到进阶级别
展开
-
Day25——webpack的使用
文章目录一. 回顾二. webpack的使用2.1 什么是webpack2.2 前端模块化2.3 打包2.4 和grunt/gulp对比2.5 webpack与node的关系2.6 安装webpack2.7 webpack的基本使用2.8 webpack的配置2.8.1 问题背景2.8.2 如何配置简单的webpack命令2.8.3 配置webpack映射为npm run2.8.3.1 问题背景2.8.3.2 实现npm run build代替webpack2.8.3.3 使用npm run build的好原创 2020-07-27 17:49:52 · 238 阅读 · 0 评论 -
Day24——前端模块化
文章目录一. 回顾二. 前端模块化2.1 为什么需要模块化2.2 ES6的模块化实现一. 回顾前面学习了Day23——slot插槽的使用,今天学习模块化二. 前端模块化2.1 为什么需要模块化随着web页面越来越多,多人同时开发页面,有可能会存在多个同名的变量或者函数或者类,导致合并功能模块是会出现问题。因此将各自负责的功能模块导出成一个模块,模块内的变量或者函数或者类不受外部同名的影响。2.2 ES6的模块化实现注意代码中的注释,很重要,如下:index.html<body>原创 2020-07-27 16:08:00 · 118 阅读 · 0 评论 -
Day23——slot插槽的使用
文章目录一. 回顾二. slot插槽的基本使用2.1 什么是插槽2.2 为什么使用插槽2.3 使用slot插槽一. 回顾前面学习了Day22——子组件访问父组件——parent&root,今天学习slot插槽的基本使用二. slot插槽的基本使用2.1 什么是插槽总结一句话,在定义组件时,留下一个位置,不作定义,当使用组件时,可以对这个位置做任意的扩展。比如添加按钮、输入框、复选框等等2.2 为什么使用插槽组件开发的目的就是为了能重复利用组件,然而有时候虽然组件能重复利用,但是真正共同原创 2020-07-27 15:45:17 · 500 阅读 · 0 评论 -
Day22——子组件访问父组件——$parent&$root
文章目录一. 回顾二. 子组件访问父组件一. 回顾前面学习了Day21——父组件访问子组件——children&refs,今天学习子组件访问父组件parent&root二. 子组件访问父组件这种情况很少用到,了解即可:<body><div id="app"> <cpn></cpn></div><template id="cpn"> <div> <h2>我是cpn组原创 2020-07-27 15:31:09 · 112 阅读 · 0 评论 -
Day21——父组件访问子组件——$children&$refs
文章目录一. 回顾二. 父组件访问子组件2.1 问题背景2.2 实现一. 回顾前面学习了Day20——父子组件通信案例,今天学习通过使用$children或者$refs实现父组件访问子组件二. 父组件访问子组件2.1 问题背景前面学习过父子组件之间的通信,但是都是通过传值的方式来实现的。这种方式极其繁琐沉重,有时候希望直接拿到父组件对象或者子组件对象,通过对象访问父子组件的数据或方法2.2 实现$children拿到的是一个数组,数组的元素是子组件对象。通过children访问需要使用下标,有原创 2020-07-27 15:26:04 · 203 阅读 · 0 评论 -
Day20——父子组件通信案例
文章目录一. 回顾二. 父子组件通信案例2.1 需求情况2.2 分析2.3 实现2.4 使用子组件watch属性改进实现一. 回顾前面学习了Day19——组件化开发,今天学习一个父子组件通信案例二. 父子组件通信案例2.1 需求情况创建一个组件,父组件传给子组件2个变量a,b,要求修改其中一个变量,另一个变量的值是前一个变量的100倍;修改后面的变量,前面的变量变为后面的变量的1/100倍。使用父子组件通信实现。2.2 分析2.3 实现注意代码中的注释,很重要,如下:<b原创 2020-07-27 15:02:55 · 264 阅读 · 0 评论 -
Day19——组件化开发
文章目录一. 回顾二. 组件化开发2.1 什么是组件化?2.2 使用组件的3个步骤2.3 使用组件的简单例子2.4 全局组件和局部组件一. 回顾前面学习了Day18——v-model双向绑定,今天学习一下组件化开发二. 组件化开发2.1 什么是组件化?一个完整的页面可以分成多个组件,每一个组件实现特定的功能,而每个组件可以再进行细分,如下:2.2 使用组件的3个步骤创建组件构造器(使用Vue.extend())const cpn = Vue.extend({ template: `原创 2020-07-18 11:49:24 · 187 阅读 · 0 评论 -
Day18——v-model双向绑定
文章目录一. 回顾二. v-mode双向绑定2.1 v-model的基本使用2.2 v-model的原理2.3 v-model结合radio类型2.4 v-model结合checkbox类型2.5 v-model结合select类型2.6 v-model修饰符的作用2.7 总结一. 回顾前面学习了Day17——JavaSrcipt高阶函数的使用,今天学习v-model双向绑定二. v-mode双向绑定2.1 v-model的基本使用语法:v-model="变量"例子:<body>原创 2020-07-17 18:10:26 · 304 阅读 · 0 评论 -
Day17——JavaSrcipt高阶函数的使用
文章目录一. 回顾二. JavaSrcipt高阶函数一. 回顾前面写了一个Day16——书籍购物车案例,今天学习JavaSrcipt高阶函数二. JavaSrcipt高阶函数直接结合例子讲解,注意注释中的阐述都是高阶函数的作用,如下://编程范式:命令时编程,函数时编程//编程范式:面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)//使用filter/map/reduce,函数式编程const num = [100, 20, 40, 12, 43, 50, 88, 85];原创 2020-07-17 16:34:53 · 205 阅读 · 0 评论 -
Day16——书籍购物车案例
文章目录一. 回顾二. 书籍购物车案例一. 回顾前面学习了插值操作、mustache语法、v-once、v-html、v-text、动态绑定v-bind、v-bind绑定class对象以及数组、v-bind绑定style对象以及数组、计算属性computed、ES6语法、v-on事件监听、v-if条件判断、v-for循环遍历、响应式的数组方法。今天对这些已学知识作出总结并写一个案例。二. 书籍购物车案例效果:项目目录:index.html<!DOCTYPE html><原创 2020-07-17 16:29:47 · 207 阅读 · 0 评论 -
Day15——数组中哪些方法是响应式的
文章目录一. 回顾二. 数组中的响应式方法一. 回顾前面学习了Day14——v-for循环遍历,今天学习数组中哪些方法是响应式的。二. 数组中的响应式方法这里直接给出例子,具体用法以及作用在注释中,如下:<body><div id="app"> <ul> <li v-for="item in letters" >{{item}}</li> </ul> <button @click="btnClick原创 2020-07-17 16:18:10 · 149 阅读 · 0 评论 -
Day14——v-for循环遍历
文章目录一. 回顾二. 循环遍历2.1 v-for的语法2.2 v-for遍历数组2.3 v-for遍历对象2.4 组件的key属性三. 案例一. 回顾前面学习了Day13——v-if、v-else、v-else-if条件判断,今天学习v-for循环遍历二. 循环遍历2.1 v-for的语法语法:v-for="{变量别名 in 变量}",如果要拿到数组中的索引,就用v-for="{(变量, index) in 变量}"2.2 v-for遍历数组例子:<body><div原创 2020-07-17 15:39:12 · 398 阅读 · 0 评论 -
Day13——v-if、v-else、v-else-if条件判断
文章目录一. 回顾二. 条件判断2.1 v-if的简单使用2.2 v-else的使用2.3 v-if、v-else、v-else-if的使用三. 用户登录切换小案例3.1 效果3.2 例子3.3 input复用四. v-show与v-if一. 回顾前面学些了Day12——v-on事件监听,今天学习v-if、v-else、v-else-if条件判断二. 条件判断v-if、v-else-if会根据表达式的true or false在DOM中渲染 或 销毁 元素或组件2.1 v-if的简单使用当v-i原创 2020-07-17 15:16:56 · 603 阅读 · 0 评论 -
Day12——v-on事件监听
文章目录一. 回顾二. 事件监听2.1 v-on使用情景2.2 v-on介绍以及基本使用2.3 v-on参数传递2.4 v-on修饰符的使用一. 回顾前面学习了Day11——ES6语法补充,今天学习事件监听二. 事件监听2.1 v-on使用情景用户与前端界面进行交互,我们需要监听事件,比如点击、拖拽、键盘事件等等2.2 v-on介绍以及基本使用语法:v-on:事件名="处理事件的方法()"(其中的括号()可以要,也可以不要)语法糖:@事件名="处理事件的方法()"作用:绑定事件监听器例子原创 2020-07-17 14:47:05 · 223 阅读 · 0 评论 -
Day11——ES6语法补充
文章目录一. 回顾二. ES6语法补充2.1 块级作用域2.2 const的使用和注意2.3 对象字面量以及方法的增强写法2.3.1 对象字面量的增强写法2.3.2 对象方法的增强写法2.3.3 例子一. 回顾前面学习了Day10——vue的计算属性computed,今天学习ES6语法补充,方便后面的学习使用ES6新语法二. ES6语法补充2.1 块级作用域例子:<body> <button>按钮1</button> <button>按钮原创 2020-07-17 11:56:59 · 127 阅读 · 0 评论 -
Day10——vue的计算属性computed
文章目录一. 回顾二. vue的计算属性2.1 计算属性的应用情景2.2 计算属性的基本使用2.3 计算属性的复杂操作2.4 计算属性的getter和setter2.5 computed计算属性和methods属性的对比2.5.1 使用methods2.5.2 使用computed一. 回顾前面学习了Day9——v-bind动态绑定class、style,今天来学习vue的计算属性二. vue的计算属性2.1 计算属性的应用情景需求:有时候需要在多个地方将多个数据结合在一起显示,或者对数据进行转换原创 2020-07-17 11:30:03 · 134 阅读 · 0 评论 -
Day9——v-bind动态绑定class、style
文章目录一. 回顾二. v-bind绑定属性2.1 v-bind动态绑定class(对象语法)2.2 v-bind动态绑定class(数组语法)2.3 v-bind动态绑定style(对象语法)2.4 v-bind动态绑定style(数组语法)一. 回顾前面学习了Day8——v-bind的基本使用,今天学习v-bind绑定class、style属性二. v-bind绑定属性2.1 v-bind动态绑定class(对象语法)语法:用大括号{}表示对象,对象里面有很多键值对,key是类名,value是原创 2020-07-17 09:55:46 · 218 阅读 · 0 评论 -
Day8——v-bind的基本使用
文章目录一. 回顾二. v-bind介绍2.1 v-bind使用的情景2.2 v-bind的语法2.3 例子一. 回顾前面学习了Day7——v-once、v-html、v-text、v-pre指令的使用,今天学习v-bind的基本使用二. v-bind介绍2.1 v-bind使用的情景除了将数据动态显示出来,有时候我们也需要对标签的某些属性进行动态设置。比如我想要动态展示图片,那么<img>的src属性就需要动态绑定值了,再比如动态设置<a>的href属性。总结:v-bi原创 2020-07-17 09:24:46 · 189 阅读 · 0 评论 -
Day7——v-once、v-html、v-text、v-pre指令的使用
文章目录一. 回顾二. 其他指令的使用2.1 v-once指令2.2 v-html指令2.3 v-text指令2.4 v-pre指令一. 回顾前面学习了Day6——插值操作——mustache语法,今天学习v-once、v-html、v-text、v-pre指令。二. 其他指令的使用2.1 v-once指令作用:变量不会随着数据的改变而改变。即不会响应式。例子:<div id="app"> <h2>{{message}}</h2> <h2 v-原创 2020-07-17 09:10:17 · 170 阅读 · 0 评论 -
Day6——插值操作——mustache语法
文章目录一. 回顾二. mustache语法一. 回顾前面学习了Day5——代码缩进规范以及webstorm自定义template快捷键,今天学习插值操作——mustache语法二. mustache语法语法:{{变量}}例子:<div id="app"> <h2>{{message}}</h2> <h2>{{message}}, 李银河</h2> <!--在花括号里面可以拼串--> <h2>{{原创 2020-07-17 08:56:09 · 160 阅读 · 0 评论 -
Day5——代码缩进规范以及webstorm自定义template快捷键
文章目录一. 回顾二. 问题背景三. 步骤一. 回顾前面学习了Day4——vue的生命周期,今天设置一下代码的缩进以及定义template模板,使得后面书写例子能够更加快速。二. 问题背景前端代码一般的缩进是2个空格,vue源码项目的缩进也是2个空格,因此我也设置缩进为2个空格。后面的学习会经常用到一些重复的代码,为了能快速的书写出来,这里自定义template。三. 步骤首先是设置缩进空格,如下:接下来自定义template,如下:贴出自定义的template代码,其原创 2020-07-16 22:47:10 · 379 阅读 · 0 评论 -
Day4——vue的生命周期
文章目录一. 回顾二. 获取Vue的源码一. 回顾前面学习了Day3——创建Vue实例传入的options,今天简单了解vue生命周期。二. 获取Vue的源码要了解vue的生命周期,最好的方法就是去了解Vue的源码。下面给出获取vue源码的步骤:去github搜索vue,或者直接点击github上的vue项目,如下:...原创 2020-07-16 22:35:05 · 125 阅读 · 0 评论 -
Day3——创建Vue实例传入的options
文章目录一. 回顾二. 有哪些options三. 目前需要掌握的options一. 回顾前面Day2——MVVM,今天了解创建Vue实例传入的options二. 有哪些options详细地址:Vue有哪些options找options 步骤:三. 目前需要掌握的optionsoptions类型作用elString 或 HTMLElement决定Vue实例会管理哪一个DOMdataobj 或 function(组件当中必须是一个函数)Vue实例对应的数据对原创 2020-07-12 15:43:52 · 167 阅读 · 0 评论 -
Day2——MVVM
文章目录一. 回顾二. Vue中的MVVM三. 计数器案例中的MVVM一. 回顾前面学习了Day1——认识Vue,今天了解MVVM二. Vue中的MVVM如下图:M:Model,数据模型层。数据可能是写死的数据,或者从网络上请求得来的数据V:View,视图层。负责展示给用户看的界面,包含各种信息。在前端开发中,通常是DOM层。VM:ViewModel,视图模型层。它是View和Model沟通的桥梁,作为中间者。一方面它实现了Data Binding(数据绑定),将Model的改变实时反应到V原创 2020-07-12 15:31:55 · 161 阅读 · 0 评论 -
Day1——认识Vue
文章目录一. 情况二. Vue简介三. 环境搭建四. 安装vue4.1 直接用 <script>引入4.2 NPM方式4.3 命令行工具 (CLI)五. 初体验Vue5.1 在前端界面展示数据5.2 列表展示数据5.3 计数器一. 情况目前对Vue零基础,想尝试使用Vue做前端界面,参考的教学视频是2019年最全最新Vue、Vuejs教程,从入门到精通。结合 Vue的官方文档以及教学视频,现作出笔记供自己复习使用,如有错误请指正。二. Vue简介Vue(读音 /vjuː/,类似于 vie原创 2020-07-12 15:07:42 · 204 阅读 · 0 评论