• vue.js学习笔记（二）

    文章目录

    前言

    前端核心分析HTML、CSS、JS
    vue.js

    • 网络通信：axios
    • 页面跳转：vue-router
    • 状态管理：vuex
    • UI组件库：element-ui、ant design
    • CSS预处理器：SASS、LESS
    • JS（ES6、ES5）（Angular、React、VUE）、TS
      • Angular：MVC模式
      • React：JSX语法、虚拟DOM(利用内存)
      • VUE：渐进式JS框架。MVVM模式、虚拟DOM
    • 三端统一：uniapp、ReactNative

    VUE优点：

    MVVM模式：低耦合、可复用、独立开、可测试。MVC演变。
    双向绑定。

    VUE入门基础语法

    VUE基础语法：Vue.js初学笔记

    VUE进阶

    Axios异步通信

    axios：浏览器和NodeJS端的异步通信框架。实现Ajax异步通信。

    DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Documenttitle>
head>
<body>
   <div id="app">div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
   var vm = new new Vue({
       el: "#app",
       mounted(){
           axios.get('./data.json').then(resp=>{
               console.log(resp)
           })
       }
   })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    计算属性

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <p>curr: {{currTime()}}p>
        <p>curr2: {{currTime2}}p>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var vm = new new Vue({
            el: '#app',
            data :{
                    
            },
            methods: {
                currTime:function(){
                    return Data.now()
                }
            },
            computed: {
                // 可以与methods重复名称，但是methods优先级更高
                // 内存计算，将不经常变更的值存到内存中节省浏览器资源
                currTime2: function(){  
                    return Data.now();
                }
            }
        })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    插槽

    slot标签

    DOCTYPE html>
<html lang="en">
<head>
head>
<body>
    <div id="app">
        <p>{{title}}p>
        <ul>
            <li v-for="itm in todoItems">{{itm}}li>
        ul>
        
        <todo>
            <t-title slot="t-title" :title="title">t-title>
            <t-items slot="t-items" v-for="itm in todoItems" :item="itm">t-items>
        todo>
    div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
    Vue.component('todo',{
        template: '
     \
                         \
                        
     \
                    
    '    
    })
    Vue.component('t-title',{
        props: ['title'],
        template: '
    {{title}}
    '    
    })
    Vue.component('t-items',{
        props: ['item'],
        template: '
  • {{item}}
    • '    
    })
    var vm = new new Vue({
        el: "#app",
        data: {
            title:'person list',
            todoItems:['Huathy','嘻嘻','小花']
        }
    })
    script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    自定义事件内容分发

    this.$emit(event,arguments) 自定义事件分发
    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
head>
<body>
    <div id="app">
        <p>{{title}}p>
        <ul>
            <li v-for="itm in todoItems">{{itm}}li>
        ul>
        <todo>
            <t-title slot="t-title" :title="title">t-title>
            <t-items slot="t-items" v-for="(itm,idx) in todoItems" :item="itm"
                  v-bind:index="idx" v-on:remove="removeItems(idx)" >t-items>
        todo>
    div>
body>
<script src="../vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
    Vue.component('todo',{
        template: '
     \
                         \
                        
     \
                    
    '    
    })
    Vue.component('t-title',{
        props: ['title'],
        template: '
    {{title}}
    '    
    })
    Vue.component('t-items',{
        props: ['item','index'],    // props参数传递
        // 只能绑定当前组件的方法
        template: '
  • {{index}}--{{item}}
    • '    ,
        methods:{
            remove: function(index){
                console.log("remove method click")
                // this.$emit(event,arguments) 自定义事件分发
                this.$emit('remove', index)
            }
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            title:'person list',
            todoItems:['Huathy','嘻嘻','小花']
        },
        methods: {
            removeItems:function(index){
                this.todoItems.splice(index,1)  //一次删除一个元素
                alert('删除成功');
            }
        }
    })
    script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    vue-cli

    vue-cli是官方提供的一个脚手架，用于快速构建一个vue项目。
    功能：统一目录结构、本地调试、热部署、单元测试、集成打包上线。
    环境：nodejs
    安装：https://blog.csdn.net/qq_40366738/article/details/105212244
    初始化：vue init webpack myvue

    λ vue init webpack myvue

