vue 狂神教程学习笔记

最新推荐文章于 2022-07-19 11:00:38 发布

原创最新推荐文章于 2022-07-19 11:00:38 发布 · 1.5k 阅读

15 ·

CC 4.0 BY-SA版权

大前端知识专栏收录该内容

9 篇文章

订阅专栏

这是一份详细的Vue学习笔记，涵盖从SSM回顾到Vue的使用，包括Vue的基本语法、事件绑定、组件、Axios异步通信、Vue-Router路由、webpack配置等关键知识点。教程分为18个部分，适合初学者逐步掌握Vue开发技能。

简介及目录

vue 狂神教程学习 6个小时

【狂神说Java】Vue最新快速上手教程通俗易懂
https://www.bilibili.com/video/BV18E411a7mC?p=1

狂神说视频学习代码git地址：
https://github.com/wei198621/front_vue_kuangshen

P0前言：回顾SSM阶段 25:58
P1、前端核心分析 22:16
P2、前端发展史 21:39
P3、第一个Vue程序 21:52
P4、Vue基本语法 12:22
P5、Vue绑定事件 09:57
P6、Vue双向绑定 12:52
P7、Vue组件讲解 11:56
P8、Axios异步通信 24:53
P9、计算属性 09:53
P10、插槽slot 17:46
P11、自定义事件内容分发 27:48
P12、第一个vue-cli程序 32:19
P13、webpack学习使用 29:11
P14、vue-router路由 28:50
P15、vue+elementUI 36:01
P16、路由嵌套 09:52
P17、参数传递及重定向 15:19
P18、404和路由钩子 22:23



C:\Users\wei19>cnpm install vue-cli -g

P0前言：回顾SSM阶段 25:58

SSM 知识点，与VUE无关

P1、前端核心分析 22:16

网络通信： axios
页面跳转： vue-router
状态管理： vuex

P2、前端发展史 21:39

UI框架：
----Ant-Design:阿里巴巴出品，基于React 的UI框架
----ElementUl、iview、ice:饿了么出品，基于Vue 的 UI框架
----Bootstrap: Twitter推出的一个用于前端开发的开源工具包
----AmazeUl:又叫“妹子UI”，一款HTML5跨屏前端框架 (20210504不可用)

Vue-UI: --------https://ice.work/
less中文网： ------------- http://lesscss.cn
vue 官网 ------------- https://cn.vuejs.org/
iview:(一套基于 Vue.js 的高质量 UI 组件库)
iview官网： ------------- https://www.iviewui.com
elementUI: (Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库)
elementUI官网： ------------- https://element.eleme.cn/#/zh-CN
vue-element-admin: 狂神教学vue框架（貌似打开不了网站，有些尴尬）
https://panjiachen.github.io/vue-element-admin-site/zh/

异步通信框架Axios GitHub: https://github.com/axios/axios
异步通信框架Axios 中文文档: http://www.axios-js.com/

vue生命周期图示：
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。

JavaScript构建工具
---- Babel:JS编译工具，主要用于浏览器不支持的ES 新特性，比如用于编译TypeScript
---- WebPack:模块打包器，主要作用是打包、压缩、合并及按序加载

P3、第一个Vue程序 21:52

