Vue2.0基础

最新推荐文章于 2024-10-18 17:51:23 发布
最新推荐文章于 2024-10-18 17:51:23 发布
阅读量1k 收藏
点赞数 3
分类专栏： web前端 文章标签： javascript json vue.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57752520/article/details/123739293
版权

Vue 在这里插入图片描述

文章目录

1、vue 初识

概述

vue是一套用于构建用户界面的渐进式框架，vue被设计为可以自底向上逐层应用。vue核心库只关注视图层，第三方库有：（vue-router页面跳转、vue-resource网络通信、vuex状态管理、vue-UI:ICE）

  • 官网：https://cn.vuejs.org/v2/guide/
  • ICE：https://ice.work/

前台的三要素

  • html(结构)：超文本标记语言
  • css(表现)：层叠样式表
  • JavaScript(行为)：脚本语言，解释型语言

css预处理器

概念：可以将css作为目标文件生成，即动态生成css文件

常用的css预处理器：

  • SASS：基于Ruby编程语言
  • LESS：基于Node.js （建议使用）

JavaScript与ES6配合使用（webpack打包成为ES6支持）

JavaScript框架

  • jQuery:JavaScript框架，简化了DOM操作
  • Angular：模块化开发理念
  • React：虚拟DOM
  • vue：结合了模块化开发理念(Angular)和虚拟DOM(React),中国人开发
  • Axios:前端通信框架，为jQuery提供的ajax通信功能

UI框架

  • Ant-Design：基于React的UI框架
  • ElementUI：基于vue的UI框架
  • Bootstrap：用于前端开发的开源工具包
  • AmazeUI：一款HTML5跨屏前端框架

JavaScript构建工具

Bable：js编译工具，用于编译TypeScript

WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

后端技术：

  • Express：Node.js
  • Koa：Express简化
  • npm：项目综合管理工具，类似于maven

2、MV*格式的模式

前端模式的演变：

  • MVC（同步通信为主）：model、view、controller
  • MVP（异步通信为主）：model、view、presenter
  • MVVM（异步通信为主）：model、view、ViewModel

为了降低前端开发复杂度，涌现大量的前端框架，比如：AngularJS、React、VueJS、EmberJS。这些框架总的原则是先按类型分层

**总结:**模式也好、技术也罢，没有好坏之分只有适合与不适合之分。

3、MVVM模式

MVVM模式是一种软件架构设计模式，是一种简化的用户界面的事件驱动编程方式。核心为==ViewModel==

  • 该层向上与视图进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交换

在这里插入图片描述

流行的MVVM框架：Vue.js、Angular Js等

  • MVVM模式示意图：

在这里插入图片描述

过程：

  • 前台view层向ViewModel层拿到数据显示在页面中
  • view与ViewModel为双向绑定只要数据变化视图会立即跟着变化
  • ViewModel向Model层通过ajax请求数据，Model层会返回一个JSON格式的数据
  • Model层就与java有关系了，通过之前所学的SSM或其他框架进行业务逻辑处理从数据库拿数据返回
  • 这就是MVVM模式的大概过程。

MVVM好处：低耦合、可复用、独立开发、可测试。

4、第一个Vue程序

代码编写

<!--下载地址线上静态资源引入-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

vue.js的核心是实现MVVM模式的ViewModel角色（双向绑定）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--ES6模板字符取数据-->
            {{message}}
        </div>
        

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    message:"hello,vue!"
                }
            });
        </script>
    </body>
</html>

vue命令：v-bind:title="message"

<!--使用vue的命令字符取数据-->
<div id="app">
    <span v-bind:title="message"></span>
</div>

5、vue的逻辑基本语法

  • v-if 条件判断
  <li v-if="type==='A'">A</li>
  • v-else 条件判断
 <li v-else>C</li>
  • v-else-if 条件判断
<li v-else-if="type==='B'">B</li>
  • v-for 循环
<li v-for="item in items">
    {{item.messages}}
</li>

总代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <li v-if="type==='A'">A</li>
            <li v-else-if="type==='B'">B</li>
            <li v-else>C</li>
        </div>
        <div id="bpp">
            <li v-for="item in items">
                {{item.messages}}
            </li>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    type:'A'
                }
            });
            var vm2=new Vue({
                el:"#bpp",
                data:{
                    items:[{messages:"学SSM框架"},{messages: "学Vue前端"},{messages: "学Mysql数据库"}]
                }
            });
        </script>

    </body>