? Project name myvue
? Project description 第一个vue-cli的项目demo
? Author Huathy
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn

   vue-cli · Generated "myvue".

# Installing project dependencies ...
# ========================

yarn install v1.22.17
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.17".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 998.17s.

# Project initialization finished!
# ========================

To get started:

  cd myvue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    启动

    λ yarn dev
yarn run v1.22.17
$ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:8520) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
 12% building modules 24/29 modules 5 active ...3S\Desktop\vuestudy\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 45515ms                                                                                                4:24:51 ├F10: PM┤

 I  Your application is running here: http://localhost:8080

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    webpack

    静态资源打包器，打包时会递归地构建一个依赖关系图。
    安装：cnpm install -g webpack 或 yarn global add webpack
    打包：新建webpack.config.js ，配置入口entry和输出output，执行webpack。

    elementUI

    https://element.eleme.cn/#/

    # 安装vue-router
yarn add vue-router --dev
# 安装element-ui
yarn add element-ui
# 安装所有依赖
yarn 
# 安装sass加载器
yarn add sass-loader node-sass --dev
# 启动测试
yarn dev

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    vue-router路由

    vue-router是vue的官方路由管理器。与vue.js的核心深度集成，
    npm install vue-router --save-dev 或 yarn add vue-router --dev
    案例操作步骤：

    1. 在src目录下新建一个component文件夹，其中新建Main.vue和Content.vue。
    2. 新建一个router文件夹，写一个index.js，并为他配置好写好的组件。
    import Vue from 'vue';
// 导入路由插件
import VueRouter, { RouterLink } from 'vue-router'

import Content from '../component/Content'
import Main from '../component/Main'