Vue (读音/vju1，类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router，vue-resource，vuex）或既有项目整合。

vue优点
吸收了Angular(模块化)和React(虚拟DOM)的长处，

vue不支持IE8及以下版本，因为VUE使用了ECMAScript5

vue 开发工具

VsCode
Hbuilder
Sublime
WebStorm

IDEA 作为开发VUE工具
需要安装 VUE.js 插件

vue 包下载地址

·包含完整的警告和调试模式: https://vuejs.org/js/vue.js
·删除了警告，30.96RB min + gzip: https://vuejs.org/js/vue.min.js
< script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></ script>
< script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js "></ script>

vue 787 知识点：

学习vue我们必须之到它的7个属性，8个方法，以及7个指令。787原则
el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

在这里插入图片描述

IDEA 开发第一个VUE程序

安装IDEA Vue.js插件

在这里插入图片描述

2 新建空文件夹 vue-first

在这里插入图片描述

3 新建一个最简单的vue html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    {{ message }}
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    // model 层 
    var vmdata={
        message: "abc",

    }
    //  ViewModel 层  
    var vm=new Vue({
        el:"#app",
        data:vmdata,
    })
</script>
</body>
</html>

在这里插入图片描述
通过如下三种方式都可以实现修改数据，让view层页面改变的目的

vm.$data.message="abc1"
"abc1"
vm.message="abc2"
"abc2"
vmdata.message="abc3";
"abc3"

P4、Vue基本语法 12:22

Vue 指令
https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once

el: v-bind:
data: v-if v-else v-else-if
methods: v-on

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    <div v-for="item in items">
        ---{{ item.key}}----{{ item.message }}---{{ item.name}}----
    </div>
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    // model 层
    var vmdata={
        items : [
            {message: "this is one ",name : "name1",key:"key1"},
            {message: "this is two ",name : "name2",key:"key2"},
            {message: "this is three ",name : "name3",key:"key3"},
            {message: "this is four ",name : "name4",key:"key4"},
        ]

    }
    //  ViewModel 层
    var vm=new Vue({
        el:"#app",
        data:vmdata,
    })
</script>
</body>
</html>

P5、Vue绑定事件 09:57

P6、Vue双向绑定 12:52

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    <br>
    <!--input radio 使用v-model的时候，会将 value的值 传递给 v-model 绑定的 model 层对象 -->
    <input type="radio" name="sex" value="男" v-model="radioChecked" > 男
    <input type="radio" name="sex" value="女" v-model="radioChecked"> 女
    radio  checked:{{ radioChecked }}
    <hr>

    <!--select 标准示例  注意第一项 disabled -->
    <select v-model="selectValue">
        <option value="" disabled>==请选择==</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    select value is {{ selectValue }}
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    // model 层
    var vmdata={
        message: "abc",
        radioChecked: "",
        selectValue: "",

    }
    //  ViewModel 层
    var vm=new Vue({
        el:"#app",
        data:vmdata,
    })
</script>
</body>
</html>

P7、Vue组件讲解 11:56

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    <!--最基本的v-for 语句 -->
    <div v-for="(item, index) in items">
    {{ index }}---- {{ item }}
    </div>
    <hr>
    <hr>
    <hr>
    <!--自定义控件  first-vue-component     将字符串myHeader1 传递给 header1 属性 props -->
    <first-vue-component header1="myHeader1"></first-vue-component>
    <hr>
    <!--自定义控件  first-vue-component     将字符串tempHeader的值（headerTest）  传递给 header1 属性 props -->
    <first-vue-component v-bind:header1="tempHeader"></first-vue-component>
    <!--比较上面两个赋值，发现，如果直接给属性赋值，等于号后面的作为字符串处理-->
    <!--如果 使用v-bind: 给某个属性赋值， 等于号后面的作为 （ model 层的）变量来看待 -->
    <hr>
    <hr>
    <hr>
    <!--将页面的items 列表 内容 传递给 item 变量，将 item 变量 赋值给 header1 -->
    <!--header1 是  first-vue-component 中定义的 props 中的一个， 用于传值-->
    <!---->
    <first-vue-component v-for="(item, index) in items" v-bind:header1="item" ></first-vue-component>
    <hr>
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    Vue.component("first-vue-component",{
        data:function(){
            return{
            }
        },
        props:['header1'],
        template:'<div><div>{{ header1 }}</div><div>body</div><div>footer</div><br></div>',

    });


    // model 层
    var vmdata={
        tempHeader: "headerTest",
        items:["java","c++","linux"],

    }
    //  ViewModel 层
    var vm=new Vue({
        el:"#app",
        data:vmdata,
    })
</script>
</body>
</html>

P8、Axios异步通信 24:53

在这里插入图片描述

什么是Axios

  Axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架，它的主要作用就是实现AJAX异步通信，
 其功能特点如下:
           ·从浏览器中创建XMLHttpRequests·从node.js 创建http 请求
           ·支持Promise API[JS中链式编程]
           ·拦截请求和响应
           ·转换请求数据和响应数据
           ·取消请求
           ·自动转换JSON数据
           ·客户端支持防御XSRF(跨站请求伪造)
Axios  GitHub: https://github.com/axios/axios
Axios 中文文档: http://www.axios-js.com/

为什么要使用Axios

由于Vue.js 是一个视图层框架并且作者(尤雨溪）严格准守SoC(关注度分离原则)，
所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁!

修改IDEA 默认js规范为ESCM6

在这里插入图片描述 IDEA – Settings --> Languages & Frameworks --> JavaScript

axios 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--style 中定义 v-clock ，将其赋值给此处，可以让屏幕不闪屏，开始不显示，直接显示加载结果-->

<div id="vue">
    <div>{{ info.name}}</div>
    <div>{{ info.url}}</div>
    <div>{{ info.address.street}}</div>
</div>

<style>
    [v-clock]{
        display: none;
    }
</style>

<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<!--导入 axios cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script type="text/javascript">

    var vm =new Vue({
        el: "#vue",
        data(){
          return {
              info:{
                  name: null,
                  url: null,
                  address:{
                      street: null,
                      city: null,
                      country: null,
                  }
              }
          }
        },
        mounted(){  // 钩子函数   链式编程     基于 ES6 新特性
          axios.get("../jsonks.json")
              .then(response=>(
              //console.log(response.data);
              this.info=response.data
          ))
        },
    });
</script>
</body>
</html>

jsonks.js

{
  "name": "狂神说Java--狗剩study",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "姑苏路07号",
    "city": "江苏",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "ur1": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂伸说java",
      "ur1": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "ur1": "https://www.baidu.com/"
    }
  ]
}

