Vue框架笔记

最新推荐文章于 2024-08-05 10:41:22 发布
最新推荐文章于 2024-08-05 10:41:22 发布
阅读量1.2k 收藏 5
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50663569/article/details/121923614
版权

课程：VUE-coderwhy

学习VUE的前置知识：HTML、CSS、JavaScript、ES6、nodejs

Vue全家桶：VueCore+Vue-Router+Vuex

Vue指令

  1. 内容绑定
  • v-text :设置标签的内容textContent
  • v-html :设置标签的innerHTML
  • v-on :为元素绑定事件
  1. 显示切换，属性绑定
  • v-show :根据表达式的真假，切换元素显示和隐藏
  • v-if :根据表达式的真假，切换元素显示和隐藏(操纵DOM元素)
  • v-bind :设置元素的属性，如src，title，class
  1. 列表循环，表单元绑定
  • v-for :根据数据生成列表结构
  • v-model :获取和设置表单元素的值,双向数据绑定。更改任何一边，都能同步更改对方的值。
v-model中的修饰符

v-model指令可以设置单选框/复选框/下拉列表

  • v-model.lazy：懒加载
  • v-model.number：转数字类型
  • v-model.trim：过滤空格
计算属性computed
  1. 计算属性的本质
    fullname:{set(),get()}
  2. 计算属性computed和方法属性methods的对比
  • 计算属性是有缓存的
  • 计算属性在多次使用时，只会调用一次

ECMAScript 6

箭头函数

定义函数的三种方式
// 1.一般定义函数function
const a = function(){
    
}
// 2.通过在对象中定义函数
const obj ={
    b:function(){

    }
}
// 3.箭头函数定义函数
const c = () =>{
    
}
箭头函数中的参数和返回值问题
// 箭头函数中有多个参数
const sum = (sum1,sum2) =>{
    return sum1+sum2
}
// 箭头函数中只有一个参数
const power = num => { // 可以省略参数小括号
    return num * num
}

// 箭头函数中有多行代码
const test = () =>{
    console.log('Hello World');
    console.log('Hello Vuejs');
} 
// 箭头函数中只有一行代码
// const mul = (num1,num2) =>{
//     return num1*num2
// }
const mul = (num1,num2) => num1*num2; // 简略return和{}

const demo = () => console.log('Hello Demo');
console.log(demo());
// 返回值为console.log('Hello Demo')，类型为undefined.
// 控制台输出结果为 Hello Demo 和 undefined.

// const vue ={
//     render:function(h){
//         return h(App)
//     }
// }
const vue={
    render: h => h(App)
}
箭头函数中的this指向问题

在箭头函数中this指向与普通函数不同，箭头函数的{}不形成作用域，所以箭头函数中一般没有定义this，需要往外层寻找。
它是在当前作用域中向外层查找，一层层查找直到找到有this的定义的作用域，箭头函数中的this引用的就是其最近作用域中的this。

setTimeout(function(){
    console.log(this); //window
},1000)
setTimeout(() =>{
    console.log(this); //window
},1000)

const obj = {
    test1(){
        setTimeout(()=>{
            console.log(this);//window
        },1000)
    },
    test2(){
        setTimeout(()=>{
            console.log(this);//obj
        },1000)
    }
}

数组的解构

对象的解构

const obj={
    name:"zhangsan",
    age:18,
    height:1.80,
    weight:60
}

// 普通写法
// const name = obj.name;
// const age=obj.age;
// const height=obj.height;
// const weight=obj.weight;

// 对象解构写法
const {name,age,height,weight}=obj;

JavaScript高阶函数

filter过滤
        const nums=[10,20,30,40,101,200,5200];
        let newNums=nums.filter(function(n){//n为自定义参数
            return n<100;
        })
        console.log(newNums);
  • filter中的回调函数有一个要求：必须返回一个boolean值
  • TRUE：当返回true时，函数内部会制动将这次回调的值加入到新数组中；
  • FALSE：当返回false时，函数内部会过滤掉这次的值。
map映射
        let newNums2=nums.map(function(n){
            return n*2;
        })
        console.log(newNums2);
reduce汇总
  • reduce函数的作用是对数组中所有的内容进行汇总
  • 数组.reduce(参数一，参数二);
  • 参数一：累加操作
  • 参数二：累加的初始值
        let newNums3= nums.reduce(function(preValue,n){
            return preValue+n;
        },0)
        console.log(newNums3);

Promise

Promise是异步编程的一种解决方案。
单线程运行时用户进行了网络请求=>JS代码处理=>发生阻塞=>开启异步请求=>异步请求完成=>回调函数=>返回结果

网络请求回调地狱
$.ajax('url1', function (datal) {
    $.ajax(datal('url2'), function (data2) {
        $.ajax(data2 ('url3'), function (data3) {
            $.ajax(data3('url4'], function (data4){ 
                console.log (data4);
            })
        })
    })
})
Promise网络请求
// promise( (resolve,reject)=>{函数名(){resolve()}} ).then(异步处理结果)
// promise参数：resolve(函数)和reject(函数)，内部构造函数
// promise异步网络请求过程为链式编程
new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // 网络请求成功调用resolve
        resolve()
        // 网络请求失败调用reject
        // reject()
    },5000)
}).then(()=>{
    console.log("第一次网络请求结果");
    // 返回结果的同时，继续进行下一步网络请求
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve()
        },1000)
    }).then(()=>{
        console.log("第二次网络请求结果");
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },1000)
        }).then(()=>{
            console.log("第三次网络请求结果");
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    // 网络请求成功调用resolve
                    // resolve()
                    // 网络请求失败调用reject
                    reject('erro message')
                },1000)
            }).then(()=>{
                console.log("第四次网络请求结果");
            }).catch(err=>{
                console.log(err);//网络请求失败结果
            })
        })
    })
})
Promise异步操作
  • pending：等待状态。当正在进行网络请求时，或者定时器没有到时间时。
  • fulfill：满足状态。当主动回调了resolve函数时，就处于满足状态，并且会执行.then()
  • reject：拒绝状态。当主动回调了reject函数时，就处于拒绝状态，并且会执行.catch()

