08-循环遍历
# 1. v-for遍历数组 123456789101112131415161718192021222324252627282930<!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"> <title>Document</title></head><body> <div id="app"> <!-- 1.遍历过程没有使用索引（下标值） --> <ul> ...
09-综合练习
综合前面的知识，需要通过一个小demo来串联起知识。 如图所示：  点击“+”按钮，总价增加，点击“-”按钮总价减少，点击移除，移除当列。 # 1. 目录结构  # 2. index.html 1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>综合练习</title> <link rel="styleshe...
11-组件化开发
# 1. 组件的基本使用 简单的组件示例 123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <!-- 3.使用组件 --> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> <cpnc></cpnc></div><script src="../js/vue.js"></scrip...
10-v-model
# 1. v-model的基本使用 123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="text" v-model="message">{{message}}</div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', ...
13-Vue实例的生命周期
# 1. 生命周期图 Vue实例的生命周期中有多个状态。  > 测试代码 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue实例的生命周期</title></head><body><div id="app"> <h1>测试生命周期</h1> <div>{{msg}&a...
12-组件化高级
# 1. slot-插槽的基本使用 我们在使用组件的时候有时候希望，在组件内部定制化内容，例如京东这样。   这两个都是导航栏，组件的思想是可以复用的，把这个导航栏看做一个组件。 这个组件都可以分成三个部分，左边中间右边，如果可以分割组件，就可以定制化组件内容了。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<!-- 父组件 --><div id="app"> <cpn></cpn> <cpn> <span style="c...
14-前端模块化
1. 为什么要模块化 随着前端项目越来越大，团队人数越来越多，多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目，小明定义一个aaa.js，小张定义了一个bbb.js。 aaa.js 1234567891011//小明开发var name = '小明'var age = 22function sum(num1, num2) { return num1 + num2}var flag = trueif (flag) { console.log(sum(10, 20));} 此时小明的sum是没有问题的。 bbb.js 123//小红var name = "小红"var flag = false 此时小明和小红各自用各自的flag你变量没问题。 但是此时小明又创建了一个mmm.js 1234//小明if(flag){ console.log("flag是true")} 在index.html页面导入这些js文件 123<...
16-VueCLI
1. vue-cli起步1.1 什么是vue-cliVue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。 一个丰富的官方插件集合，集成了前端生态中最好的工具。 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。 1.2 CLI是什么意思？ CLI是Command-Line Interface，即命令行界面，也叫脚手架。 vue cli 是vue.js官方发布的一个vue.js...
17-Vue-Router
# 1. 路由简介 **什么是路由？** - 路由就是通过互联的网络把信息从源地址传送到目的地的活动 - 路由提供了两种机制：路由和传送 - 路由是决定数据包从来源到目的地的路径 - 转送就是将数据转移 - 路由表 - 路由表本质就是一个映射表，决定了数据包的指向 # 2. 前端/后端路由 1. 后端渲染（服务端渲染） jsp技术 后端路由，后端处理URL和页面映射关系，例如springmvc中的@requestMapping注解配置的URL地址，映射前端页面 2. 前后端分离（ajax请求数据） 后端只负责提供数据 静态资源服务器（html+css+js） ajax发送网络请求后端服务器，服务器回传数据 js代码渲染dom 3. 单页面富应用（SPA页面） 前后端分离加上前端路由，前端路由的url映射表不会向服务器请求，是单独url的的页面自己的ajax请求后端，后端只提供api负责响应数据请求。改变url，页面不进行整体的刷新。 整个网站只有一个html页面。 # 3. URL的hash和HTML5的h...
15-webpack
# 1. webpack起步 ## 1.1 什么是webpack webpack是一个JavaScript应用的静态模块打包工具。  从这句话中有两个要点，**模块**和**打包**需要关注。**grunt/gulp**都可以打包，那有什么区别。 > 模块化 webpack可以支持前端模块化的一些方案，例如AMD、CMD、CommonJS、ES6。可以处理模块之间的依赖关系。不仅仅是js文件可以模块化，图片、css、json文件等等都可以模块化。 > 打包 webpack可以将模块资源打包成一个或者多个包，并且在打包过程中可以处理资源，例如压缩图片，将scss转成css，ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。**grunt/gulp**也可以打包。 **和grunt/glup的对比** - grunt/glup的核心是Task - 我们可以配置一系列的task...