</html>

事件绑定v-on

<div id="app">
<button v-on:click="sayHi">click me</button>
</div>

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--当点击了该按钮就会调用vue对象中methods中的sayHi方法-->
            <button v-on:click="sayHi">click me</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    message:"hahaha"
                },
                methods:{
                    sayHi:function (event){
                        alert(this.message);
                    }
                }
            });
        </script>
    </body>
</html>

当点击了该按钮就会调用vue对象中methods中的sayHi方法

6、Vue双向绑定

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图发生变化时候，数据也会同步变化，这也就是Vue.js的精髓之处

  • 数据的双向绑定，一定是对于UI控件来说，即input等表单元素。
  • 如果使用的是vuex，实际上数据还是单向的，双向绑定是针对UI控件来说的。
  • 可以用 v-model 指令在表单 、、及 元素上创建双向数据绑定。
  • 注意：v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将vue实例的数据作为数据来源，在data选项中声明初始值。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message : "双向绑定!",
            messages2 : "",
            selected : ""
        }
    });
</script>

6.1 单行文本

  • 代码演示
<!--文本-->
<input type="text" v-model="message" /> {{message}}

6.2 单选框

  • 代码演示
<!--单选框-->
<p>
    <input type="radio" name="sex" value="男" v-model="messages2"/>男
    <input type="radio" name="sex" value="女" v-model="messages2"/>女
</p>
<p>Value:&nbsp;{{messages2}}</p>

6.3 下拉菜单

  • 代码演示
<!--下拉菜单-->
<p>
    <select v-model="selected">
        <option value="" disabled>请选择...</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</p>
<p>选择的是:{{selected}}</p>

总代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        #app {
            background-color: skyblue;
        }
    </style>
    <body>
        <div id="app">
            <!--文本-->
            <input type="text" v-model="message" /> {{message}}
            <!--单选框-->
            <p>
                <input type="radio" name="sex" value="男" v-model="messages2"/>男
                <input type="radio" name="sex" value="女" v-model="messages2"/>女
            </p>
            <p>Value:&nbsp;{{messages2}}</p>
            <!--下拉菜单-->
            <p>
                <select v-model="selected">
                    <option value="" disabled>请选择...</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                </select>
            </p>
            <p>选择的是:{{selected}}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    message : "双向绑定!",
                    messages2 : "",
                    selected : ""
                }
            });
        </script>
    </body>
</html>

注意：

  • 如果v-model表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在IOS系统中，所以要提供一个值为空的禁用选项 请选择…

7、Vue组件讲解

概念

​ 组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment等框架有着一举同工之处

组件的创建：Vue.component("组件的名称"，{组件的主体部分}) 模板表示：(template:’

  • {{item}}
  • ’)

    • 用时只需：<组件名></组件名> 标签即可
    Vue.component("qiumin",{
<!--利用props接收参数-->
props:['item'],
template:'<li>{{item}}</li>'
});
    • 代码演示
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <qiumin v-for="item in items" v-bind:item="item"></qiumin>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            Vue.component("qiumin",{
                <!--利用props接收参数-->
                props:['item'],
                template:'<li>{{item}}</li>'
            });
            var vm = new Vue({
                el:"#app",
                data:{
                    messages:"组件的学习",
                    items:["java","web","mysql"]
                }
            })
        </script>
    </body>