同步：synchronization ; 异步：asynchronization

Promise链式调用简写
new Promise((resolve,reject)=>{
    setTimeout(function(){
        resolve("第一次网络请求")
    },5000)
}).then(data=>{
    console.log(data);// =>第一次网络请求结果
    return data + '+第二次网络请求结果'
}).then(data=>{
    console.log(data);// =>第一次+第二次网络请求结果
    return data + '+第三次网络请求结果'
}).then(data=>{
    console.log(data);// =>第一+二+三次网络请求结果
    return Promise.reject(data + 'error')//返回第四次网络请求失败
}).then(data=>{//回调Promise.reject时，这部分代码不会执行
    console.log(data);// =>X 前三次+第四次网络请求结果没有输出
    return data + '+第四次网络请求结果'
}).catch(data=>{
    console.log(data);// =>前三次请求结果+error
    return data + '+第五次网络请求结果'
}).then(data=>{
    console.log(data);// =>前三次请求结果+error+第五次网络请求结果
})

组件化开发

  • 将一个完整的页面分成跟多个组件。
  • 每个组件都用于实现页面的一个功能块。
  • 每一个组件又可以进行划分。
Vue组件化
  1. 创建组件构造器：调用Vue.extend()方法
  2. 注册组件：调用Vue.component()方法
  3. 使用组件：在Vue实例的作用范围内使用

conponent,组件;extend,扩展;template,模板

全局组件和局部组件
父组件与子组件
父子组件通信
  • 父组件向子组件传递数据props(属性)
  • 子组件向父组件传递数据$emit(发射)
插槽slot(slät)

封装组件的时候，抽取共性，保留不同。
最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据需求决定插槽中插入什么内容。插槽内容由调用者来决定。

具名插槽
<div>
    <cpn></cpn>
    <cpn><button slot='left'></button>
    <button slot='right'></button></cpn>
</div>
<template id='templateid'>
    <div>
        <p>组件</p>
        <slot>(插槽默认值)</slot>
        <!-- slot标签+name属性=具名插槽 -->
        <slot name='left'>左插槽</slot>
        <slot name='center'>中间插槽</slot>
        <slot name='right'>右插槽</slot>
    </div>
</template>

Vue.conponent('cpn',{template:'#templateid'})
编译作用域
  • 父组件模板的所有东西都会在父级作用域内编译
  • 子组件模板的所有东西都会在子级作用域内编译

<my-cpn v-show='isShow'></my-cpn>

其中，isShow属性包含在父组件的作用域中，所以其是否显示由父组件来决定。

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供。

模块化开发

模块化开发的核心：导出和导入

模块化开发之匿名函数解决方案

我们可以将需要暴露到外面的变量使用一个模块作为出口，在模块内部给对象添加各种需要暴露到外面的属性和方法，最后将这个对象返回，在外面使用一个moduleX接受。

常见的模块化规范：CommonJS、AMD、CMD、Modules

// 在小明的ming.js工程文件里，模块名moduleA
var moduleA=(function(){
    var obj={};//定义一个对象
    var flag:true;
    obj.flag=flag;//在对象内部添加变量和方法
    return obj;//将对象返回
})
// 在小刚的gang.js工程文件里，模块名moduleB
var moduleB=(function(){
    var obj={};
    var flag:false;
    obj.flag=flag;
    return obj;
})
// 在项目经理的main.js文件里
moduleA.flag;
moduleB.flag;

模块化开发之CommonJS

CommonJS的导出
module.exports={
    sum:10,
    falg:false,
    sayHi:function(){
        console.log('Hello')
    }
}
CommonJS的导入
var ming=require(./ming.js)
var sum=ming.sum;//对象解构
var falg=ming.flag;//对象解构
// var {sum,flag}=require(./ming.js);//语法糖

模块化开发之ES6实现方案

依然是两个核心：导出export，导入import。
在实际开发中，ES6模块化开发是主要实现方案。

ES6的导出
// 导出属性和方法：先定义再导出
var name = 'xiaoming';
var age = 18;
var sayHi = function () {
    console.log('Hi');
}

export {
    name,
    age，
    sayHi
}
// 导出属性和方法：直接定义导出
export var height = 1.75;
export var weight = 120;
export var sayHello=function(){
    console.log('Hello')
}
// 导出函数或类
export function mul(num1, num2) {
    return num1 * num2
}
export class Person {
    run() {
        console.log('Running');
    }
}
ES6的导入
// 导入export中定义的变量
import {name,age,height,weight} from './ming.js';
// 导入export中的函数或类
import {mul} from './ming.js';

Webpack

从本质来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。webpack不仅仅是对JavaScript文件进行模块化打包，对于CSS、.img.jpg图片、json文件都可以被当做模块使用进行打包。

打包

将webpack中的各种资源进行打包合并成一个或多个包(bundle)。在打包的过程中，将scss/less转成css，将.jsx/.vue转成JS，将TypeScript或者ES6语法转成ES5语法等等操作。

模块打包工具：gulp、vite、rollup、grunt

