b站vue笔记参考(复刻版)
2019最全vue教程
何二狗的代码人生
嘿,你好模具
展开
-
(十六)vue-cli
(十六)vue-cli16.1 vue-cli起步16.1.1 什么是vue-cliVue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖:可升级;基于 webpack 构建,并带有合理的默认配置;可以通过项目内的配置文件进行配置;可以通过插件进行扩展。一原创 2020-10-18 23:55:07 · 252 阅读 · 0 评论 -
(十五)webpack
(十五)webpack15.1 webpack起步15.1.1 什么是webpackwebpack是一个JavaScript应用的静态模块打包工具。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNs6HUr3-1603035588597)(./images/15-1.png)]从这句话中有两个要点,模块和打包需要关注。grunt/gulp都可以打包,那有什么区别。模块化webpack可以支持前端模块化的一些方案,例如AMD、CMD、CommonJS、ES6原创 2020-10-18 23:40:39 · 206 阅读 · 0 评论 -
(十四)前端模块化
(十三)前端模块化14.1 为什么要有模块化 随着前端项目越来越大,团队人数越来越多,多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目,小明定义一个aaa.js,小张定义了一个bbb.js。aaa.js//小明开发var name = '小明'var age = 22function sum(num1, num2) { return num1 + num2}var flag = trueif (flag) { console.log(sum(10, 20)原创 2020-10-18 23:53:46 · 172 阅读 · 0 评论 -
(十三)Vue实例的生命周
(十三)Vue实例的生命周期13.1 生命周期图 Vue实例的生命周期中有多个状态。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qL4WR9NW-1603036362049)(./images/lifecycle.png)]测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view原创 2020-10-18 23:53:05 · 135 阅读 · 0 评论 -
(十二)组件化高级
(十二)组件化高级12.1 slot-插槽的基本使用 我们在使用组件的时候有时候希望,在组件内部定制化内容,例如京东这样。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QSUHOLi1-1603036318333)(./images/12.1-1.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPmFb2L2-1603036318336)(./images/12.1-2.png)]这两个都是导航栏,组件的思想是可以复用的,原创 2020-10-18 23:52:21 · 263 阅读 · 0 评论 -
(十一)组件化开发
(十一)组件化开发11.1 组件化的基本使用 简单的组件示例 <div id="app"> <!-- 3.使用组件 --> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> <cpnc></cpnc> </div> <script src="https://原创 2020-10-18 23:51:37 · 210 阅读 · 0 评论 -
(十)v-model
(十)v-model10.1 v-model的基本使用 <div id="app"> <!-- 输入框内容修改,message也修改,修改message,input内容也修改,双向绑定 --> <input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue原创 2020-10-18 23:50:51 · 118 阅读 · 0 评论 -
(九)综合练习
(九)综合练习9.1 综合练习 综合前面的知识,需要通过一个小demo来串联起知识。 如图所示,[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c3H1nRkJ-1603036185023)(./images/9-1.png)] 点击“+”按钮,总价增加,点击“-”按钮总价减少,点击移除,移除当列。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2020-10-18 23:50:07 · 146 阅读 · 0 评论 -
(八)遍历循环
(八)遍历循环8.1 v-for遍历数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l原创 2020-10-18 23:49:28 · 151 阅读 · 0 评论 -
(七)条件判断
(七)条件判断7.1 v-if、v-eles、v-else-if v-if用于条件判断,判断Dom元素是否显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-原创 2020-10-18 23:48:42 · 107 阅读 · 0 评论 -
(六)事件监听
(六)事件监听6.1 v-on的基本使用 在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-原创 2020-10-18 23:48:07 · 117 阅读 · 0 评论 -
(五)计算属性
(五)计算属性5.1 计算属性的基本使用 现在有变量姓氏和名字,要得到完整的名字。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con原创 2020-10-18 23:47:29 · 304 阅读 · 0 评论 -
(四)动态绑定属性
(四)动态绑定属性4.1 v-bind的基本使用 某些时候我们并不想将变量放在标签内容中,像这样<h2>{{message}}</h2>是将变量h2标签括起来,类似js的innerHTML。但是我们期望将变量imgURL写在如下位置,想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接,此时的imgURL并非变量而是字符串imgURL,如果要将其生效为变量,需要使用到一个标签v-bind:,像这样<img v-bind:sr原创 2020-10-18 23:46:46 · 370 阅读 · 0 评论 -
(三)插值操作
(三)插值操作3.1 Mustache语法 mustache是胡须的意思,因为{{}}像胡须,又叫大括号语法。 在vue对象挂载的dom元素中,{{}}不仅可以直接写变量,还可以写简单表达式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2020-10-18 23:46:00 · 195 阅读 · 0 评论 -
(二)HelloVue
(二)HelloVue2.1 HelloVuejs 如何开始学习Vue,当然是写一个最简单的demo,直接上代码。此处通过cdn<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>获取vuejs。 vue是声明式编程,区别于jquery的命令式编程。2.1.1命令式编程 原生js做法(命令式编程)创建div元素,设置id属性定义一个变量叫message将messa原创 2020-10-18 23:45:02 · 136 阅读 · 0 评论 -
(一)ES6补充
(一)ES6补充1.1块级作用域 ES6之前没有块级作用域,ES5的var没有块级作用域的概念,只有function有作用域的概念,ES6的let、const引入了块级作用域。 ES5之前if和for都没有作用域,所以很多时候需要使用function的作用域,比如闭包。1.1.1 什么是变量作用域 变量在什么范围内可用,类似Java的全局变量和局部变量的概念,全局变量,全局都可用,局部变量只在范围内可用。ES5之前的var是没有块级作用域的概念,使用var声明的变量就是全局的。{ var原创 2020-10-18 23:44:08 · 100 阅读 · 0 评论