</html>

    注意：默认规则下props的属性值不能为大写

    8、Axios异步通信

    Axios是一个开源的可以用在浏览器和Node.js的异步通信框架，主要目的是实现ajax异步通信【js版本需为满足ES6规范】

    功能：

    • 从浏览器中创建XMLHTTPRequests
    • 从node.js创建http请求
    • 支持promise API 【js中的链式编程】
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换JSON数据
    • 客户端支持防御XSRF（跨域请求伪造）

    **GitHub：**https://github.com/axios/axios

    **中文文档：**http://www.axios-js.com/

    使用axios原因

    ​ 由于vue.js是一个视图层框架，并且严格遵守SoC（关注度分离原则），所以vue.js并不包含ajax的通信功能，为了解决通信问题，开发了一个vue-resource插件，不过进入2.0后推荐使用Axios框架，少用jQuery操作，因为它操作DOM太频繁！

    9、第一个Axios应用程序

    建立一个JSON格式的数据，利用Axios请求到该数据

    mounted钩子函数加data（）和return完成axios异步通信

    核心：

    //引入axios框架
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//返回通信后得到的JSON数据
data(){
    return{
        info:{
            name:null,
            address:{
                street: null,
                city: null,
                country: null
            },
            links:[
                { h1:null},
                {h2:null}
            ]
        }
    }
},
    //axios异步通信
    mounted(){//钩子函数 链式编程 ES6新特性
        axios.get('../data.json').then(response =>(this.info=response.data));
    }
    • data.json
    {
  "name": "java学习",
  "address": {
    "street": "北京冬奥会",
    "city": "beijing",
    "country": "中国"
  },
  "links": [
    {
      "h1": "bei"
    },{
      "h2": "jing"
    }
  ]
}
    • axios
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        /*v-clock解决闪烁问题*/
        [v-clock]{
            display: none;
        }
    </style>
    <body>
        <div id="app" v-clock>
            <div>{{info.name}}</div>
            <div>{{info.address.street}}</div>
            <div>{{info.address.city}}</div>
            <div>{{info.address.country}}</div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                data(){
                    return{
                        info:{
                            name:null,
                            address:{
                                street: null,
                                city: null,
                                country: null
                            },
                            links:[
                                { h1:null},
                                {h2:null}
                            ]
                        }
                    }
                },
                mounted(){//钩子函数 链式编程 ES6新特性
                    axios.get('../data.json').then(response =>(this.info=response.data));
                }
            });
        </script>
    </body>
</html>

    10、vue的生命周期

    **官方文档：**https://cn.vuejs.org/v2/guide/instance.html 【生命周期图示】

    • Vue实例有一个完整的生命周期：

    开始创建—>初始化数据—>编译模板—>挂在DOM—>渲染—>更新—>渲染—>卸载

    以上即为vue的生命周期的过程，通俗来说就是vue实例从创建到销毁的过程，就是vue生命周期

    • 在vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们自己注册的JS方法控制整个大局，在这些事件响应的方法中的 this 直接指向的是Vue的实例。

    生命周期图示：

    在这里插入图片描述

    在这里插入图片描述

    生命周期核心部分即为mounted，数据监听、请求等等钩子函数

    11、计算属性

    计算属性的重点突出在==属性两个字上（属性是名词），首先是个属性其次这个属性有计算的能力，这里的计算就是个函数computed==对象中的函数，简单来说就一个能够将计算结果缓存起来的属性，可以想象为缓存

    计算出来的结果保存在属性中内存中运行虚拟DOM

    computed:{
      sayHi2:function (){return Date.now();}
    }
    • 总体代码
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--调用方法-->
            <p>{{sayHi()}}</p>
              <!--调用属性-->
            <p>{{sayHi2}}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    messages:"计算属性!"
                },
                methods:{
                    sayHi:function (){return Date.now();}
                },
                computed:{
                    sayHi2:function (){return Date.now();}
                }
            });
        </script>
    </body>
</html>

    结论：

    • 计算属性就相当于缓存，当没有其他数据的改变时，缓存中的属性值不变，当有变化时就会更新缓存，相当于MySQL的缓存
    • 如果调用方法每次都要重新计算，就会产生系统开销，所以如果该值不会总是变化就可用计算属性
    • 因为计算属性是属性所以即使其为函数调用时也不需加括号
    • 以节省系统开销

    12、插槽slot（内容分发）

    内容分发 插槽slot

    ​ vue.js中可以使用元素作为承载分发内容的出口，即插槽，可以应用于组合组件场景中，可拔插

    12.1 模板定义一个待办事项的组件

    <div id="app">
    <todo></todo>
</div>
<script>
    Vue.component("todo",{
        template:'<div>'+
        			'<div>标题</div>'+
        				'<ul>'+
        					'<li></li>'+
        				'</ul>'+
        			'</div>'
    });