grunt/gulp和webpack的不同
  1. 如果你的工程模块非常简单，只需要进行简单的合并、压缩就使用grunt/gulp即可；但是如果整个项目使用了模块化管理，而且各模块之间依赖性非常强，就需要使用webpack.
  2. grunt/gulp更加强调前端流程自动化，模块化不是其核心；webpack更加强调模块化开发管理，其它都是附带功能。
搭建webpack环境

webpack：模块化打包工具。
webpack为了可以正常运行，必须依赖node环境。
node环境为了可以正常执行代码，必须依赖npm工具。

npm：(node packages manager)，node包管理工具

  1. 安装node.js环境

node -v：Windows cmd中输入命令：“node -v” 查看node版本号。

  1. 安装webpack
  • （全局安装）cmd命令：npm install webpack@3.6.0 -g
  • （本地安装）cmd命令：npm install webpack@3.6.0 --save-dev
    本地安装，开发时依赖，项目打包后不需要继续使用。

terminal：终端。Windows终端同步VSCode终端。

webpack --version：查看webpack版本cmd命令。

webpack的使用
  • dist文件夹(distribution分发):打包后文件
  • src文件夹(源文件)

webpack 入口文件 出口文件

  • VSCode终端打包命令：
webpack ./src/main.js ./dist/bundle.js
  • VSCode终端打包运行成功命令：
Hash: 58b68b0178a632f7cb8b
Version: webpack 3.6.0
Time: 69ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.79 kB       0  [emitted]  main      
   [0] ./src/main.js 94 bytes {0} [built]        
   [1] ./src/mathUtils.js 144 bytes {0} [built]

总之，在处理完所有模块之间的关系后，将多个js(./src/main.js)打包到一个js(./dist/bundle.js)文件中，在HTML中引入就非常方便。

webpack配置

第一步需要创建文件夹：webpack.config.js（这个文件夹命名是固定的）。

npm init：初始化

npm init

npm install：安装

npm install

npm run：运行脚本(运行package.json中的scripts脚本代码)

git clone：克隆

dev：开发；
devDependence:开发时依赖

loader

loder的作用：帮助webpack扩展对应的loader使之能够转化更多的文件类型。
loder的使用过程：

  • 步骤一：通过npm安装需要使用的loader
  • 步骤二：在webpack.config.js中的module关键字下进行配置
webpack-css文件处理(css-loader,style-loader)
  1. 命令终端安装相关loader
# 通过--save-dev开发时依赖安装相应Loader
npm install --save-dev css-loader
npm install --save-dev style-loader
  1. 在file.js中导入css源代码
import css from 'file.css';
  1. 在webpack.config.js中添加module:{}属性
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,// 正则表达式
        use: [ 'style-loader', 'css-loader' ] // 自右向左加载
      }
    ]
  }
}
  1. 命令终端运行打包脚本
npm run build
webpack-less文件处理(less-loader)
webpack-图片文件处理(url-loader)
webpack-ES6转ES5(babel-loader)
webpack-Vuejs环境处理

安装vue.js的三种方式：

  1. 直接下载引用
<!-- 直接下载vue.js文件到当前文件夹下，并用 <script> 标签引入 -->
<script src='./vue.js'></script>
  1. 通过CDN引入
<!-- CDN引入链接到vue.js的最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  1. npm安装
# 最新稳定版。通过NPM安装Vue.js能够很好的和webpack打包器配合使用。
$ npm install vue
webpack中对于vue的配置
# 这里vue不止有在dev开发时依赖，在后续的实际项目中也会使用到。
npm install vue --save

引入打包后的vue

     <div id="app">
         <h1>{{message}}</h1>
     </div>

    <script src="./dist/bundle.js"></script>

import Vue from 'vue'

const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Webpack'
    }
})

对vue环境进行打包

npm run build

打包过程中会报错。原因：

  1. runtime-only：代码中不可以有任何的template模板
  2. runtime-compiler：代码中可以有template模板。其中compiler可以用于编译template模板。
    解决方案：在webpack.config.js中配置resolve

Vue终极使用方案

组件复用

在入口HTML文件(main.html)的body中，只保留id=‘app’挂载的div标签和通过webpack打包后src=’./dist/bundle.js’的js文件script标签。

 <body>
     <!-- 在HTML入口文件中将所有"多余"代码抽离 -->
     <div id="app"></div>
    <script src="./dist/bundle.js"></script>
 </body>

安装vue-loader和vue-template-compoiler

npm install vue-loader vue-template-compiler --save-dev

compiler：编译

plugin(普拉根)
  • loader主要用于转换某些类型的模块，它是一个转换器。
  • plugin是对webpack本身现有功能的扩展，它是一个插件。
plugin插件扩展
  1. BannerPlugin，添加版权。
const path =require ('path')
const webpack = require ('webpack')

module.exports ={
    ...
    plugins:[newwebpack.BannerPlugin('版权说明')] // plugins跟数组类型，添加此插件可以在budle.js头部看到相关信息。
}
  1. HtmlWebpackPlugin，自动生成index.html打包到dist文件夹中。
    2.1 安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev

2.2 在webpack.config.js中添加配置

const path=require('path')
const webpack=require('webpack')

module.exports ={
    ...
    // publicPath:'dist/' 需要删掉
    plugins:[new HtmlWebpackPlugin({
        template:'index.html'//按照index.html自动生成模板并打包到dist文件夹中
    })]
}

2.3 从新打包

npm run build
  1. uglifyjs-webpack-plugin，对打包的js文件进行压缩
    3.1 安装插件
npm install uglifyjs-webpack-plugin --save-dev