屏幕不闪屏操作

<!--style 中定义 v-clock ，将其赋值给此处，可以让屏幕不闪屏，开始不显示，直接显示加载结果-->

<div id="vue" v-clock>
    <div>{{ info.name}}</div>
    <div>{{ info.url}}</div>
    <div>{{ info.address.street}}</div>
</div>

<style>
    [v-clock]{
        display: none;
    }
</style>

如果不给 div id=“vue” 设置 v-clock 属性，是下面的效果
在这里插入图片描述

在这里插入图片描述
如果给 div id=“vue” 设置 v-clock 属性，
没有中间的图，直接从白板变为最后结果

P9、计算属性 09:53

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    <!--普通方法下发 ***()-->
    {{ byMethodsTime1() }}
    <br>
    <!--计算属性写法 *** -->
    {{ byComputedTime1 }}
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    // model 层
    var vmdata={
        message: "abc",

    }
    //  ViewModel 层
    var vm=new Vue({
        el:"#app",
        data:vmdata,
        methods:{
            byMethodsTime1:function(){
                return Date.now();
            }
        },
        computed:{   //计算属性的结果会缓存起来，直到输入值有变化，才会更新，此处用date，不太明显 
            byComputedTime1: function(){
                return Date.now();
            }
        }
    })
</script>
</body>
</html>

P10、插槽slot 17:46

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<!--<div id="app">-->
    <!--<p>列表书籍</p>-->
    <!--<ul>-->
        <!--<li>Java</li>-->
        <!--<li>Linux</li>-->
        <!--<li>Python</li>-->
    <!--</ul>-->
<!--</div>-->

<div id="app">
    <books>
        <!--将 model层的数据  data_book_header: "leo读书列表", 传递给 视图 books-header -->
        <books-header slot="books-header" v-bind:prop_book_header="data_book_header" ></books-header>
        <!--将 model层的数据  data_book_items: ['中国心绞痛','GUTISKA','钱币收藏册'], 传递给 视图 book-body-->
        <books-body slot="books-body" v-for="book_item in data_book_items"  v-bind:prop_book_name="book_item"></books-body>
    </books>
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    Vue.component("books",{
        template:'<div>\
                    <slot name="books-header" ></slot>\
                    <ul>\
                        <slot name="books-body" ></slot>\
                    </ul>\
                </div>\    '
    });
    Vue.component("books-header",{
        props: ['prop_book_header'],                    //属性 prop_book_header  用于数据交互
        template:'<p>{{ prop_book_header }} </p>  '
    });
    Vue.component("books-body",{
        props: ['prop_book_name'],                       //属性 prop_book_name   用于数据交互
        template:'<li>{{ prop_book_name }}</li>   '
    });
    var vmdata={        // model 层
        data_book_header: "leo读书列表",
        data_book_items: ['中国心绞痛','GUTISKA','钱币收藏册'],
    }
    var vm=new Vue({     //  ViewModel 层
        el:"#app",
        data:vmdata,
    })
</script>
</body>
</html>

P11、自定义事件内容分发 27:48

在这里插入图片描述
C:\workspace\workspace_front\vue\vue狂神\vue-first\chapter01\demo09emit自定义事件.html
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<!--<div id="app">-->
    <!--<p>列表书籍</p>-->
    <!--<ul>-->
        <!--<li>Java</li>-->
        <!--<li>Linux</li>-->
        <!--<li>Python</li>-->
    <!--</ul>-->