</script>

    12.2 可以设计两个插槽使标题和
    • 动态绑定，即留出两个插槽，实现可拔插（组件）

    Vue.component("todo",{
        template: '<div>'+
                    '<slot name="todo-title"></slot>'+                //第一个插槽
                    '<ul>'+
                        '<slot name="todo-item"></slot>'+             //第二个插槽
                    '</ul>'+
                    '</div>'
    });

    12.3 用组件插上两个插槽

    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-item",{
        props: ['item'],
        template:'<li>{{item}}</li>'
    });

    12.4 通过插槽将组件插入

     <todo>
        <!--slot属性值为插槽的名字-->
        <todo-title slot="todo-title" v-bind:title="messages"></todo-title>
        <todo-item slot="todo-item" v-for="item in items" v-bind:item="item"></todo-item>
    </todo>

    12.5 整合代码实现插槽的应用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
</head>
<body>
<div id="app">
    <todo>
        <!--slot属性值为插槽的名字-->
        <todo-title slot="todo-title" v-bind:title="messages"></todo-title>
        <todo-item slot="todo-item" v-for="item in items" v-bind:item="item"></todo-item>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //name属性即为该插槽的名字，哪个组件想插入就slot属性为该name即可
    Vue.component("todo",{
        template: '<div>'+
                    '<slot name="todo-title"></slot>'+     
                    '<ul>'+
                        '<slot name="todo-item"></slot>'+
                    '</ul>'+
                    '</div>'
    });
	//组件一
    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    //组件二
    Vue.component("todo-item",{
        props: ['item'],
        template:'<li>{{item}}</li>'
    });
    var vm=new Vue({
        el:"#app",
        data:{
            messages:"标题",
            items:["java","web","ssm"]
        }
    });
</script>
</body>
</html>

    注意：

    • 组件todo-title和组件todo-item分别被分发到了todo的todo-title和todo-item插槽中
    • 插槽名可自定义，插槽名可以与插入的组件名不一致，为了整体性，推荐一致

    13、自定义事件

    **问题：**数据项在Vue实例中，但删除操作在组件中完成，那么组件如何删除Vue实例中的数据呢？

    **解决方案：**使用this.$emit(‘自定义事件名’，参数)

    自定义分发事件

    事件绑定只能绑定当前中的方法，即vue只能绑定vue中的方法，组件中事件只能绑定组件中的方法，所以要通过this.$emit('自定义事件名'，参数)将两者联系起来

    • Vue自定义一个方法
        methods: {
                removearry:function (index){
                    console.log("删除了"+this.items[index]);
                    this.items.splice(index,1);
                }
            }
    • 在组件中调用该方法的绑定事件名
    <todo-item slot="todo-item" v-for="(item,index) in items"
                   v-bind:item="item" :index="index" v-on:removearry="removearry(index)"></todo-item>
template:'<li>{{item}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button @click="remove">delete</button></li>',
        methods:{
            remove:function (index){
                //alert("11111");
                this.$emit('removearry',index)
            }
    • 总体代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件分发</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="messages"></todo-title>
        <todo-item slot="todo-item" v-for="(item,index) in items"
                   v-bind:item="item" :index="index" v-on:removearry="removearry(index)"></todo-item>
    </todo>                                         <!--绑定vue中的函数方法-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("todo",{
        template: '<div>'+
            '<slot name="todo-title"></slot>'+
            '<ul>'+
            '<slot name="todo-item"></slot>'+
            '</ul>'+
            '</div>'
    });

    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-item",{
        props: ['item','index'],
        //事件触发调用组件中的方法
        template:'<li>{{item}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button @click="remove">delete</button></li>',
        methods:{
            remove:function (index){
                //alert("11111");
                //调用外部绑定事件名
                this.$emit('removearry',index)
            }
        }
    });
    var vm=new Vue({
        el:"#app",
        data:{
            messages:"标题",
            items:["java","web","ssm"]
        },
        //自定义方法用于删除vue中的相关数据
        methods: {
            removearry:function (index){
                console.log("删除了"+this.items[index]);
                this.items.splice(index,1);
            }
        }
    });