3.2 在webpack.config.js中配置

const path=require('path')
const webpack=require('webpack')
const uglifyJsPlugin=require('uglifyjs-webpack-plugin')

module.exports ={
    ...
    plugins:[new uglifyJsPlugin()]
    // 查看打包后的bundle.js是被压缩过的，发布阶段才需要压缩。
}

3.3 重新打包

npm run build

搭建本地服务器server

本地服务器基于node.js搭建，内部使用express框架，可以实现浏览器自动刷新。

npm install --save-dev webpack-dev-server

在webpack.config.js中配置

const path=require('path')
const webpack=require('webpack')

module.exports ={
    ...
    devserver:{ // devserwer对象属性，与entry{},module{},plugins[]同级
        contentBase:'./dist',//表示为哪一个文件夹提供本地服务，默认为根文件夹
        // port://端口号，默认为8080
        inline:true// 页面实时刷新，布尔值
        // historyApiFallback://在SPA页面中，依赖HTML5的history模式
    }
}

在本地服务器上运行

node_modules/.bin/webpack-dev-server
webpack配置开发环境和生产环境的分离

package.config.js中配置比较复杂，需要对开发时依赖配置和生产时配置分离。创建三个文件夹：

  • base.config.js:公共环境(开发时和发布时都依赖)
  • dev.config.js:开发时环境(只保留本地服务器等)
  • prod.config.js：发布时环境(保留对js的压缩相关)
npm install webpack-merge --save-dev

Vue CLI

CLI Command-Line Inertface，翻译为命令行界面，俗称“脚手架”。Vue CLI是一个官方发布vue.js项目的脚手架。
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

安装Vue CLI

NodeJS官网
Vue CLI官网

# 检测node环境的版本
node -v
# v16.13.0

# 检测npm环境的版本
npm -v
# 8.1.0
全局安装Vue-cli脚手架
# 终端命令-g全局安装Vue CLI 3
npm install -g @vue/cli
# 上面安装的是Vue CLI 3，如果需要拉取Vue CLI 2.x版本的话则：
npm install -g @vue/cli-init
# 检查Vue CLI版本是否正确
vue --version
# @vue/cli 4.5.15
Vue CLI 2初始化项目
# vue init webpack 项目名
vue init webpack my-project
# 以下依次填入项目信息，根据项目信息创建项目模板
? Project name my-project  项目名称，不能包含大写字母等
? Project description A Vue.js project  项目描述
? Author TUHT 作者信息，会默认从git读取信息
? Vue build runtime 运行时
? Install vue-router? No Vue-路由
? Use ESLint to lint your code? No 监测代码规范
? Set up unit tests No 单元测试
? Setup e2e tests with Nightwatch? No   e2e测试:end to end测试，安装nightwatch是一个进行自动化测试的框架
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM  NPM和Yarn二选一即可
  Yes, use Yarn  
  No, I will handle that myself 

# 执行package.json中dev相关命令，如打开本地服务器
npm run dev
#  DONE  Compiled successfully in 2934ms  下午8:16:34
#  I  Your application is running here: http://localhost:8080

# 执行package.json中build相关命令，从入口文件开始(build/build.js)执行，对项目进行打包
npm run build
Vue CLI 2目录结构
  • bulid:webpack相关配置
  • config:生产环境、开发环境和公共环境相关配置
  • node_modules：依赖node相关的模块
  • src：开发人员写代码的地方(HOME)
  • static：静态资源，将资源原封不动打包
  • .babelrc：ES代码相关转化配置
  • .editorconfig：项目文本相关配置
  • .gitignore：Git仓库忽略的文件夹配置
  • .postcssrc.js：CSS相关转化配置
ESLint语法规范

如何关闭：在config/index.js中找到useEslint:true改为false.

Runtime+compiler和Runtime-only

二者只在main.js中有区别。runtime-only性能更高，代码量更少。runtime-only比runtime+compiler轻6KB！

  • 如果在之后的开发中，你依然使用template，就需要选择Runtime+Compiler(运行时加编译器)
  • 如果在之后的开发中，你使用.vue文件夹开发，那么可以选择Runtime-only(只含有运行时)
// runtime+compiler
// template——>ast——>render——>虚拟DOM——>UI
new Vue({
    el:'#app',
    template:'</App>',
    components:{App}
})

// runtime-only
// render——>虚拟DOM——>UI
new Vue({
    el:'#app',
    render:h=>h(App)// h:hyperscript
    // render:function(h){
    //     return h(App)
    // }
})
Vue CLI 3.0(2018-08-11)
vue-cli 3与2版本的区别
  • vue-cli 3是基于webpack 4 打造，vue-cli 2则是webpack 3；
  • vue-cli 3的设计原则是“0配置”，移除配置文件根目录下的build和config等配置相关目录；
  • vue-cli 3提供了vue ui命令，提供了可视化配置，更加人性化；
  • vue-cli 3移除了static文件夹，新增public文件夹，并且将index.html移动到public中。
vue-cli 3(4)初始化项目
# vue creat 项目名称
vue create my-project

Please pick a preset: (Use arrow keys)
# Vue CLI v4.5.15,这里创建的是Vue CLI 4版本
Vue CLI v4.5.15
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features
#手动选择，按空格选中或取消
? Check the features needed for your project: 
>(*) Choose Vue version
 ( ) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
# 选择一个你想要启动项目的 Vue.js 版本
? Choose a version of Vue.js that you want to start the proje
ct with 
  2.x 
> 3.x
# 你更喜欢把 Babel、ESLint 等的配置放在哪里？
? Where do you prefer placing config for Babel, ESLint, etc.?
 (Use arrow keys)
