Vue2学习
1.了解前端
1 .前端三要素
HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
2 .什么是CSS预处理器？
用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用
SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS：基于NodeJS，通过客户端处理，使用简单
3 .JavaScript
原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES; 20221010 已有ES13
ES5（全浏览器支持） ES6（常用，当前主流版本：webpack打包成为ES5支持）
4 .常见前端技术
4.1 UI框架
Ant-Design：阿里巴巴出品，基于React的UI框架
BootStrap：Titter推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
4.2 JavaScript构建工具
babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
node -v npm -v查看相应版本
npm install cnpm -g
npm install --registry= https://registry.npm.taobao.org
2.Vue概念
Vue( 读⾳/vju/,类似于view) 是⼀套⽤于构建⽤户界⾯的渐进式框架,发布于2014年2⽉。与其它⼤型框架不同的是， Vue被设计为可以⾃底向上逐层应⽤。Vue的核⼼库只关注视图层，不仅易于上⼿，还便于与第三⽅库( 如：vue-router，vue-resource，vuex) 或既有项⽬整合
轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb( Angular压缩后56kb+，React压缩后44kb+)
移动优先。更适合移动端， 比如移动端的Touch事件
易上手，学习曲线平稳，文档齐全
吸取了Angular( 模块化) 和React( 虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性
开源，社区活跃度高
MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF和Silverlight的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下:
1 ) 该层向上与视图层进行双向数据绑定
2 ) 向下与Model层通过接口请求进行数据交互
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。
View是视图层,也就是用户界面。前端主要由HTHL和css来构建,为了更方便地展现Model层的数据,已经产生了各种各样的前后端模板语言,比如FreeMarker，Thymeleaf等
Model是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的Model数据进行转换处理,做二次封装,以生成符合View层使用预期的视图数据模型。
需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分,而Model层的数据模型是只包含状态的
MVVM框架已经把最脏最累的一块做好了, 我们开发者只需要处理和维护View Model,更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
网络通信 ： axios
页面跳转 ： vue-router
状态管理：vuex、pinia
Vue-UI :Element UI 主要特点是桌面端支持较多
iview 主要特点是移动端支持较多
ICE, AtUI,Flutter,WeUI等
3.Vue生命周期
! [ 20200417183048206 ] ( C:\ Users\ lmy94\ Desktop\ Java学习\ picture\ 20200417183048206 .png)
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例
4.Vue基础语法
1.示例代码
DOCTYPE html > < htmllang = " en" xmlns: v-bind= " http://www.w3.org/1999/xhtml" > < head> < metacharset = " UTF-8" > < title> title > head > < body> < divid = " app" > < spanv-bind: title= " message" > span > < h1v-if = " ok" > h1 > < h1v-else > h1 > < liv-for = " (item,index) in items" > li > < buttonv-on: click= " sayHi" > button > div > < scriptsrc = " https://cdn.jsdelivr.net/npm/[email protected] /dist/vue.min.js" > script > < scripttype = " text/javascript" >
var vm = new Vue ( {
el : "#app" ,
data : {
message : 'HelloWorld' + new Date ( ) . toLocaleString ( ) ,
type : true ,
items : [ { message : '1' } ,
{ message : '2' } , ...
]
} ,
methods : {
sayHi : function ( event ) {
alert ( this . message) ;
}
}
} ) ;
script > body > html > 2.语法指令
1 . v-bind: ( 可以直接简写为:) 作用:绑定data元素特性
2 . v-if,v-else-if,v-else 作用:条件判断
3 . v-show: 作用：操作元素的隐藏和显示
4 . v-for 作用: 循环遍历
v-if:**操作元素的删除和添加，适合对元素显示隐藏操作**频率低的情况使用
v-show:操作元素的隐藏和显示，仅是为元素添加hidden样式，适合对元素显示隐藏操作**频率高**的情况使用
5 . v-on:( 可以简写为@) 作用:监听事件 可以绑定到Vue中的methods中的方法事件
6 . v-model 作用: 数据双向绑定
注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项
1 .el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。相当于一个容器，跟上面的div id = "app" 做关联，从此以后上面div id = "app" 里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容
2 .data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
3 .template属性
用来设置模板，会替换页面元素，包括占位符。Vue.component( ) 组件中会用到，其实很多地方都会用到
4 .methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中，用来写方法，函数的;
5 .render属性
创建真正的Virtual Dom
6 .computed属性
用来计算,根据已经存在的属性计算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。
7 .watch侦听属性
watch:function( new,old) { } ; 监听data中数据的变化两个参数，一个返回新值，一个返回旧值; 当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用watch
watch: 监视,能够监听到数据的变化,只要数据变化的时候,都会自定执行对应的方法,其中可以检测的数据来源分为三部分 data,computed, props
computed: 计算属性,存在一个计算缓存的特性,每一次计算之后,只要里面的逻辑不发生变化,每一次重复调用,都会使用上一次执行的结果,能够节省计算的时间
computed:定义计算属性;
计算结果缓存起来的属性( 将行为转化成了静态的属性) ; 可以想象为缓存!
只有在它的相关依赖发生改变时才会进行更新
1 .本组件计算
2 .计算props的值
3 .计算vuex的state或者getters值的变化
在Vue.js中我们使用< slot> 元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;
Vue.component( 'todo' ,{
template:'\
'
} ) ;
Vue.component( "todo-items" ,{
props:[ "item" ,"index" ] ,
template:"{{index+1}},{{item}} "
} ) ;
var vm = new Vue( {
el:"#vue" ,
data:{
title:"秦老师系列课程" ,
todoItems:[ 'test1' ,'test2' ,'test3' ]
}
} ) ;
数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了;
要触发的事件为v-on绑定的方法,即Vue实例中定义的方法
< todo-items slot = "todo-items" v-for= "(item,index) in todoItems"
:item_p= "item" :index_p= "index" v-on:remove= "removeItems(index)" :key= "index" >
< /todo-items>
Vue.component( "todo-items" ,{
props:[ "item_p" ,"index_p" ] ,
template:"{{index_p+1}},{{item_p}} 删除 " ,
methods:{
remove_methods:function ( index) {
this.$emit ( 'remove' ,index) ;
}
}
} ) ;
var vm = new Vue( {
el:"#vue" ,
data:{
title_text:"秦老师系列课程" ,
todoItems:[ 'test1' ,'test2' ,'test3' ]
} ,
methods:{
removeItems:function( index) {
console.log( "删除了" +this.todoItems[ index] +"OK" ) ;
this.todoItems.splice( index,1) ;
}
}
} ) ;
3.Vue组件
1 . 使用Vue.component( ) 方法注册组件
Vue.component( "pan" ,{
props:[ 'hi' ] ,
template:'{{hi}} '
} ) ;
//再实例化Vue
var vm = new Vue( {
el:"#app" ,
} ) ;
2 .使用props属性传递参数
5.Axios通信
Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，主要作用就是实现AJAX异步通信，少用jQuery，因为它操作Dom太频繁;
从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[ JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF( 跨站请求伪造)
npm install axios 或者 yarn add axios
axios( {
method: 'post/get(默认)/delete/put等' ,
url: '/user/12345' ,
data: {
firstName: 'Fred' ,
lastName: 'Flintstone'
}
} ) .then( function ( response) {
console.log( response) ;
} )
.catch( function ( error) {
console.log( error) ;
} )
.then( function ( ) {
} ) ; ;
axios( {
method: 'get' ,
url: 'http://bit.ly/2mTM3nY' ,
responseType: 'stream'
} )
.then( function ( response) {
response.data.pipe( fs.createWriteStream( 'ada_lovelace.jpg' ))
} ) ;
async function getUser ( ) {
try {
const response = await axios.get( '/user?ID=12345' ) ;
console.log( response) ;
} catch ( error) {
console.error( error) ;
}
}
axios.get( url[ , config] )
axios.delete( url[ , config] )
axios.post( url[ , data[ , config] ] )
axios.put( url[ , data[ , config] ] )
controller.abort( )
6.vue-cli脚手架
vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
cnpm instal1 vue-cli-g
vue list
1 .创建目录并进入目录进行初始化
vue init webpack myvue
Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
install vue-router:是否安装vue-router
Use ESLint to lint your code:是否使用ESLint做代码检查
Set up unit tests:单元测试相关
Setupe2etests with Nightwatch：单元测试相关，
Should we run npm install for you after the,project has been created:创建完成后直接初始化，
2 .初始化并运行
npm install
npm run dev
7.vue-router路由
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5 历史模式或hash模式， 在IE 9 中自动降级
自定义的滚动行为
npm install vue-router --save-dev
1 .在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter) ;
hidden: true
alwaysShow: true
redirect: noRedirect
name:'router-name' 、
query: '{"id": 1, "name": "ry"}'
roles: [ 'admin' , 'common' ]
permissions: [ 'a:a:a' , 'b:b:b' ]
meta:{
noCache: true,
title: 'title' ,
icon: 'svg-name' ,
breadcrumb: false,
activeMenu: '/system/user' ,
}
export default new Router( {
routes:[ {
path:'/content' ,
name:'content' ,
component:Content
} ,.. .. .
]
} ) ;
2 .在main.js中配置路由
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置
Vue.config.productionTip = false ;
new Vue( {
el:"#app" ,
//配置路由
router,
components:{ App} ,
template:'
} ) ;
3 .在xxx.vue中使用路由
< template>
< div id = "app" >
< router-link to = "/" > 首页< /router-link>
< router-link to = "/content" > 内容< /router-link>
< router-view> < /router-view>
< /div>
< /template>
< script>
export default{
name:'App'
}
< /script>
< style> < /style>
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成
1 .修改路由配置, 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符
{
path: '/user/profile/:id' ,
name:'UserProfile' ,
component: UserProfile
}
2 、传递参数
此时我们在Main.vue中的route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径;
< router-link :to= "{name:'UserProfile',params:{id:1}}" > 个人信息 < /router-link>
3 、在要展示的组件Profile.vue中接收参数 使用 { { $route .params.id} } 来接收
< template>
< ! -- 所有的元素必须在根节点下-->
< div>
< h1 >< /h1 >{ { $route .params.id} }
< /div>
< /template>
1 、修改路由配置 , 主要在router下的index.js中的路由属性中增加
props: true 属性
{
path: '/user/profile/:id' ,
name:'UserProfile' ,
component: UserProfile,
props: true
}
2 、传递参数和之前一样 在Main.vue中修改route-link地址
< ! --name是组件的名字 params是传的参数 如果要传参数的话就需要用 v:bind:来绑定-->
< router-link :to= "{name:'UserProfile',params:{id:1}}" > 个人信息 < /router-link>
3 、在Profile.vue接收参数为目标组件增加 props 属性
< template>
< div>
个人信息
{ { id } }
< /div>
< /template>
< script>
export default {
props: [ 'id' ] ,
name: "UserProfile"
}
< /script>
< style scoped>
< /style>
Vue 中的重定向是作用在路径不同但组件相同的情况
{
path: '/main' ,
name: 'Main' ,
component: Main
} ,
{
path: '/goHome' ,
redirect: '/main'
}
hash：路径带
history：路径不带
export default new Router( {
mode: 'history' ,
routes: [
]
} ) ;
1 .创建一个NotFound.vue视图组件
< template>
< div>
< h1 >404 ,你的页面走丢了< /h1 >< /div>
< /template>
< script>
export default {
name: "NotFound"
}
< /script>
< style scoped>
< /style>
2 .修改路由配置index.js
import NotFound from '../views/NotFound'
{
path: '*' ,
component: NotFound
}
beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行
to:路由将要跳转的路径信息
from:路径跳转前的路径信息
next:路由的控制参数
next( ) :跳入下一个页面
next( ’/path’) :改变路由的跳转方向，使其跳到另一个路由
next( false) :返回原来的页面
next(( vm) = > { } ) :仅在 beforeRouteEnter 中可用，vm 是组件实例
export default {
name: "UserProfile" ,
beforeRouteEnter: ( to, from, next) = > {
console.log( "进入路由之前" )
next( vm = > {
vm.getData( )
} ) ;
} ,
beforeRouteLeave: ( to, from, next) = > {
console.log( "离开路由之前" )
next( ) ;
} ,
methods: {
getData: function ( ) {
this.axios( {
method: 'get' ,
url: 'http://localhost:8080/static/mock/data.json'
} ) .then( function ( response) {
console.log( response)
} )
}
}
8.webpack
webpack是一个现代JavaScript应用程序的静态模块打包器( module bundler) .
webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载
dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件
main.js：项目的入口文件。
index.html: 浏览器打开展示的首页html（在这里引用的是src内最终打包的文件即dist文件夹的内容）。
package.json：通过npm init生成的，npm包管理的文件。
npm install webpack -g
npm install webpack-cli -g
webpack -v
webpack-cli -v
创建 webpack.config.js配置文件
entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
output：输出， 指定WebPack把处理完成的文件放置到指定路径
module：模块， 用于处理各种类型的文件
plugins：插件， 如：热更新、代码重用等
resolve：设置路径指向
watch：监听， 用于设置文件改动后直接打包
npm run build 或 yarn build
9.实战使用
1 、创建一个名为hello-vue的工程vue init webpack hello-vue
2 、安装依赖
cd hello-vue
npm install vue-router --save-dev
npm i element-ui -S
npm install
cnpm install sass-loader node-sass --save-dev
npm run dev
3 、npm命令解释：
npm install moduleName：安装模块到项目目录下
npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
npm install -save moduleName：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写
4 .目录结构( )
assets：用于存放资源文件,如404相关页面文件
components：用于存放Vue功能组件
views：用于存放Vue视图组件
router：用于存放vue-router配置
store: vuex/pinia状态管理
utils:存放一些工具js
10.Vue require与import区别
在es6之前js一直没有自己的模块语法，为了解决这种尴尬就有了require.js的出现。在es6发布之后js又引入了import的概念。
在导出的文件中定义 module.exports（node里的模块引用）,导出的对象的类型不予限定（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require( ) 方法引入对象即可
module.exports = {
a: function ( ) {
console.log( 666 )
}
}
var obj = require( '../a.js' )
obj.a( ) //666
导出的对象必须与模块中的值一一对应，换一种说法就是导出的对象与整个模块进行结构赋值
export default{ #( 最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{ } )
a: function ( ) {
console.log( 666 )
}
}
export function ( ) { #导出函数}
export { newA as a ,b,c}
import a from '...'
import { .. .} from '...'
import a as biubiubiu from '...'
import { a as biubiubiu,b,c}
require 是赋值过程并且是运行时才执行，也就是异步加载。
require可以理解为一个全局方法，因为它是一个方法所以意味着可以在任何地方执行。
import 是解构过程并且是编译时执行。
import必须写在文件的顶部。
require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，而import只需要依据import中的接口在编译时引入指定模块所以性能稍高
export default function ( ) { }
// 等效于:
function a ( ) { } ;
export { a as default} ;
11.面试相关