</script>
</body>
</html>
    • 注意：事件方法中的this.$emit(‘removearry’,index)自定义事件名必须全部小写，不管是绑定的事件名还是vue中对应的方法名都必须全部小写，否则失效。

    前端 组件 Vue 三者之间的关系图

    在这里插入图片描述

    14、前部总结

    前端

    基础语法—>网络通信Axios—>组件插槽—>事件分发

    • 可以满足单页面应用，即没有页面跳转，用页面跳转需用到vue-router

    常用的属性：

    • v-if、v-else-if、v-else、v-for
    • v-on 绑定事件 简写@事件名
    • v-model 数据双向绑定
    • v-bind 给组件绑定参数 组件用props接收，属性值需全部小写 简写 ：

    组件化：

    • 组合组件插槽slot
    • 组建内部绑定vue事件用到this.$emit()
    • 计算属性，缓存

    遵循SoC关注度分离原则，Vue是纯视图框架，并不包含ajax之类的通信技术，解决方法用Axios框架做异步通信

    说明

    ​ Vue的开发基于Node.js，实际开发中采用 vue-cli 脚手架开发，vue-router路由，vuex做状态管理，Vue UI（ElementUI）来快速搭建前端项目。-

    15、第一个vue-cli项目

    15.1 vue-cli简介

    什么是vue-cli

    ​ vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板，预定义好目录结构即基础代码，就好比在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，让我们开发更加迅速

    1.主要功能：

    • 统一目录结构
    • 本地调试
    • 热部署
    • 单元测试
    • 集成打包上线

    需要的环境

    • Node.js：http://nodejs.cn/download/

    • Git：https://git-scm.com/downloads

      镜像：https://npm.taobao.org/mirrors/git-for-windows/

    2.确定node.js是否安转成功：

    • cmd下输入 node -v，查看是否正确的打印版本号
    • cmd下输入 npm -v，查看是否正确的打印版本号

    3.安转node.js淘宝镜像加速器（cnpm）：

    # -g 全局安装(推荐使用)
npm install cnpm -g

#或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

    默认安装的位置：C：\Users\Administrator\AppData\Roaming\npm

    4.安转vue-cli：

    • cnpm install vue-cli -g
    • vue list (测试是否安转成功)

    15.2 第一个vue-cli应用程序

    • 创建一个Vue项目，在任意盘符下建立一个空文件夹

    • 使用管理员身份运行cmd并进入该创建的空文件夹（必须进入文件夹）

    • 在文件夹中创建一个基于webpack模板的vue应用程序

      ​ vue init webpack myvue （myvue为自定义项目名）

    说明：初始化时一直选择 no

    在这里插入图片描述

    初始化并运行

    cd myvue
npm install
npm run dev

    16、Webpack

    webpack是前端热门的模块加载器兼打包工具，相当于maven，可以使得ES6规范的代码通过打包降低版本提高一些兼容性

    ES6模板：

    // EcmaScript6标准增加了JavaScript语言层面的模块体系定义，能把各种资源，如：js、jsx、es6、sass、less、图片等都作为模块来处理使用，ES6模块的设计思想，是尽量静态化，是编译时能够确定模块的依赖关系，以及输入输出的变量

    优点：

    • 容易进行静态分析
    • 面向未来的EcmaScript标准

    缺点：

    • 原生浏览器端还没有实现该标准（webpack）
    • 全新的命令，新版的Node.js才支持

    安装Webpack(命令提示符)

    • npm install webpack -g
    • npm install webpack-cli -g
    • 测试是否成功：webpack -v、webpack-cli -v (版本打印)

    配置

    ​ 创建 webpack.config.js

    • entry：入口文件，指定webpack用哪个文件作为项目的入口
    • output：输出，指定webpack把处理完成即打包好的文件放置指定路径
    • module：模块
    • plugins：插件
    • resolve：设置路径指向
    • watch：监听，用于设置文件改动后直接自动打包

    使用webpack

    1、创建项目

    2、创建一个名为modules的目录，用于放置技术模块等资源文件

    3、在module目录下创建一个hello.js，导出，在下面导入

    exports.sayhi=function (){
  document.write("<h1>qiuminxuevue</h1>")
}

    4、在module目录下创建一个入口文件qiumin.js，用于entry属性

    var hello=require("./hello");