> In dedicated config files 
  In package.json 
# 将此保存为未来项目的预设？
? Save this as a preset for future projects? (y/N) 
# Save preset as 命名预设配置
Vue CLI 4目录结构
  • node_modules：node相关
  • public
  • src：源代码
  • .browserslistrc：浏览器相关配置
  • .gitgnore：上传文件时忽略
  • package-lock.json
  • package.json
Vue CLI 2/3/4总结
安装与卸载
vue-cli2
全局安装：npm install -g vue-cli
卸载：npm unstall -g vue-cli
vue-cli3
全局安装：npm install -g @vue/cli@版本号
卸载：npm uninstall -g @vue/cli@版本号
# 注：原cli3的安装指令为@vue/cli，因为cli4的出现同样使用了@vue/cli，所以想要安装3的版本，就需要在@vue/cli后面加上@版本号。
# （例：npm install -g @vue/cli@3.11.0）
vue-cli4
全局安装：npm install -g @vue/cli
卸载：npm uninstall -g @vue/cli
项目创建
vue-cli2
vue init webpack my-package
vue-cli3/vue-cli4
vue create my-package
项目启动
vue-cli2
npm run dev
vue-cli3/vue-cli4
npm run serve
vue-cli3/vue-cli4项目启动
npm run serve

INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1408ms          上午11:21:47


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.
vue-cli3/vue-cli4启动UI项目管理器
# 在任意目录下打开终端命令窗口
vue ui
# @vue/cli-ui 是 vue-cli 内置的一套成熟的 UI。
# 相比局限的命令行界面，图形化界面更人性化。

Vue-Router

路由(routing)，是通过互联的网络把信息从源地址传输到目的地址的活动。
路由器(router)，是连接两个或多个网络的硬件设备。路由器提供两种机制：路由和转送。

路由表(routing-table)，是一个存储在路由器或者联网计算机中的电子表格（文件）或类数据库。路由表本身就是一个映射表，决定了数据包的指向。

  • 路由是决定数据包COA来源地到目的地的路径。
  • 转送是将输入端的数据转移到合适的输出端的过程。
前端渲染和后端渲染

SPA(single page web application)页面：单页面富引用

前端路由和后端路由

前端路由的核心是改变页面的URL，但是页面不进行整体刷新。实现地址改变页面不刷新的方式有两种：

  1. URL的hash，锚点(#)
  • location.hash=’’
  1. HTML5的history模式
  • history.pushState({},’’,‘about’)
  • history.replaceState
  • history.back()
  • history.forward()
  • history.go(1)
vue-router

vue-router官网
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适用于构建单页面应用。
在vue-router构建的单页面应用中，页面路径的改变就是组件的切换。目前前端流行的三大框架中，都有自己的路由实现：

  • Angular:ngRouter
  • React：reackRouter
  • Vue：vue-router
安装vue-router
npm install vue router --save
配置vue-router
// 配置路由相关信息
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 1. 通过Vue.use(插件)安装vue-router
Vue.use(Router)//Router是一个插件，Vue.use(插件)

// 2. 创建vue-router实例对象Router
export default new Router({//导出到main.js中
    // 配置路由和组件之间的应用关系
     routes: [ 
       {
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       }
})
// 3. 将Router传入到Vue实例(main.js)
使用vue-router

第一步：创建路由组件：在components组件文件夹中创建路由组件Home.vue和About.vue组件，并通过export default{组件名}导出

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style>

</style>

第二步：配置路由映射：在router/index.js中配置组件和路径之间的映射关系

import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'//导入Home.vue
import About from '../components/About'//导入About.vue

Vue.use(Router)//注入插件

export default new Router({//创建路由实例并导出
  routes: [
    {// 默认路由
      path:'',//'':空路径 或者 '/':根路径
      redirect:'/home'//redirect重定向
    },// 在routes中配置path和redirect映射，实现用户在默认打开网站时，自动进入网站首页。
    {
      path:'/home', //路径地址
      component:Home //组件名
    },
    {
      path:'/about', //路径地址
      component:About //组件名
    }
  ],
  
  // 实现页面跳转而不全部刷新的配置mode
  mode:'history';// vue-cli2/3配置为history或者hash模式，不配置则默认为hash模式
//   mode:'history:creatWebHistory()'//vue-cli4
})

第三步：使用路由组件：在App.vue组件中通过router-link和router-view标签使用路由

<template>
  <div id="app">

    // router-link标签是vue-router中内置的组件，router-link会被渲染成一个a标签。
    <router-link to='/home'>首页</router-link>
    <router-link to="/about">关于</router-link>
    // to属性：指定跳转到的路径
    // tag属性：指定渲染成的组件：a(默认)/button/li等
    // replace属性：指定以history.replaceState方式跳转
    // activeclass属性：给当前元素设置一个class

    // router-view标签会根据当前的路径，动态渲染出不同的组件。在路由切换时，切换的是router-view标签挂载的组件，其它内容不会发生改变。
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>
vue-router动态路由

第一步：创建路由组件

<template>
    <div>
        <h1>用户信息</h1>
        <p>用户信息动态路由</p>
        <h2>{{userId}}</h2>
    </div>
</template>

<script>
    export default{
        name :'User',
        computed:{
            userId(){
                    // $route指向当前处于活跃状态的路由，parameters:参数
                    return this.$route.params.userId
            }

        }
    }
</script>

第二步：配置路由映射

import Vue from 'vue'
import Router from 'vue-router'
import User from '../components/User'

Vue.use(Router)

export default new Router({
  routes: [
      {
          // 处于活跃的路由
          path:'/user/:userId',// 被动态修改的路径
          component:User
      }
  ],
  const router = new   VueRouter({
      routes,
      mode:'history',
      linkActiveClass:'active'
  })
})

第三步：使用路由组件

<template>
  <div id="app">
    <!-- router-link标签 和 to属性 v-bind动态绑定 -->
    <router-link v-bind:to="'/home'+userId">首页</router-link> 

    <!-- 内容占位<router-view></router-view> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data:{
      userId:'zhangsan'// 动态路由userId
  }
}
</script>
vue-router懒加载

当打包构建应用时，JavaScript包(dist/js文件)会变得非常大，影响页面的加载，导致在页面跳转时会出现短暂空白。
把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件，从而实现高效在页面之间跳转。

// LearnVueRouter/src/router/index.js

// import Home from '../components/Home'//导入Home.vue
// import About from '../components/About'//导入About.vue

Vue.use(Router)//注入插件

// 方式一：结合Vue的异步组件和Webpack的代码分析
const Home = resolve =>{
    require.ensure(['../components/Home.vue'],()=>
    {
        resolve(require('../components/Home.vue'))
    })
}
// 方式二：AMD写法
const About = resolve => require(
    [../components/About.vue],resolve
)
// 方式三：ES6写法
const routes = [
    // 懒加载组件
    {
        path:'/home',
        component:()=>import('../components/Home')// 实现组件懒加载
    },
    {
        path:'/about',
        component:()=>import('../components/About')// 实现组件懒加载
    }
]
vue-router参数传递

URL:统一资源定位符

  • 协议：//主机:端口/路径？查询
  • scheme://host:port/path?query#fragment
文件路径别名

./build/webpack.base.conf.js中的路径配置(基于vue-cli3版本以上)

  • src属性路径：<img src="~assets/img/tabbar/home.png">(路径前加波浪号~)
  • import导入路径：import Home from "@/router/index.js"(路径前加@)
module.exports={
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],// 引用时可忽略的后缀名
    alias: {
      '@': resolve('src'),//用@符号代替src
      'components':resolve('@/components'),//设置组件路径
      'assets':resolve('@/resolve')
    }
  }
}
TabBar组件封装

