Vue学习

最新推荐文章于 2022-11-11 17:42:57 发布
最新推荐文章于 2022-11-11 17:42:57 发布
阅读量591 收藏 1
点赞数
文章标签： vue.js mvc 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54202620/article/details/122524752
版权

Vue

1.初识Vue

1.1什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

至此，我们就明白了，Vue.,js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

1.2什么是MVVM

MVVM (Model-View-ViewModel)是一种软件架构设计模式，由微软WPF(用于替代WinForm，以前就是用这个技术开发桌面应用程序的和Silverlight(类似于Java Applet，简单点说就是在浏览器上运行的 WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman(同样也是WPF和Silverlight的架构师）于2005年在他的博客上发表。
MVVM源自于经典的MVC (Model-View-Controller)模式。MVVM的核心是ViewModel层，负责转换 Model中的数据对象来让数据变得更容易管理和使用，其作用如下:
·该层向上与视图层进行双向数据绑定
·向下与Model层通过接口请求进行数据交互

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYNzjjHh-1642321613534)(C:\Users\hedada\AppData\Roaming\Typora\typora-user-images\image-20220102165821493.png)]

1.3为什么使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View）和模型（Model)，有几大好处

  • 低耦合:视图(View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View 上，当View变化的时候Model可以不变，当Model变化的时候View 也可以不变。
  • 可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • **独立开发:**开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。
  • 可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

2.第一个Vue程序

</head>
<body>
<p id="a">
    {{message}}<!--双大括号-->
</p>



<script  src="E:\vue.js" ></script>
<script>
    var vm =new Vue({
        el:"#a",//注意是逗号
        data:{
            message:"luo  yue"//注意是冒号结尾不用
        }
    })
</script>
</body>
</html>

V-bind

你看到的v-bind等被称为指令。指令带有前缀v-，以表示它们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title特性和Vue 实例的message属性保持一致”。
如果你再次打开浏览器的JavaScript控制台，输入app.message = ‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。跟{{}}一样的功能。


<div id="app" >
    <span v-bind:title= "message">鼠的提示标悬停几秒钟查看此处动态绑定信息!</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript ">
    var app = new Vue({
        el: '#app',
        data: {
            message: '页面加载于' + new Date().toLocaleString()}})

2.1 判断和循环

判断：

if

<div id="app" >
    <span v-bind:title= "message">鼠的提示标悬停几秒钟查看此处动态绑定信息!</span>
    <p  v-if="ok">ok</p>
    <p  v-else-if="type==='a'">1</p>
    <p  v-else-if="type==='b'">2</p>
    <p  v-else=>c</p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript ">
    var app = new Vue({
            el: '#app',
            data: {
                message: '页面加载于' + new Date().toLocaleString(),
                // ok:true,
                type:'a'

            }})

循环

<div id="app" >
    <span v-bind:title= "A">鼠的提示标悬停几秒钟查看此处动态绑定信息!</span>
    <li v-for="item in items">
         {{item.message}}
        
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript ">
    var app = new Vue({
            el: '#app',
            data: {
                A:'A',
                items: [
                   {message: '落月学Java'},
                   {message: '落月学c'},
                   {message: '落月学html '},
                   {message: '落月学css '},


            ] }})

2.2绑定事件

v-on: 绑定事件

click点击事件

别的事件也行参考官方文档

<!--    绑定事件 -->
    <button v-on:click="sa">点击我</button>
    <li v-for="item in items">
        {{item.message}}

    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript ">
    var app = new Vue({
        el: '#app',
        data: {
            A:'A',
            message: "落月学Java"
        },

        methods: {//方法必须定义在Vue的methods对象中
            sa: function (event) {
                alert(this.message);//弹的这条消息要在data中不然会出现未定义的错误
            }
        }
        })

2.3 双向数据绑定

什么是双向数据绑定

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

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定
在Vue.js 中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.,js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪;局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意: v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue 实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

<head>
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    输入框数据双向绑定-->
    用户:<input type="text" v-model="aa" id="a"/>{{aa}}
</div>
<div id="app1">
<!--   下拉框数据双向绑定 -->
    请选择姓氏:
      <select v-model="bb">
          <option value="" disabled>--请选择--</option>
          <option>王</option>
          <option>落</option>
          <option>月</option>
      </select>
     {{bb}}
</div>
<div id="app2">
    <!--    文本框数据双向绑定-->
    文本内容:<textarea rows="30px" cols="30px"  v-model="cc"  id="text"></textarea>
    <p>文本内容:{{cc}}</p>
</div>
<div id="app3">
    <!--    单选框数据双向绑定-->
    性别:<input type="radio" name="sex" value="男" v-model="dd">男
         <input type="radio" name="sex" value="女" v-model="dd"  >女
    <p>性别是:{{dd}}</p>
</div>
<div id="app4">
    <!--    多选框数据双向绑定-->
  爱好：<input type="checkbox" name="guoji" value="中国" v-model="ee"/>中国
  <input type="checkbox" name="guoji" value="美国"  v-model="ff"/>美国
  <input type="checkbox" name="guoji" value="英国"  v-model="gg"/>英国
    <p>爱好是:{{ee}}&nbsp;&nbsp;&nbsp;{{ff}}&nbsp;&nbsp;{{gg}}</p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    var vm =new Vue({
        el: "#app",//注意是逗号
        data: {
          aa:'',

        }
    })
    var vb =new Vue({
        el: "#app1",//注意是逗号
        data: {

            bb: '',
        }
    })
    var vc =new Vue({
        el: "#app2",//注意是逗号
        data: {

            cc: '',
        }
    })
    var vd =new Vue({
        el: "#app3",//注意是逗号
        data: {

            dd:'',
        }
    })
    var ve =new Vue({
        el: "#app4",//注意是逗号
        data: {
            ff:'',
            ee:'',
            gg:'',
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3KzXCYix-1642321613535)(C:\Users\hedada\AppData\Roaming\Typora\typora-user-images\image-20220107181947305.png)]

在表单中使用双向数据绑定
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意: v-model 会忽略所有表单元素的value、checked、 selected 特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

3.Vue组件

3.1什么是组件及作用

组件是可复用的 Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:

1、组件是可复用的实例，一个网页中某一个部分需要在多场景中使用，可以抽成一个组件进行复用，提高代码复用性
2、组件化开发能大幅度的提高应用开效率、测试性、复用性，
3、组件使用的分类有： 页面组件、通用组件，业务组件一般是登录的组件具有很强的业务性，通用组件： 按钮、表单、输入框。
4、vue组件的特点：vue的组件是基于配置的，框架会自动生成构造函数，它基于vue commpent 这个类扩展自vue,在扩展过程中会继承已经有的选项，
5、vue中常见组件化的技术有： 属性prop、自定义事件、插槽等，主要用于组件通讯、扩展等。
6、合理划分组件，有助于提升应用性能，对数据频繁更新的内容单独创建一个组件。
7、开发过程中组件应该是高内聚、低耦合，组件的本质就是独立和可复用代码组织单元，低耦合：复用、测试、维护不与其他组件存在过多的耦合关系，与外部依赖小，高内聚：一个模块内各个元素彼此结合的紧密程度高，实质一个软件模块是由相关性很强的代码组成, 只负责一项任务, 也就是常说的单一责任原则。
8、遵循单项数据流的原则。

3.2定义组件和template的三种写法

<div id="app" >
    <template id="aa">
        <li>我是模板2</li>
    </template>
 <luoyue ></luoyue>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="x-template" id="cc">
<li>我是模板3</li>
</script>
<script type="text/javascript ">
<!--    定义组件-->
    Vue.component("luoyue",{
        template:'<li>我是模板1</li>'
        })
    var app = new Vue({
        el: '#app',
        data: {
            message: "撒回归",}})
</script>

3.3组建的使用

<div id="app" >
<!--    遍历得到items数组 ，在使用bind进行绑定   中间商-->
<!--    先遍历后在绑定-->
 <luoyue v-for="item in items" v-bind:luo="item"></luoyue>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


<script type="text/javascript ">
<!--    定义组件  第一个是组件名 然后是参数  然后在是模板-->
    Vue.component("luoyue",{
        // props接受bind绑定的值  中间的值得用小写
        props: ['luo'],
        template:'<li>{{luo}}</li>'
        });
    var app = new Vue({
        el: '#app',
        data: {
        items:["java","css","html"
        ]
        }})
</script>

4. Axios

4.1 什么是Axios

Axios是一个开源的可以用在浏览器端和Nodes的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

  • 从浏览器中创建XMLHttpRequests· 从node.js 创建http请求
  • 支持Promise API [JS 一编作]·拦截请求和响应
  • 转换请求数据和响应数据·取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF (跨站请求伪造)

4.2 为什么要使用Axios

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

4.3 第一个Axios应用程序

咱们开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON 数据，数据内容如下:创建一个名为data.json 的文件并填入上面的内容，放在项目的根目录下。

<div id="app" >
    <div>{{info.name}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript ">
    var app = new Vue({
        el: '#app',
        //data: 属性   data()方法
        data(){
            return{
                //可以不写但是不能写错
                info:{
                    name: null,
                    url: null,
                    adress: {
                        street: null,
                        city: null,
                        country: null,
                    },

                }
            }
        },

        mounted(){//钩子函数   链式编程   箭头指向结果产生的事情
            axios.get('data.json').then(response=>(this.info=response.data));
        }

    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CoPiYZPG-1642321613536)(C:\Users\hedada\AppData\Roaming\Typora\typora-user-images\image-20220109175244176.png)]

会显示第一个name

4.3.1解决闪烁问题
<html>
<!--v-clock解决闪烁问题-->
<style>
    [v-clock]{
        display: none ;
    }
</style>
<head>
    <title>Title</title>
</head>
<body>
<div id="app" v-clock >
    <div>{{info.name}}</div>

5.计算属性

5.1 什么是计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就早一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性)，仅此而已;可以想象为缓存。

可以理解为：计算出的结果，保存到属性中，内存中运行，虚拟Dom

<div id="app" >
    <p>time1{{currtime1()}}</p>
    <p>time2{{ currtime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript ">
    var app = new Vue({
        el: '#app',
        data: {
        message:"落月落月w"
        },
        methods: {
            //方法
            currtime1: function(){
             return Date.now();//返回时间戳
            }
        },
        computed:{//计算属性  computed 和 methods方法名不能一样，一样只会调用methods方法
            currtime2: function(){
                this.message;//修改message就会返回新的
                return Date.now();
            }
        }
    })
</script>

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

6.插槽slot

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

换句话说在已写好的页面中选一个或多个 地方能实现动态的插拔

更关注于视图层

步骤：

  1. 定义模板组件模板里的插槽用
  2. 在定义要插入的组件，组件中要有接收值和模板
  3. div中自定义标签中插入slot="name"再将data中的值绑定到标签中
  4. 最后使用props接收
<div id="app" >
    <todo>
        <aa slot="aa" :title="title"></aa>
        <items slot="items" v-for="item in ditems" v-bind:item="item"></items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script type="text/javascript ">
    //定义模板组件模板里的插槽用<slot>
    //在定义要插入的组件，组件中要有接收值和模板
    //div中自定义标签中插入slot="name"再将data中的值绑定到标签中
    //最后使用props接收
Vue.component("todo",{
    //slot插槽
        template:'<div>\
            <slot name="aa"></slot>\
            <ul>\
            <slot name="items"></slot>\
            </ul>\
            </div>'
    });
    Vue.component("aa",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    Vue.component("items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    })
    var app = new Vue({
        el: '#app',
        data:{
            title: '列表',
            ditems:['落月施主','落月学java','落月学c']
        }
    })
</script>

7.自定义事件

通过以上代码不难发现，数据项在Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用thisemit(‘自定义事件名’，参数)，操作过程如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3mksmiPA-1642321613537)(C:\Users\hedada\AppData\Roaming\Typora\typora-user-images\image-20220110163043315.png)]

步骤：

1.再组件中创建一个删除按钮，再写一个方法绑定到按钮上。

2.再在Vue对象中写一个删除数组的方法。

3.在前端遍历下标index ,绑定index再自定义一个方法再绑定vue对象的方法。

4.最后在组件方法中使用this.$emit(‘removee’,index);绑定到前端，即可。

<div id="app" >
    <todo>
        <aa slot="aa" :title="title"></aa>
<!-- 自定义事件绑定@加事件名=vue中的事件       -->
        <items slot="items" v-for="(item,index) in ditems" v-bind:item="item" :index="index" @removee="remove1(index)" ></items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script type="text/javascript ">
    //定义模板组件模板里的插槽用<slot>
    //在定义要插入的组件，组件中要有接收值和模板
    //div中自定义标签中插入slot="name"再将data中的值绑定到标签中
    //最后使用props接收
Vue.component("todo",{
    //slot插槽
        template:'<div>\
            <slot name="aa"></slot>\
            <ul>\
            <slot name="items"></slot>\
            </ul>\
            </div>'
    });
    Vue.component("aa",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    Vue.component("items",{
        props: ['item','index'],
        //只能使用组件中的方法
        template: '<li>{{index}}------{{item}} <button @click="remove">删除</button></li>',
        methods:{
            remove:function (index) {
                //自定义事件
                this.$emit('removee',index);
            }
        }
    })
    var app = new Vue({
        el: '#app',
        data:{
            title: '列表',
            ditems:['落月施主','落月学java','落月学c']
        },
        methods:{
            remove1:function (index) {
                console.log(this.ditems[index]+"已删除 ")
             this.ditems.splice(index,1,"shasha");//一次删除一个元素
                //删一个添加一个等于修改
            }
        }
    })

8. 小结

Vue 入门小结
核心:数据驱动，组件化
优点∶借鉴了AngulaJS的模块化开发和React 的虚拟Dom，虚拟Dom就是把Dom操作放到内存中执行;
常用的属性:

  • v-if
  • v-else-if
  • v-for
  • v-on绑定事件，简写@
  • v-model数据双向绑定
  • v-bind 给组件绑定参数,简写 :

组件化:

  • 组合组件slot插槽

  • 组件内部绑定事件需要使用到this.$emit(“事件名”,参数);

  • 计算属性的特色,缓存计算数据

    遵循SoC关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios框架做异步通信;

9. 第一个vue-cli项目

9.1 什么是vue-cli

vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义好的目录结构及基础代码，就好比咱们在创建Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;
主要的功能:

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

10.webpack

10.2 是什么

​ 本质上, webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个**依赖关系图(**dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
​ Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、Css、JSON、CoffeeScript、LESS等;伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用 HTML5、CSS3、ES6等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
​ 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

10.1 安装Webpack

WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS,图片等都作为模块来处理和使用。
伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。

简单来说就是将ES6都打包成ES5

安装:

npm install webpack -g
npm instal1 webpack-cli -g

测试安装成功:

webpack -v
webpack- cli -V

10.2 配置

创建webpack.config.js配置文件

  • entry:入口文件，指定WebPack用哪个文件作为项目的入口
  • output:输出，指定WebPack 把处理完成的文件放置到指定路径. module:模块，用于处理各种类型的文件
  • plugins:插件，如:热更新、代码重用等. resolve:设置路径指向
  • watch:监听，用于设置文件改动后直接打包

10.3 使用webpack

  1. 创建项目

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cc2uJQIw-1642321613538)(C:\Users\hedada\AppData\Roaming\Typora\typora-user-images\image-20220112150554338.png)]

  3. 在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

    //暴露一个方法:sayhi()
exports.sayhi=function () {
    document.write("<h1>luoyue</h1>");
};
exports.sayhi1=function () {
    document.write("<h1>luoyue1</h1>");
};
exports.sayhi2=function () {
    document.write("<h1>luoyue2</h1>");
};

    4.在modules下创建一个名为main.js的入口文件，用于打包时设置entry 属性

    //require 导入一个模块,就可以调用这个模块中的方法了
var hello = require( " ./ hello" ) ;
hello.sayhi();

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

    module.exports={
    entry:'./modules/main.js',
    output:{
        filename:'./js/bundle.js'
    }
}

    6.最后创建index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./dist/js/bundle.js"></script>
</body>
</html>

11 vue-router路由

11.1 说明

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置·路由参数、查询、通配符
  • 基于Vue.js过渡系统的视图过渡效果·细粒度的导航控制
  • 带有自动激活的Css class的链接
  • HTML5历史模式或hash模式，在IE9中自动降级·自定义的滚动条行为

11.2 安装

基于第一个vue-cli进行测试学习;先查看node_modules中是否存在vue-router
vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save- dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能:

import vue from 'vue '
import VueRouter from 'vue-router '
Vue.use(vueRouter);

11.3 测试

1、先删除没有用的东西
2、components目录下存放我们自己编写的组件

3、定义一个Content.vue的组件

<template>
<h1>已跳转到内容业</h1>
</template>

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

<style scoped>

</style>

4、安装路由,在src目录下,新建一个文件夹:router，专门存放路由

导入一系列包

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
import xin from '../components/xin'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
  routes:[
    {
     //路由路径
     path:'/content',
      //跳转的组件
      component:Content,
    },
    {
      //路由路径
      path:'/main',
      //跳转的组件
      component:Main,
    },
    {
      //路由路径
      path:'/xin',
      //跳转的组件
      component:xin,
    }
  ]
})

5、在main.js 中配置路由

import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描路由配置
Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.use(router);
new Vue({
  //使用路由配置
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

6、在App.vue中使用路由

<template>
  <div id="app">

    <h1>落月2</h1>
    <router-link to="/Content">内容页</router-link>
    <router-link to="/Main">首页</router-link>
    <router-link to="/xin">新页</router-link>
    <router-view></router-view>
  </div>
</template>

12. vue+elementui

12.1 创建工程

注意:命令行都要使用管理员模式运行

  1. 创建一个名为hello-vue的工程

    vue init webpack hello-vue

  2. 安装依赖，我们需要安装vue-router、element-ui、sass-loader和 node-sass四个插件

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

    安装有问题参考我的另一篇文章

3、Npm命令解释:

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

4.main.js的代码

import Vue from 'vue'
import App from './App'
import router from './routers'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.config.productionTip = false
Vue.use(router);
Vue.use(ElementUI);
new Vue({
  el: '#app',
   router,
  render: h => h(App)
})

5.index.js路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'



Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

13. 路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地,
URL中各段动态路径也按某种结构对应嵌套的各层组件，例如:
1、用户信息组件，在 views/user目录下创建一个名为Profile.vue的视图组件

2.创建两个vue项目

3.在路由配置 中在main页面下配置两个项目的路由

4.在main中配置.即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gNKKCt5j-1642321613539)(C:\Users\hedada\Pictures\Camera Roll\11.png)]

主页面

<el-menu-item index="1-1">
 <router-link :to="{ name: 'UserProfile',params: {id:2}}">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
 <router-link to="/user/list">用户列表</router-link>
</el-menu-item>
 <el-menu-item index="1-3">
   <router-link to="/main">回到首页</router-link>
 </el-menu-item>

路由配置

routes: [
  {
    path: '/main',
    component: Main,
    children: [

      {
        path:'/user/profile/:id',
        props:true,
        name:'UserProfile',
        component: UserProfile
    },
      {
        path:'/user/list',
        component: UserList
      },
    ]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path:'/gohome',
    redirect:'/main'
  }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hepqTu4m-1642321613539)(C:\Users\hedada\Pictures\Camera Roll\12.png)]

14. 参数传递及重定向

14.1 如何传递参数呢？

14.1.1 第一种方法

步骤：

  1. 创建两个vue项目

  2. 在路由配置 中在main页面下配置两个项目的路由

  3. 在main中配置.即可

  4. 要想是它显示对应的信息，必须要设置参数传递参数在中

    :to="{ name: 'UserProfile',params: {id:2}}"

  5. 在路由配置中 profile中 加入id 编写那么name 用来实现绑定path:’/user/profile/:id’,

  6. 在profile中加入{{$route.params.id}}

14.1.2 第二种方法

步骤：

  1. 创建两个vue项目

  2. 在路由配置 中在main页面下配置两个项目的路由

  3. 在main中配置.即可

  4. 要想是它显示对应的信息，必须要设置参数传递参数在中

    :to="{ name: 'UserProfile',params: {id:2}}"

  5. 在路由配置中加入 props:true,

  6. profile中加入 props:[‘id’],

主页面

<el-menu-item index="1-1">
 <router-link :to="{ name: 'UserProfile',params: {id:2}}">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
 <router-link to="/user/list">用户列表</router-link>
</el-menu-item>
 <el-menu-item index="1-3">
   <router-link to="/main">回到首页</router-link>
 </el-menu-item>

profile页面

<template>
//注意接受的数据要放在<div>里
  <div>
    <h1>文件</h1>
      //{{$route.params.id}} 方法一
    {{id}}
  </div>

</template>

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

<style scoped>

</style>


 routes: [
  {
    path: '/main',
    component: Main,
    children: [
 {
    path:'/user/profile/:id',
    props:true,
    name:'UserProfile',
    component: UserProfile
},
  {
    path:'/user/list',
    component: UserList
  },
]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path:'/gohome',
    redirect:'/main'
  }

14.2 重定向

在路由配置中加入

path:'/gohome',
    redirect:'/main'

在到想要的地方

15. 路由模式与404

路由模式有两种
hash:路径带#符号，如http://localhost/ # /login.

history:路径不带#符号，如http://localhost/login修改路由配置，代码如下:

export default new Router( {
mode : 'history',
routes: [
});

处理404创建一个名为 NotFound.vue的视图组件，代码如下:

<template>
<div>
页面不存在,请重试!</div>
</template>

路由中配置

{
path:'*',
component:NotFound
}

em>


profile页面

```vue
<template>
//注意接受的数据要放在<div>里
  <div>
    <h1>文件</h1>
      //{{$route.params.id}} 方法一
    {{id}}
  </div>

</template>

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

<style scoped>

</style>


 routes: [
  {
    path: '/main',
    component: Main,
    children: [
 {
    path:'/user/profile/:id',
    props:true,
    name:'UserProfile',
    component: UserProfile
},
  {
    path:'/user/list',
    component: UserList
  },
]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path:'/gohome',
    redirect:'/main'
  }

14.2 重定向

在路由配置中加入

path:'/gohome',
    redirect:'/main'

在到想要的地方

15. 路由模式与404

路由模式有两种
hash:路径带#符号，如http://localhost/ # /login.

history:路径不带#符号，如http://localhost/login修改路由配置，代码如下:

export default new Router( {
mode : 'history',
routes: [
});

处理404创建一个名为 NotFound.vue的视图组件，代码如下:

<template>
<div>
页面不存在,请重试!</div>
</template>

路由中配置

{
path:'*',
component:NotFound
}
落月爱学习
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5,CSS,JS前端常见知识面试题
珎珎啊
07-29 1241
前端常见面试题，前端知识总结，html,css,js,DOM
signature=b3273143816eec685d6dfc4dab8b0839,dweb-mirror/yarn.lock at a89f9e675997b84da93a0d2e7cbcdfb1...
热门推荐
weixin_28681719的博客
05-29 9万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":version "7.8.3"resolved "https://registry.yarnpkg.com/@babel/co...
你真的认识View吗？
陈宇明
12-11 157
作者：luoqiang108博客：https://www.jianshu.com/p/5c667efb62fa作为一个Android开发者，工作中肯定或多或少会跟自定义View打交道，很...
el-submenu嵌套使用时 隐藏后submenu闪动再消失
pengpm的博客
11-11 684
【代码】el-submenu嵌套使用时 隐藏后submenu闪动再消失。 多个el-submenu嵌套使用时，:hide-timeout属性不能设置相等的值，不然内部的el-submenu未消失之前外部的就消失了，会出现内部el-submenu闪动的情况
解决element-ui框架下导航菜单el-menu 刷新后菜单高亮问题
Jayne_z的博客
02-28 1万+
element-ui + vue.js项目中，页面刷新后侧边导航失去高亮。 element-ui框架el-menu 组件提供一个默认高亮的属性:default-active=“”，页面刷新后可以获取页面的url ,进行处理，获得el-menu-item里面的index,然后赋值给default-active，这样就可以解决页面刷新后element-ui菜单组件高亮问题。具体实现可以看下面代码 ...
vue学习
02-18
vue学习
Vue学习笔记
04-29
最火的前端框架VUE学习中所记录的所有笔记，其中包括了一些案例，如果亲自动手，按照笔记完整的走一遍代码，VUE也就学的差不多了，简单的开发是不成问题的。
vue学习资源
07-29
vue 比较好的教学资源，供参考
Vue学习手册
02-26
前端超热门的框架Vue，学习笔记，具体内容来自Vue官方文档
vue学习笔记
11-22
vue学习笔记，刚开始学习vue，接触了一些基础，整理一下。
vue学习基础以及大纲
07-19
vue学习大纲
Vue学习20210314.pdf
08-27
Vue学习总结
VUE学习笔记
07-17
VUE学习笔记
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
适合想要学习Vue.js前端框架的新人、复习资料，里面资料都是个人从0开始学习所总结的笔记（希望能帮到更多人）
Vue中使用el-menu，点击二级菜单时一级图标保持高亮
Oamnij的博客
09-24 8043
Vue中使用el-menu，点击二级菜单时一级图标保持高亮一、案例二、使用步骤1.引入库2.使用el-menu总结 前言 自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。 一、案例 话不多说，先直接上图 二、使用步骤 1.引入库 在main.js中引入ElementUI组件，代码如下（示例）： impor
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
weixin_48210599的博客
09-16 964
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C:\Users\22725\Desktop\对对对.gif)] 问题描述 如图所示 解决的方法也是自己在网上误打误撞找到了 首先是 给el-menu定义一个class样式 <el-aside width="initial" class="home_aside"> <el-menu
vue基础语法-术语，实例选项，系统指令，过滤器
weixin_45176415的博客
02-23 1387
基础-vue 的特点和能做什么 **目标**了解Vue能做什么以及Vue的特点 数据驱动视图 可以让我们只关注数据,完全**解耦数据和视图** MVVM 双向绑定 通过**指令**增强了html功能 新特性 组件化 复用代码 开发者一般只需要关注数据 适应当前**SPA**的项目开发 single page application 传统网站开发 一般来说 需求不大...
Vue
小陈学java
07-23 1955
前端体系，前后端分离 1、概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。 2、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中“我大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我.
尚硅谷vue学习笔记
最新发布
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值