hello.sayhi()

    5、在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

    module.exports={
  entry: "./modules/qiumin.js",
  output: {
    filename: "./js/bundle.js"
  }
};

    6、打包后会生成一个js文件

    7、在index页面中导入该打包后的文件即可

    17、vue-router

    ​ vue-router是vue.js官方的路由管理器，它hevue.js的核心深度集成，让构建单页面应用变得高效

    功能：

    • 嵌套的路由/视图表
    • 模块化、基于组件的路由配置
    • 路由参数
    • 基于vue.js过渡系统的视图过渡效果
    • 细粒度导航控制
    • 自动激活css class的链接，自定义滚动条行为

    安装

    vue-router是一个插件包，在项目目录中安装，即不全局安装只在特定项目中安装

    npm install vue-router --save-dev

    特别注意：需要指定安装版本，默认为最新版本可能会存在问题，所以在package.json中指定版本

        "vue-router": "^3.5.3",
    • 使用
    import Vue from 'vue'
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter);

    17.1 路由跳转测试

    • 组件1（Main）
    <template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>
    • 组件2（Content）
    <template>
<h1>内容页</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>
    • 路由配置（index.js）
    import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../components/Main'
import Content from '../components/Content'

//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
  routes:[
    {//路由路径
      path: '/content',
      //路由名称
      name: 'content',
      //跳转到的组件
      component:Content
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
});
    • App.vue（在该页面点击跳转）
    <template>
<div id="app">
    //路由跳转
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    //视图
    <router-view></router-view>
    </div>
</template>

<script>

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

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
    • 入口（main.js）
    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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: '<App/>'
})

    运行测试

    • 特别注意：控制vue-router版本下载！！！
    • 特别注意：控制vue-router版本下载！！！
    • 特别注意：控制vue-router版本下载！！！

    18、嵌套路由

    嵌套路由又称子路由，在实际应用中，通常由多层嵌套组合而成，同样的，URL中各段动态路径也按某种结构对应嵌套的各层组件中，即在一个组件的另一个组件中也有路由

    • 父组件（content.vue）
    <template>
<div>
    <h1>内容页</h1>
    <router-link to="/content/user">用户信息页</router-link>
    <router-link to="/content/useradd">用户添加页</router-link>
    <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>
    • 子组件（user.vue）
    <template>
<h1>用户信息页</h1>
</template>

<script>
export default {
  name: "user"
}
</script>

<style scoped>

</style>
    • 子组件（useradd.vue）
    <template>
<h1>用户添加页</h1>
</template>

<script>
    export default {
        name: "useradd"
    }
</script>

<style scoped>

</style>
    • 路由配置
    import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../components/Main'
import Content from '../components/Content'
import User from '../components/user'
import Useradd from '../components/useradd'

//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
    routes:[
        {//路由路径
            path: '/content',
            //路由名称
            name: 'content',
            //跳转到的组件
            component:Content,
            //嵌套路由配置
            children:[
                {
                    path: '/content/user',
                    component: User
                },
                {
                    path : '/content/useradd',
                    component : Useradd
                }
            ]
        },
        {
            path: '/main',
            name: 'main',
            component: Main
        }
    ]
});
    • APP.vue
    <template>
<div id="app">
    <router-link to="/main">首页</router-link>
    <!--该组件中也具有路由配置-->
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
    </div>
</template>

<script>

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

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

    19、参数传递及重定向

    参数传递

    方式一：

    • 通过router-link中的to中的另一个属性params传递传递参数
    <router-link :to="{name:'user',params:{id:1}}">用户信息页</router-link>
    • 路由配置设置
    path: '/content/user/:id', //后面直接加上/:d
    • 视图展示
    {{$route.params.id}}

    方式二：

    • 通过router-link中的to中的另一个属性params传递传递参数
    <router-link :to="{name:'user',params:{id:1}}">用户信息页</router-link>
    • 路由配置设置，加上props:true
    path: '/content/user/:id',
props:true
    • 视图展示
    <template>
  <div>
    <h1>用户信息页</h1>
    {{$route.params.id}}
    {{id}}  <!--直接用绑定的id取值-->
  </div>
</template>

<script>
export default {
  props:['id'],  //加上
  name: "user"
}
</script>

<style scoped>