在js文件中引入时import
在vue文件中引入时@import
组件化开发思想。尽可能将可复用组件抽离到模板中

  1. 抽离到.vue文件中
  2. 组件名.vue文件通过export defalut{name:组件名}导出
  3. App.vue中通过import …… from "组件路径"导入
  4. 在App.vue中的components中注册组件并使用标签引用router view和router link

Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。
Vuex采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex也集成了Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试/状态快照导入导出等高级调试功能。

Devtools：Vue开发的一个浏览器插件。可以访问Google商城下载。
不翻墙的话，用"极简插件"搜索vue.js devtools并下载完后，在google浏览器扩展程序中开启开发者模式，然后将解压后的源文件(CRX文件)复制或者拖入到扩展程序面板中。

Vuex简单理解为：Vuex是来进行状态管理的。利用Vuex可以把需要多个组件共享的变量全部存储到一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件使用。

比如说：一个大型应用，具有某种状态(用户的登录状态/地理位置信息/用户名称或头像)，需要在多个界面中使用这种状态。而这种共享状态信息，可以统一放在一个地方对它进行保存和管理。当在某个界面使用时，可以实现响应式。

Vuex的使用

第一步：安装Vuex

# vuex是Vue中集成的一个插件
# vuex不只是在开发环境中依赖，也需要在生产环境中依赖
npm install vuex --save

第二步：创建store对象(./src/store/index.js)

// 在新文件夹(./src/store/index.js)中进行调用

// 1. 导入Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'// 导入Vuex

// 2. 安装Vuex插件
Vue.use(Vuex)//注入Vuex插件，执行Vuex.install方法

// 3. 创建store对象
const store =new Vuex.Store({
    state:{// 保存状态

    },
    // 将共享方法保存在mutations中可以更加明确的追踪状态的变化
    mutations:{// 保存方法
        increment(state){
            state.counter++
        },
        decrement(state,n){
            state.cotuner -= n
        }
    },
    actions:{// 替代mutation进行异步操作
        aUpdateInfo(contex){
            setTimeout(()=>{
                context.commit('updateInfo')
            },1000)
        }
    },
    getters:{//类似计算属性

    },
    modules:{//store模型
        moduleA:{
            state:{},
            mutations:{},
            actions:{},
            getters:{}
        }
    }  
})

// 4. 导出store对象
export default store

第三步：导入store对象(./main.js)

// 在./main.js文件中导入store对象

import Vue from 'vue'
import App from './App'
import store from './store'// 导入store对象

//通过Vue.prototype将store赋值给$store
Vue.prototype.$store = store

new Vue({
    el:'#app',
    store,// 挂载store对象
    render:h=>h(App)
})

第四步：使用store对象(./components/xxx.vue)

<template>
    <div id='app'>
        <!-- <p>计数：{{$store.state.count}}</p> 提取计算属性 -->
        <p>{{count}}</p>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>

<script>
    name:'App',
    components:{...},
    computed:{
        count:function(){
            // 通过 this.$route.state.属性 的方式来访问状态
            return this.$store.state.count 
        }
    },
    export default{
        ...
        methods:{
            increment(){
                // 通过this.$store.commit('方法')来修改状态
                this.$store.commit('increment')
            },
            decremnet(){
                // 通过this.$store.commit('方法')来修改状态
                this.$store.commit('decrement')
            }
        }
    }