<!--</div>-->
<div id="app">
    <books>
        <!--将 model层的数据  data_book_header: "leo读书列表", 传递给 视图 books-header -->
        <books-header slot="books-header" v-bind:prop_book_header="data_book_header" ></books-header>
        <!--将 model层的数据  data_book_items: ['中国心绞痛','GUTISKA','钱币收藏册'], 传递给 视图 book-body-->
        <books-body slot="books-body" v-for="(book_item,book_index) in data_book_items"
                    v-bind:prop_book_name="book_item"
                    v-bind:prop_book_index="book_index"
                    v-on:inner_del_emit="out_del(book_index)"
        ></books-body>
    </books>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    Vue.component("books",{
        template:'<div>\
                    <slot name="books-header" ></slot>\
                    <ul>\
                        <slot name="books-body" ></slot>\
                    </ul>\
                </div>\    '
    });
    Vue.component("books-header",{
        props: ['prop_book_header'],                    //属性 prop_book_header  用于数据交互
        template:'<p>{{ prop_book_header }} </p>  '
    });
    Vue.component("books-body",{
        props: ['prop_book_name','prop_book_index'],                       //属性 prop_book_name   用于数据交互
        template:'<li>{{ prop_book_index }}----{{ prop_book_name }}--- <button v-on:click="inner_del">删除</button></li>   ',
        methods: {
            inner_del: function(){
                this.$emit("inner_del_emit");  //组件删除vue实例中的数据，通过 事件分发，this.$emit('自定义事件名'，参数)，
            }
        }
    });
    var vmdata={        // model 层
        data_book_header: "leo读书列表",
        data_book_items: ['中国心绞痛','GUTISKA','钱币收藏册'],
    }
    var vm=new Vue({     //  ViewModel 层
        el:"#app",
        data:vmdata,
        methods: {
            out_del : function(index ){
                vm.data_book_items.splice(index,1);
            }
        }
    })
</script>
</body>
</html>

P12、第一个vue-cli程序 32:19

视频地址
https://www.bilibili.com/video/BV18E411a7mC?p=13
使用vue-cli搭建vue程序
https://blog.youkuaiyun.com/wei198621/article/details/116431613

设置IDEA以管理员身份运行npm 等指令

在这里插入图片描述

6 webpack 目录结构学习

P13、webpack学习使用 29:11

webpack 笔记专门成章

https://blog.youkuaiyun.com/wei198621/article/details/116431393
总结，就是将 n个js文件打包为一个（压缩后的）js文件，
页面只要引用一个文件就可以了

P14、vue-router路由 28:50

vue-router路由学习笔记
https://blog.youkuaiyun.com/wei198621/article/details/116431866

P15、vue+elementUI 36:01

element.eleme.cn 饿了么插件
layui 独立组件弹出层


一、创建一个名为hello-vue的工程  
0.cmd  打开命令行 
1. vue init webpack hello-vue  
2. 一路 no no no  
....No, I will handle that myself 

    

二、  安装依赖 vue-router/ element-ui / sass-loader  / node-sass 四个插件 、
#进入工程目录
cd hello-vue
#安装vue-router  
cnpm install vue-router --save-dev
#安装element-ui 
npm i element-ui -S 
#安装依赖 
cnpm install
#安装sass加载器
cnpm install sass-loader node-sass --save-dev 
#启动测试
npm run dev  

npm install moduleName  :安装模块到项目目录下
npm install -g moduleName : -g 将模块安装到全局，具体安装到磁盘那个位置，要看npm config prefix 的位置
npm install --save moduleName : --save 的意思是将模块安装到项目目录下，并在package文件的depedencies 节点写入依赖， -S 为该命令的缩写

npm install --save-dev  moduleName:   --save-dev 的意思是将模块安装到项目目录下，并在package文件的devDepedencies 节点写入依赖， -D 为该命令的缩写

三、 运行网站 
http://localhost:8080

在这里插入图片描述


没有视频说的sass-loader 版本过高的情况，20210507 实际是11.0.1，不是8.0.1 不用改7.3.1
    "sass-loader": "^11.0.1",
    "sass-loader": "^7.3.1",

新增 views/Login.vue
新增 views/Main.vue
新增 router/index.js


http://localhost:8081/#/
http://localhost:8081/#/Login
http://localhost:8081/#/Main

在线文档生成工具
https://docsify.js.org/#/quickstart
https://docsify.js.org/#/