</style>

    重定向

    • 重定向去首页
    {
path: '/gohume',
redirect:'/main'   //重定向会首页
}

    20、404与路由钩子

    路由模式：

    • hash： 路径带 # 符号， 如 http://localhost/#/user
    • history：路径不带 # 符号，如http://localhost/user

    当不想让路由带有 # 符号路由配置为加上：mode : 'history'

    export default new VueRouter({
  mode:'history',  //不带 # 符号
  routes:[
    {//路由路径
      path: '/content',
      //路由名称
      name: 'content',
      //跳转到的组件
      component:Content
    }

    为处理404创建一个视图组件，当资源不存在时显示：

    <template>
<h1>404,资源访问不存在！！！</h1>
</template>

<script>
    export default {
        name: "notfind"
    }
</script>

<style scoped>

</style>
    • 路由配置
    {   //当请求没有匹配时就会到404组件
    path : '*',
    component : Notfind
}

    登录时请求操作且带参数

    methods:{
  onsubmit(forname){
    //为表单提供验证功能
    this.$refs[forname].validate((valid)=>{
      if(valid){
        //使用vue-router路由到指定页面，该方法称为编程式导航
        this.$router.push("/main/"+this.form.user);  //带参数push到首页
      }else {
        this.dialogVisible=true;
        return false;
      }
    });
  }
}

    路由钩子与异步请求

    • beforeRouterEnter：在路由进入之前执行
    • beforeRouterLeave：在路由离开前执行
    <script>
    export default {
        name: "Content",
        beforeRouteEnter:(to,from,next)=>{
            console.log("进入路由前");
            next();
        },
        beforeRouteLeave:(to,from,next)=>{
            console.log("离开路由前");
            next();
        }
    }
</script>

    参数说明：

    • **to：**路由要跳转的路径信息
    • **from：**路由跳转前的路径信息
    • **next：**路由控制参数
      • next()跳入下一个页面
      • next(’/path’) 改变跳转方向，使其跳到另一个路由
      • next(false) 返回原来的页面
      • next((vm)=>{}) 仅在beforeRouterEnter中使用，vm是组件实例，可实现自定义事件，即可拿到其他组件中的方法

    20.1 异步请求与钩子

    1、安装Axios：cnpm install axios -s

    ​ npm install --save vue-axios

    2、main.js引用Axios

    import axios from "axios"
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios,axios);

    3、在static中准备json数据

    {
  "name": "java学习",
  "address": {
    "street": "北京冬奥会",
    "city": "beijing",
    "country": "中国"
  },
  "links": [
    {
      "h1": "bei"
    },{
      "h2": "jing"
    }
  ]
}

    4、在beforeRouterEnter进行异步请求JSON数据

    <script>
    export default {
        name: "Content",
        beforeRouteEnter:(to,from,next)=>{
            console.log("进入路由前");
            next(vm => {
                vm.getData(); //进入路由前执行getData方法
            });
        },
        beforeRouteLeave:(to,from,next)=>{
            console.log("离开路由前");
            next();
        },
        methods : {
            getData:function (){
                //axios请求数据
                this.axios({
                    method : 'get',
                    url:'http://localhost:8080/static/mock/data.json'
                }).then(function (response){
                    console.log(response); //控制台打印响应的数据
                })
            }
        }
    }
</script>

    21、总结

    • vue的基础部分讲完，提高部分可深入研究
    • MVVM+vue（基础，组件，生命周期，插槽，自定义事件）+vue-cli+axios（异步通信）+webpack+vue-router（路由选择）+路由钩子

    ​

    ​ qiumin

    l axios -s`

    ​ npm install --save vue-axios

    2、main.js引用Axios

    import axios from "axios"
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios,axios);

    3、在static中准备json数据

    {
  "name": "java学习",
  "address": {
    "street": "北京冬奥会",
    "city": "beijing",
    "country": "中国"
  },
  "links": [
    {
      "h1": "bei"
    },{
      "h2": "jing"
    }
  ]
}

    4、在beforeRouterEnter进行异步请求JSON数据

    <script>
    export default {
        name: "Content",
        beforeRouteEnter:(to,from,next)=>{
            console.log("进入路由前");
            next(vm => {
                vm.getData(); //进入路由前执行getData方法
            });
        },
        beforeRouteLeave:(to,from,next)=>{
            console.log("离开路由前");
            next();
        },
        methods : {
            getData:function (){
                //axios请求数据
                this.axios({
                    method : 'get',
                    url:'http://localhost:8080/static/mock/data.json'
                }).then(function (response){
                    console.log(response); //控制台打印响应的数据
                })
            }
        }
    }
</script>

    21、总结

    • vue的基础部分讲完，提高部分可深入研究
    • MVVM+vue（基础，组件，生命周期，插槽，自定义事件）+vue-cli+axios（异步通信）+webpack+vue-router（路由选择）+路由钩子

    ​

    ​ qiumin

Qiumin~
关注
专栏目录
Vue2.0基础语法
qq_41858644的博客
02-27 1746
vue2
vue2.0 基础知识
浅陌繁星的博客
10-05 3267
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。
【持续更新】Vue2.0基础入门学习教程
qq_41112238的博客
04-15 4106
Vue简介 概念 一套用于构建用户界面（用Vue往html页面中填充数据）的前端框架 特性 一、数据驱动视图（单向数据绑定） 使用了Vue的页面中，Vue会监听数据变化，自动重新渲染页面结构。就是说数据变化后，页面会自动更新。 二、双向数据绑定 在网页中，form表单负责采集数据，Ajax负责提交数据。 填写表单时，双向数据绑定可以在不操作DOM的前提下自动把用户输入的数据填写到数据源中。也就是说，页面上表单采集的数据发生变化时，Vue会自动获取并更新到js中。 MVVM MVVM（Model
vue2.0基础项目构建
iloveffjj的博客
10-19 240
vue2.0初始化
vue2.0基础入门
beekim的博客
11-23 1349
VUE2.0 2.1入门 1 什么是vue？ 构建用户界面 用vue往html页面中填充数据，非常方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能 要学习vue，就是在学习vue框架中规定的用法 vue的指令、组件（是对UI结构的复用）、路由、Vuex 只有上面罗列的内容掌握以后，才有开发vue项目的能力 2 vue特性 数据驱动视图 双向数据绑定 注意：这两个特性的底层原理是MVVM 2.1数据驱动视图 数据的变化会驱动视图自动更新 好处：程序员
Vue2.0-vue基础
qq_52822043的博客
04-06 1669
目录 1. vue简介 1）vue的特性 1⃣️数据驱动视图 2⃣️双向数据绑定 2）MVVM 3）MVVM的工作原理 2. vue的基本使用 1）基本使用步骤 ​ 2）基本代码与MVVM的对应关系 3. vue的调试工具 4. vue的指令 1）指令的概念 2）内容渲染指令 3）属性绑定指令 使用JavaScript表达式 4）事件绑定指令 1⃣️事件对象$event 2⃣️事件修饰符 3⃣️按键修饰符 5）双向绑定指令 1⃣️v-model指令的修饰符..
vue2.0 基础
qaz521000的博客
08-30 214
浏览器通过window.sessionStorage和window.localStorage来实现本地存储机制。存储内容一半支持5MB左右，不同浏览器可能不一样。
创建vue2.0步骤
huzi_1998的博客
04-29 2226
vue搭建
VUE 2.0 基础入门（三） vue基础入门
ElysiumAILab
03-23 596
VUE 2.0 基础入门（三）前言watch 侦听器1 什么是 watch 侦听器2 使用 watch 检测用户名是否可用3 immediate 选项 前言 课程内容来自视频链接 希望大家多多支持作者 本文记录用，防止遗忘 watch 侦听器 1 什么是 watch 侦听器 watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 语法格式如下 const vm = new Vue({ el: '#app', data: { username: '' }, watch: { /
vue2.0基础教程
02-01
Vue.js 是一款非常流行的前端JavaScript框架，特别是在2.0版本发布后，它的使用率和影响力进一步提升。Vue2.0引入了许多改进和...在VUE2.0基础笔记中，你将找到更多详细的教程和示例，帮助你深化理解并熟练运用Vue2.0。
学习 vue2.0基础 双向绑定
04-02
学习 vue2.0基础 双向绑定
vue2.0 基础组件 component
04-12
学习视频
Vue2.0基础入门.md
10-21
Vue2.0基础入门.md
vue2.0 基础 v-show 数据选择器 学习 视频
04-08
老师发的一个作业学习视频， 放到这里，分享出来。
JS-常用功能
qq_40950398的博客
10-18 138
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 756
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 782
请联系我获取更详细的演示视频。
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧
最新发布
weimengen的博客
10-18 547
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。
Vue2.0 基础笔记：MVVM设计模式和组件化思想
<div id="app"></div>", data:{ message:"Hello Vue!" } }); 2.2 模板语法模板语法是一种特殊的 HTML 语法，用来将模板中的数据渲染到页面上，在模板中使用双大括号{{}}包含数据，被包含的数据会被渲染到页面上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值