</script>
Vuex5个核心概念
  • State:单一状态树(单一数据源)
  • Mutation：携带函数。提交mutation是更改Vuex中的store中的状态的唯一方法。（mutation是改变的意思）
  • Getters：从store中获取state变异后的状态，类似计算属性。
  • Action：异步操作
  • Module：vuex-store模型
Vuex响应规则

Vuex的store中的state是响应式的，当state中的数据发生变化时，Vue组件会自动更新。

网络模块封装
  • Ajax(XMLHttpRequest:XHR)
  • jQuery-Ajax
  • Vue-resource(Vue1.x)
  • axios

Git

Git是世界上目前最先进的分布式版本控制系统。Git是由Linux之父Linus开发的，最初是为辅助Linux内核开发，来替代BitKeeper版本控制系统。Git是开源、免费的。

git官网

版本控制工具
  • 本地式版本控制：RCS
  • 集中式版本控制：SVN
  • 分布式版本控制：Git(推荐)
    Git与SVN的主要区别？
Git的安装与卸载
  • 卸载：清理Windows环境变量(删除git相关)——>控制面板直接卸载
  • 安装：NEXT!
启动Git

Bit Bash：Linux和Unix风格命令行(推荐)
Git CMD：Windows风格命令行
Git GUI：图形化界面

基本Linux命令
常用Git命令

安装git之后首先要设置用户名称和e-mail地址。
所有的配置文件都在本地文件下C:\Users\个人用户\.gitconfig

  • 查看配置命令：git config
# Git用户配置信息
git config --global user.name "TuHongtao"
git config --global user.email 1410048525@qq.com
# 查看系统配置
git config --system --list
# 查看当前用户配置
git config --global --list
Git基本理论

Git分为本地三个工作区域和一个Git远程仓库

  • 工作目录：Working Directory
  • 暂存区：Stage/Index
  • 资源库：Repository/Git Directory
  • Git仓库：Remote Directory

Git文件在区域之间的转换命令

  • 工作目录git add——>暂存区commit——>资源库git push——>远程仓库
  • 远程仓库git pull——>资源库git reset——>暂存区git checkout——>工作目录
Git项目搭建
  1. 本地仓库搭建 创建全新的本地仓库
# 在当前目录新建一个Git代码库并git初始化
$ git init
# 需要在文件中打开隐藏项目
# 执行后可以看到在文件中出现了.git目录，关于版本的所有信息都在里面
  1. 克隆远程仓库
# 在GitHub或者Gitee中克隆整个项目和它的版本信息
# 将远程服务器上的项目完全镜像至本地
$ git clone [url] https://.../文件名.git
GitHub项目创建及上传
supermall项目

将远程仓库中的项目克隆到本地：

  1. Vue CLI 3创建项目:vue create supermall
  2. github远程仓库创建项目仓库
  3. 拷贝远程仓库项目链接HTTP/SSH/GitHub CLI，将远程仓库的项目克隆到本地git clone [src]
  4. 新增文件后git add .
  5. 提交到本地git commit
  6. 上传到远程仓库git push

将已有的项目链接到远程仓库：

  1. git remote add origin 仓库地址
  2. git push -u orgin master
项目启动

文件夹目录结构
h：Linux和Unix风格命令行(推荐)
Git CMD：Windows风格命令行
Git GUI：图形化界面

基本Linux命令
常用Git命令

安装git之后首先要设置用户名称和e-mail地址。
所有的配置文件都在本地文件下C:\Users\个人用户\.gitconfig

  • 查看配置命令：git config
# Git用户配置信息
git config --global user.name "TuHongtao"
git config --global user.email 1410048525@qq.com
# 查看系统配置
git config --system --list
# 查看当前用户配置
git config --global --list
Git基本理论

Git分为本地三个工作区域和一个Git远程仓库

  • 工作目录：Working Directory
  • 暂存区：Stage/Index
  • 资源库：Repository/Git Directory
  • Git仓库：Remote Directory

Git文件在区域之间的转换命令

  • 工作目录git add——>暂存区commit——>资源库git push——>远程仓库
  • 远程仓库git pull——>资源库git reset——>暂存区git checkout——>工作目录
Git项目搭建
  1. 本地仓库搭建 创建全新的本地仓库
# 在当前目录新建一个Git代码库并git初始化
$ git init
# 需要在文件中打开隐藏项目
# 执行后可以看到在文件中出现了.git目录，关于版本的所有信息都在里面
  1. 克隆远程仓库
# 在GitHub或者Gitee中克隆整个项目和它的版本信息
# 将远程服务器上的项目完全镜像至本地
$ git clone [url] https://.../文件名.git
GitHub项目创建及上传
supermall项目

将远程仓库中的项目克隆到本地：

  1. Vue CLI 3创建项目:vue create supermall
  2. github远程仓库创建项目仓库
  3. 拷贝远程仓库项目链接HTTP/SSH/GitHub CLI，将远程仓库的项目克隆到本地git clone [src]
  4. 新增文件后git add .
  5. 提交到本地git commit
  6. 上传到远程仓库git push

将已有的项目链接到远程仓库：

  1. git remote add origin 仓库地址
  2. git push -u orgin master
项目启动

文件夹目录结构
环境配置：路径配置(配置完需要重新npm run dev/serve)