Vue.use(VueRouter)
// 配置路由
export default new VueRouter({
    routes:[
        {
            // 路由路径
            path:'/content',
            name: 'content',
            // 跳转的组件
            component: Content
        },
        {
            // 路由路径
            path:'/main',
            // 跳转的组件
            component: Main
        }
    ]
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    1. 使用：在src下的main.js中导入路由
    import Vue from 'vue'
import App from './App'
// 自动扫描路由配置
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 配置路由
  router,
  components: { App },
  template: ''
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    1. 在src下的App.vue中使用
    <template>
  <div id="app">
    <h1>VUE-ROUTERh1>
    <router-link to="/main"> TO MAIN PAGE router-link>
    <br/>
    <router-link to="/content"> TO CONTENT PAGE router-link>
    <hr/>
    <router-view>router-view>
  div>
template>

<script>
export default {
  name: 'App',
  components: {
  }
}
script>

<style>
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    1. 目录结构
      在这里插入图片描述

    路由模式

    路由有两种模式，hash(#)和history(/)

    // 配置路由
export default new VueRouter({
    // 路由模式：默认为hash(#)
    mode: 'history',
    routes:[]
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    路由嵌套 children

    案例：

    1. 在component文件夹下新建user目录，然后编写Profile.vue和List.vue。
    2. 在上面router/index.js中编写路由并导入组件。
    import Vue from 'vue';
// 导入路由插件
import VueRouter, { RouterLink } from 'vue-router'

import Content from '../component/Content'
import Main from '../component/Main'
import UserList from '../component/user/List'
import UserProfile from '../component/user/Profile'

Vue.use(VueRouter)
// 配置路由
export default new VueRouter({
    routes:[
        {
            // 路由路径
            path:'/content',
            name: 'content',
            // 跳转的组件
            component: Content
        },
        {
            // 路由路径
            path:'/main',
            // 跳转的组件
            component: Main,
            // 嵌套路由
            children: [
                {
                    path : '/user/profile',
                    component: UserProfile
                },
                {
                    path : '/user/list',
                    component: UserList
                }
            ]
        }
    ]
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    1. 在Main.vue组件中使用路由
    <template>
    <div id="app">
        <h1>main pageh1>
        <router-link to="/user/profile">用户信息router-link>
        <br />
        <router-link to="/user/list">用户列表router-link>
        <hr />
        <router-view />
    div>
template>
<script>
export default {

}
script>
<style>
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    路由参数传递

    写法一：

    1. 编写个人信息页面Profile.vue
    <template>
    <div id="app">
        <h1>个人信息h1>
        <h2>ID:{{$route.params.id}}h2>
    div>
template>
<script>
    export default {
        name: 'UserProfile'
    }
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    1. 修改路由
    import UserProfile from '../component/user/Profile'
{
    path : '/user/profile/:id',
    name: 'UserProfile',
    component: UserProfile
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 添加参数
    <router-link :to="{name:'UserProfile',params:{id:1}}">用户信息router-link>

    • 1

    写法二：

    1. 编写个人信息页面Profile2.vue
    <template>
    <div id="app">
        <h1>个人信息2h1>
        <h2>ID:{{uname}}h2>
    div>
template>
<script>
    export default {
        props: ['uname'],
        name: 'UserProfile2'
    }
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    1. 修改路由
    import UserProfile2 from '../component/user/Profile2'
{
    path : '/user/profile2/:id',
    name: 'UserProfile2',
    component: UserProfile2,
    props: true
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    1. 添加参数
    <router-link :to="{name:'UserProfile2',params:{uname:'嘻嘻'}}">用户信息2router-link>

    • 1

    重定向和404

    重定向

    1. 编写路由
    {   // 重定向
    path:'/home',
    redirect: '/main'
},

    • 1
    • 2
    • 3
    • 4
    1. 使用
    <router-link to="/home">HOME PAGErouter-link>

    • 1

    404

    1. 404页面
    <template>
  <h1>404 NOT FOUNT ERROR PAGEh1>
template>

<script>
export default {
    name: '404page'
}
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. 路由js
    import Page404 from '../view/404'
{   
    path:'*',
    component: Page404
},

    • 1
    • 2
    • 3
    • 4
    • 5

    路由钩子

    参数说明
    to路由将要跳转的路径信息
    from路由跳转前的路径信息
    next路由的控制参数
    - next()：跳转下一个页面
    - next(’/path‘)：跳转指定页面
    - next(false)：返回原页面
    - next(vm=>{})：仅在beforeRouterEnter中可用，vm是实例。

    案例：

    <template>
    <div id="app">
        <h1>个人信息h1>
        <h2>ID:{{$route.params.id}}h2>
    div>
template>
<script>
    export default {
        name: 'UserProfile',
        // 类比Java过滤器拦截器
        beforeRouteEnter:(to,from,next)=>{
            console.log("进入路由前 => ",to,from);
            next(vm => {
                let id = vm.getData(to);
                if( id > 5 && id < 10){  // 模拟未登录
                    next("/content")    // 跳转登录
                }else if( id > 10){
                    next(false);        // 没有权限
                }else {
                    next();
                }
            });
        },
        beforeRouteLeave:(to,from,next)=>{
            console.log("离开路由前 => ",to,from);
            next();
        },
        methods:{
            getData:function(to){
                return to.params.id;
            }
        }
    }
script>
<style>
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    致谢：B站视频UP狂神说，学习链接BV18E411a7mC
    说明：本文对视频内容章节做部分删改与调整，使得个人认为相关内容保持连贯

  • 相关阅读:
    java复习-多态性
    5、Spring之Bean生命周期源码解析（销毁）
    080|为什么阿里的价值观值得你关注？
    硬件里的玄乎事
    Python日常办公10大小技巧
    如何使用AES128位进行视频解密
    神经网络算法的具体流程,神经网络算法难不难
    python
    leetcode做题笔记242. 有效的字母异位词
    线上云酒馆是什么？线上云酒馆怎么开发？
  • 原文地址：https://blog.csdn.net/qq_40366738/article/details/126693665