De_Fondness
关注
Vue框架学习笔记
一盒婷酱的博客
05-09 901
Vue框架学习一、Vue的组件化1.1 组件化的概念和思想1.2 组件注册的基本步骤1.3 全局组件和局部组件1.4 父组件和子组件1.4.1创建父子组件的方式1.4.2 父子组件的通信1.5 组件中的数据存放1.4.3 父子组件的访问1.5 slot插槽1.6 组件间编译的作用域二、模板化开发2.1 模板化思想2.2 Webpack打包工具2.2.1 webpack基本介绍三、Vue-router3.1 基本使用3.2 动态路由和懒加载3.3 嵌套路由3.4 vue-router参数传递paramsque
主流框架：Vue框架笔记
Li8L9xF的博客
01-14 672
一、vue框架基础 jQuery与vue的区别 vue，拥有DOM虚拟，高效操作，便于维护； jQuery:直接操作DOM，消耗性能，不便于维护； Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue渐进式框架
vue框架入门笔记（速成vue）
weixin_42991822的博客
01-25 5055
vue4小时速成课概述一、vue基础1. vue简介2. 第一个vue程序3. el挂载点4. data数据对象二、本地应用1. v-text2. v-html3.4.5.三、网络应用四、综合应用 概述 学习vue的目的主要是为了完成毕业设计的前端页面编写，所以学的比较粗糙，主要是为了vue入门，观看的教学链接是： 黑马程序员vue前端基础教程-4个小时带你快速入门vue. 一、vue基础 1. vue简介 一个js框架 简化Dom操作 响应式数据驱动 数据发生变化，则页面上的数据显示也会随之发生变化。
vue 开发工具 Hbuilder 简介及应用
dazhong2012的专栏
08-05 365
HBuilderX 是一款流行的前端开发工具，由DCloud公司开发。它支持多种编程语言，如HTML、CSS、JavaScript、等，非常适合用来开发Web应用、移动端应用和跨平台应用。
Vue框架笔记———Vue基础
qq_42995361的博客
05-02 606
根据B站学习Vue前端框架整理出的笔记，仅作参考和学习交流
Vue框架笔记———Vue脚手架
qq_42995361的博客
05-09 397
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录第三章 Vue脚手架1.配置脚手架1.1初始化脚手架1.2 具体步骤2.脚手架文件结构3.关于不同版本的Vue4.vue.config.js配置文件5.ref属性6.props配置项7.mixin(混入)8.插件9.scoped样式10.TodoList案例10.1案例代码10.2 总结TodoList案例11.webStorage11.1 webStorage 代码示例11.2 webStorage总结12.组件的自定义事件12.
Vue框架 学习笔记
weixin_41456648的博客
03-25 278
Vue生命周期钩子 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestory destroyed <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
Vue框架笔记资源学习
01-04
Vue框架笔记资源学习 Vue框架是一种基于MVVM（Model-View-ViewModel）架构的前端框架，用于构建用户界面。它提供了一个灵活的框架来构建复杂的Web应用程序。 1.1 Vue框架的历史发展 Vue框架的诞生可以追溯到2014...
最新尚硅谷vue系列笔记
02-11
Vue.js是一款轻量级的前端JavaScript框架，由尤雨溪开发，它以其易学易用、高效灵活的特点，在Web开发领域中受到广泛欢迎。Vue的核心特性包括数据绑定、组件化、指令系统、虚拟DOM以及路由管理等。 1. **数据绑定**...
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
基于Vue框架的云笔记Web应用程序设计源码
最新发布
09-25
该项目是一款基于Vue框架构建的云笔记Web应用程序设计源码，包含21个文件，包括7个TypeScript文件、5个Vue组件文件、2个Markdown文件、2个JSON文件、1个Git忽略文件、1个LICENSE文件、1个HTML文件、1个ICO图标文件、...
Vue框架思维导图笔记
12-18
vue概念，创建实例，模版语法，计算和监听属性，class&style;绑定，条件渲染，列表渲染，事件处理，表单双向绑定，过滤器，自定义指令，实例生命周期，数据交互， ES6, Vue组件等知识梳理。
我的vue框架学习笔记
qq_41564928的博客
05-20 395
#vue.js 1.为什么要学习vue vue能减少不必要的DOM操作，提高渲染效率 双向数据绑定的概念 只关心业务逻辑，不再关心DOM是如何渲染的了 2.什么是框架 一套完整的解决方案 对项目的侵入性较大，项目如果要更换框架，则要重新架构整个项目 3.MVVM MVVM把前端的视图层，把每个页面分成了三部分Model、View、VM 提供了数据双向绑定的思想（由VM提供） M...
Vue.js 框架基础笔记
qq_43645678的博客
04-04 930
Vue.js框架笔记及面试题
vue框架基础学习笔记
SugarXiXixi的博客
10-16 183
vue渐进式开发框架（声明式编程） 高级功能 1 解耦视图和数据 2可复用的组件 3 前端路由技术 4状态管理 5 虚拟dom （原生js一般都是命令式开发）
前端框架Vue.js的学习笔记(一)
qq_41496513的博客
12-31 443
前端框架Vue.js的学习笔记
vue前端框架课程笔记（三）
m0_54510474的博客
01-30 383
(1)当v-model的初始值是非数组时，收集的是checked（勾选 or 未勾选，是布尔值）//关键点：indexOf()函数默认空字符串在每个字符串的头部，返回index=0。(2)当v-model的初始值是数组时，收集的是value组成的数组。收集的就是checked（勾选 or 未勾选，是布尔值）//简写方式：初始进入界面时不会执行，不会显示列表。//函数每次点击按钮触发，使num值加1。//计算num是否能整除2。//关键点：不要修改原数组。"条件渲染测试内容"虚拟DOM对比规则?
vue学习笔记
qq_46017342的博客
01-06 120
vue学习笔记，源自b站黑马程序员， v-bind v-on v-if v-else v-else-if v-show v-for
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值