Vue快速入门

最新推荐文章于 2024-08-10 07:13:39 发布
最新推荐文章于 2024-08-10 07:13:39 发布
阅读量250 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44532692/article/details/105164442
版权

Vue.js入门

Vue.js 是什么

​ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

Vue.js安装（最新版本2.6.11）

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

安装教程：https://cn.vuejs.org/v2/guide/installation.html

使用Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


本地引入本地地址即可

尝试使用Vuejs


<div id="app">
    {{ message }}
</div>
<hr>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<hr>
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<hr>
<div id="app-4">
    <ul>
        <li v-for="item in list1">{{item}}</li><!--相当于遍历-->
    </ul>

</div>
<hr>
<!--//示例计数器-->
<div id="app-5">
    <p>当前计数：{{count}}</p>
<!--    <button v-on:click="count++">+</button>-->
<!--    <button v-on:click="count&#45;&#45;">-</button>-->
        <button @click="Increment">+</button><!--@:是v-on 的语法糖-->
        <button @click="Less">-</button>
</div>
<script>


    var app = new Vue({
        el: '#app',//选中的位置
        data: {
            message: 'Hello Vue!'//给message赋值
        }
    })
    //绑定元素 attribute
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
    //显示和隐藏
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true//true：显示  false： 隐藏
        }
    })
    //vue展示列表
    const app4=new Vue({
        el: '#app-4',
        data:{
            list1:["l1","l2","l3","l4"]
        }
    });
    app4.$data.list1.push("l5");//在data前面加一个$用来分辨其他的data
    //示例计数器
    const app5=new Vue({
        el:"#app-5",
        data:{
            count:1
        },
        methods:{//定义方法的
            //加
           Increment:function () {
               this.count++;
           },
            //减
            Less:function () {
                this.count--;
            }
        }
    });
</script>

Vue中的mvvm

MVVM（Model–view–viewmodel）是一种软件架构模式。

MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，[1] 这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。[1] 视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

MVVM是马丁·福勒的PM（Presentation Model）设计模式的变体。[2][3] MVVM以相同的方式抽象出视图的状态和行为，[3] 但PM以不依赖于特定用户界面平台的方式抽象出视图（建立了视图模型）。
MVVM和PM都来自MVC模式。

MVVM由微软架构师Ken Cooper和Ted Peters开发，通过利用WPF（微软.NET图形系统）和Silverlight（WPF的互联网应用衍生品）的特性来简化用户界面的事件驅動程式設計。[3] 微软的WPF和Silverlight架构师之一John Gossman于2005年在他的博客上发表了MVVM。

MVVM也被称为model-view-binder，特别是在不涉及.NET平台的实现中。ZK（Java写的一个Web应用框架）和KnockoutJS（一个JavaScript库）使用model-view-binder。[3][4][5]

以上是维基百科里的解释

下面我们来看看vue中mvvm

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0XrhZ7QM-1585386621552)(F:\学习资料\笔记\1127286-20190723104840960-523296026.png)]

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

在这里插入图片描述

创建Vue实例传入的options

el：决定之后Vue实例会管理哪一个DOM

  • 类型：string | Element
  • 限制：只在用 new 创建实例时生效。
data：Vue实例对应的数据对象
  • 类型：Object | Function（组件当中data必须是一个函数）
  • 限制：组件的定义只接受 function。

methods：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

  • 类型：{ [key: string]: Function }

详细：https://cn.vuejs.org/v2/api/index.html

Vue的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NkzG6uqE-1585386621554)(https://blog.kuangstudy.com/usr/uploads/2019/10/1579484219.jpg)]

基本语法

插值操作

Mustache语法（双大括号语法）

v-once指令的使用

  • 该指令后面不需要跟任何表达式（比如之前的v-for后面是跟表达式的）。
  • 该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变。
<div id="app">
  <p v-once>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'app',
    data:{
      message:'hello vue'
    }
  });
</script>

v-html

  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并且进行渲染
<div id="app1">
  <div v-html="url"></div>
</div>
<script src="js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app1',
    data:{
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  });
</script>

v-text

  • 作用和Mustache比较相似：都是用于数据显示在界面中
  • 它通常情况下，接受一个string类型
  • 它会替换标签内的所有内容，不解析特殊字符
<div id="app">
  <p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    }
  });
</script>

v-pre

  • 用于跳过这个元素和它子元素编译过程，用于显示原本的Mustache语法
<div id="app">
  <p >{{message}}</p>
  <p v-pre>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    }
  });
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j7hNP2Bt-1585386621554)(F:\学习资料\笔记\image-20200311150347012.png)]效果

v-cloak

  • 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <p >{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
<!--  当app实例对#app进行管理后cloak会vein删掉-->
  setTimeout(()=>{
      var app=new Vue({
          el:'#app',
          data:{
              message:'hello vue'
          }
      });
  },1000);

</script>

绑定属性

v-bind

  • v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）
<div id="app">
<!--  错误示范：
      <img src="{{imgUrl}}">在vue中不会识别这个会把当做普通的字符串
      -->
<img v-bind:src="imgUrl">
<!--简写-->
<img :src="imgUrl">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1307955174,105946806&fm=26&gp=0.jpg'
    }
  });
</script>
动态绑定class（对象语法）
  <style>
    .ative{
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
<!--  在有时候我们需要固定的class我们就可直接写 原本class  这两个是可以同时存在的-->
<p class="title" :class="{ative:isAtive,ative1:isAtive2}">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
        isAtive:true,
        isAtive2: false
    }
  });
</script>

如果过于复杂的可以用methods来返回

<p class="title" :class="getClass()">{{message}}</p>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue',
            isAtive: true,
            isAtive2: false
        },
        methods: {
            getClass: function () {
                return {ative: this.isAtive, ative1: this.isAtive2}
            }
        }
    });
</script>
动态绑定class（数组语法）
<div id="app">
  <p class="title" :class="[a,b]">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue',
            a: 'ative',
            b: 'ativeq'
        }
    });
</script>
动态绑定style（对象语法）
<div id="app">
<!--  <p :style="{属性名:属性值}">{{message}}</p>-->
  <p :style="{color:fontColor}">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      fontColor:'red'
    }
  });
</script>
动态绑定style（数组语法）
<div id="app">
<!--  <p :style="[]">{{message}}</p>-->
  <p :style="[style1,style2]">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      style1:{color:'red'},
        style2:{fontSize:'24px'},
    }
  });
</script>

计算属性

基本使用

<div id="app">
{{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      firstName:"谢",
      lastName :"超" ,
    },
      //计算属性
      computed:{
        fullName:function () {
            return this.firstName+this.lastName;
        }
      }
  });
</script>

计算属性的复杂操作

<div id="app">
  <p>书的总价位：{{totalPrice}}</p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      books:[
          {name:"java",price:123},
          {name:"c",price:12},
          {name:"c#",price:1323},
          {name:"hph",price:123},
          ]
    },
    computed:{
        totalPrice:function () {
            let total=0;
            for (let i=0;i<this.books.length;i++ ){
                total+=this.books[i].price;
            }
            return total;
        }
    }
  });
</script>

计算属性的getter和setter

  • 每个计算属性都包含有getter和setter
<div id="app">
  {{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            firstName:"谢",
            lastName :"超" ,
        },
        //计算属性
        computed:{
            // fullName:function () {
            //     return this.firstName+this.lastName;
            // }
            fullName: {//一般情况下计算属性只有get方法没有set方法所以可以简写成上面哪种方式
                set:function(){

                },
                get:function () {
                    return this.firstName + this.lastName;
                }
            }
        }
    });
</script>

计算属性和methods的对比

案列：

<div id="app">
  计算属性：{{fullName}}
  methods：{{fullName1}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            firstName:"张",
            lastName :"三" ,
        },
        //计算属性
        computed:{
            fullName:function () {
                return this.firstName+this.lastName;
            }
        },
        methods:{
            fullName1:function () {
                return this.firstName+this.lastName;
            }
        }
    });
</script>

注：我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 firstName和 lastName还没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

由此案列可以得出：使用计算属性比method性能要高，要多使用计算属性

块级作用域let/var的区别

  • 声明次数（同一变量）
    var 可以声明多次
    let 只可声明一次

    //var 
var a=1;
var a=2;
console.log(a); // 2
//let
let b=1;
let b=2;//直接报错

  • 作用域
    var 是函数级作用域，let是块级作用域

    • ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

  • 变量提升问题

    //var
console.log(a);
var a=0;
//结果a= undefined
//let 暂时性死区(let块级作用域下，在变量声明之前的区域内不可使用该变量。)
console.log(b);//Uncaught ReferenceError: Cannot access 'b' before initialization(不可再变量声明前使用)
let b = 2;

  • 典型事例

    var a = 0;
function test() {
  console.log(a);
  var a = 2;
}
test(); // undefined  包含var是函数作用域 + 变量提升问题
console.log(a);// 0 访问到的变量全局作用域下的a变量，test函数中声明的变量只作用域是当前函数内。
// for 循环应用实例
  // var
for(var i=0;i<5;i++){
  setTimeout(function(){
    console.log("var：" + i);
   })
}
   // let
for(let i=0;i<5;i++){
   setTimeout(function(){
        console.log("let" + i);
   })
}

双向绑定

v-model

<div id="app">
<input v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    }
  });
</script>

组件

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

  • Vue.component()：注册组件
  • my-component-li：自定义组件的名字
  • template：组件的模板

组件示例


<div id="vue">   
    <ul>       
     <my-component-li>
    </my-component-li>     
 </ul>
</div>
<script type="text/javascript">     
    // 先注册组件    
    Vue.component('my-component-li', {         t
                                      emplate: '<li>Hello li</li>'    
                                     });    
    // 再实例化 Vue     var vm = new Vue({         el: '#vue'     });
</script>

用prop传值

<script type="text/javascript">
    // 先注册组件
    Vue.component('my-component-li', {
        props: ['item'],
        template: '<li>Hello {{item}}</li>'
    });

    // 再实例化 Vue
    var vm = new Vue({
        el: '#vue',
        data: {
            items: ["张三", "李四", "王五"]
        }
    });
</script>

<div id="vue">
    <ul>
        <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
    </ul>
</div>

Axios网络通信

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

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

下面展示一个示例

  1. ​ 引入axios.min.js

  2. 写message.json

{
  "name": "hzx",
  "age": 17,
  "job": "student"
}

3.编写html

<div id="app" v-cloak>
  <p>姓名:{{user.name}}</p>
  <p>年龄：{{user.age}}</p>
  <p>工作：{{user.job}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    },
      data(){//使用data方法不是data属性
        return{
            user:{
                name :null,
                age : null,
                job :null,

            }
        }

      },
      mounted(){//钩子函数
          axios.get("message.json").then(response => (this.user = response.data));
      }

  });
</script>

slot标签

<div id="app">
  <User>
    <Usertitle slot="Usertitle" :title="title"></Usertitle>
    <Username slot="Username" v-for="username in usernames" :name="username"></Username>
  </User>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  Vue.component("User",{
        template:'<div>\
            <slot name="Usertitle"></slot>\
            <ul>\
            <slot name="Username"></slot>\
            </ul>\
            </div>'

      });
  Vue.component("Usertitle",{
      props:['title'],
      template: '<p>{{title}}</p>'
  });
 Vue.component("Username",{
      props: ['name'],
      template: '<li>{{name}}</li>'
  });
  var app=new Vue({
    el:'#app',
    data:{
        title:"用户名单",
        usernames:["小明","小强","小鱼"],
    }
  });
</script>

自定义事件

使用 this.$emit(‘自定义事件名’, 参数)

<div id="app">
  <User>
    <Usertitle slot="Usertitle" :title="title"></Usertitle>
    <Username slot="Username" v-for="(username,index) in usernames" :name="username" :index="index" @remove="removeName(index)" :key="index"></Username>
  </User>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  Vue.component("User",{
        template:'<div>\
            <slot name="Usertitle"></slot>\
            <ul>\
            <slot name="Username"></slot>\
            </ul>\
            </div>'

      });
  Vue.component("Usertitle",{
      props:['title'],
      template: '<p>{{title}}</p>'
  });
 Vue.component("Username",{
      props: ['name',"index"],
      template: '<li>{{name}},<button @click="remove(index)">删除</button></li>'
     ,methods: {
          remove:function (index) {
              // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
              this.$emit("remove");
          }
     }
  });
  var app=new Vue({
    el:'#app',
    data:{
        title:"用户名单",
        usernames:["小明","小强","小鱼"],
    },
      methods:{
        removeName:function (index){
            this.usernames.splice(index,1);
        }
      }
  });
</script>

Node.js

安装

下载地址：http://nodejs.cn/download/

安装步骤无脑下一步就好了

确认nodejs安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!
安装 Node.js 淘宝镜像加速器（cnpm）
# -g 就是全局安装
npm install cnpm -g

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

创建一个vue项目

vue init webpack hello-vue

vue-cli

安装：

cnpm install vue-cli -g  #2.0版本
vue list   //检测是否安装成功
cnpm install @vue-cli -g # 3.0版本
@vue -V //检测是否安装成功

创建一个vue项目

vue create  项目名；
vue init webpack 项目名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MRoKqt75-1585386621555)(F:\学习资料\笔记\image-20200317085240763.png)]

vue-router路由

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

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DPI7oPVj-1585386621556)(F:\学习资料\笔记\image-20200317085337475.png)]

安装

npm install vue-router --save-dev

简单router（路由）示例：

在components目录下创建一个vue文件名为app

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
      <!--可用tag属性来指定<router-link>渲染成什么样子-->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

在src目录下创建router目录，在这个目录下创建一个index.js

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// path:访问路由的路径
//name :路由的名字可以，通过这个来访问这个路由
//component:所引用的组件
export default new Router({
     routes: [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
})

在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,
  render: h => h(App)
})

下面我们来看个动态路由示例（也就是路径中带参数）：

动态路由

export default new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

嵌套路由

/user/foo/profile              		       /user/foo/posts
+------------------+                 	      +-----------------+
| User                    |               		   | User                 |
| +--------------+ |              		    | +-------------+ |
| |    Profile  	 | |  +------------>  | |  	Posts          | |
| |                          | |                	  | |             		| |
| +--------------+ |                	  	| +-------------+ |
+------------------+          		     +-----------------+

通过 children来实现嵌套路由

export default new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

配置404

为了避免404这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }//`*`它会匹配不能被其他路由匹配的路径
  ]
})

重定向和路由别名

重定向
routes: [
     { path: '/index', component:index }
    { path: '/toindex', redirect: '/index' }//重定向到`/index`
  ]
  
  //redirect也可以设置路由的name
  routes: [
     { path: '/index',name:'index' component:index }
    { path: '/toindex', redirect: {name:'index'} }//重定向到`/index`
  ]
别名

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

/index的别名是 /a，意味着，当用户访问 /a 时，URL 会保持为 /a，但是路由匹配则为 /index，就像用户访问 /index 一样。

routes: [
    { path: '/index', component: A, alias: '/a' }
  ]

语法糖集

v-on ===> @
v-bind ===> :

ue-router` 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

配置404

为了避免404这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }//`*`它会匹配不能被其他路由匹配的路径
  ]
})

重定向和路由别名

重定向
routes: [
     { path: '/index', component:index }
    { path: '/toindex', redirect: '/index' }//重定向到`/index`
  ]
  
  //redirect也可以设置路由的name
  routes: [
     { path: '/index',name:'index' component:index }
    { path: '/toindex', redirect: {name:'index'} }//重定向到`/index`
  ]
别名

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

/index的别名是 /a，意味着，当用户访问 /a 时，URL 会保持为 /a，但是路由匹配则为 /index，就像用户访问 /index 一样。

routes: [
    { path: '/index', component: A, alias: '/a' }
  ]

语法糖集

v-on ===> @
v-bind ===> :
Heri.MG
关注
专栏目录
vue快速入门
BeiLingI的博客
09-25 380
vue快速入门 一、第一个vue小程序 var app = new Vue({ el:"#app", data:{ message: "hello!", people: { name: "ch", age: 14 }, arr:["都江堰校区","雅安校区","成都校区"] } }) 事件渲染的基本格式 二、vue指令 v-text 设置标签文本值 <div v-text="message"></div> message中的内容会将标签中的
Vue2步骤条（Steps）
Mr Dear的博客
08-04 1万+
步骤总数和初始选择步骤 均可自定义设置，每个步骤title和description也均可自定义设置传入
vue.js 步骤条_Vue.js的简单步骤指示器
cuk5340的博客
07-23 545
vue.js 步骤条 步态指示符 (vue-step-indicator) A Simple step indicator for Vue.js. Vue.js的简单步骤指示器。 View demo 查看演示 Download Source 下载源 安装 (Install) yarn add vue-step-indicator CDN: UNPKG | jsDelivr(avail...
cnpm 项目使用教程
最新发布
gitblog_00065的博客
08-10 322
cnpm 项目使用教程 cnpmcnpm: npm client for China mirror of npm项目地址:https://gitcode.com/gh_mirrors/cn/cnpm 项目介绍 cnpm 是一个针对中国用户的 npm 客户端，它使用 npm 的中国镜像源，可以显著提高 npm 包的下载速度。该项目旨在为中国的开发者提供一个快速、稳定的 npm 包管理工具。 项目快...
Vue3步骤条（Steps）
Mr Dear的博客
04-06 6871
引导用户按照流程完成任务的导航步骤条，支持：两种标签放置位置；迷你版步骤条；垂直版步骤条；点状步骤条；并且可点击；总之，功能丰富，简单易用😁😁
Vue实现el-step（进度步骤）功能注意事项：
java开发者专栏
07-26 2634
a-steptitle="检验完成"/>上下状态不一致情况；
cnpm常用命令
代码大麦
10-09 3705
1、设置npm 镜像地址为淘宝地址 npm config set registry https://registry.npm.taobao.org npm config set registryhttps://registry.npmjs.org 2、查看设置镜像地址 npm config get registry
Vue快速入门使用示例附录
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
VUE快速入门
qq_48556559的博客
07-25 438
vue快速入门随手笔记
vue快速入门package.rar
04-06
这个"vue快速入门package"压缩包文件包含了多个基于Vue.js的小项目，可以帮助初学者快速理解和掌握Vue的核心概念与基本用法。 1. **计数器**：这是一个基础的Vue应用示例，展示了如何使用Vue的数据绑定和计算属性来...
Vue快速入门（从入门到实战）
m0_70274530的博客
04-29 892
[](()1、插值表达式 [](()（1）花括号 格式： {{表达式}} 说明; 该表达式支持JS语法，可以调用js内置函数（必须有返回值) 表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，如: var a = 1+1; 可以直接获取Vue实例中定义的数据或函数 示例 HTML： i{name ) ) JS: var app =new vue({ el:“#app”, data:{ name:“Jack”" } }) [](()2、差值闪烁 使用0方式在网速较慢时会出现问题。在
antd+vue的steps组件在步骤条中添加自定义样式内容（下）
qq_43437571的博客
09-23 1万+
如果antd中steps组件中提供的图标不能满足我们的要求，需要使用自定义的图片来实现，比如实现如下示例： 实现代码如下： <template> <a-row :gutter="24"> <a-col :md="24"> <a-card title="步骤条"> <a-switch checked-children="横向" un-checked-children="纵向"
npm 安装中的 i、-g、--save、--save-dev、-D、-S的区别
绿水青山的博客
07-23 8622
npm 安装中的 i、-g、--save、--save-dev、-D、-S的区别说明dependencies 与 devDependencies举例说明 说明 i 是 install 的简写 -g 是全局安装，不带 -g 会安装在个人文件夹 -S 与 --save 的简写，安装包信息会写入 dependencies 中 -D 与 --save-dev 的简写，安装包写入 devDependenc...
vue流程step组件
我是谁的博客
05-31 8808
效果图 <template> <div id="steps"> <div class="steps-item" v-for="(k,i) in stepArr" :key="k.id"> <div class="label">{{k.label}}</div> <div class="cont...
Vue第四篇之Vue.js中el-steps步骤的简单使用
热门推荐
小达哥的博客
05-10 4万+
html中： <div class="step"> <el-steps :active="orderStatus" > <el-step :title="item.title" :description="item.description" v-for="item in items"></el-step> </...
安装cnpm命令
qq_22938603的博客
04-19 6675
1、首先按下win+R组合键打开运行，输入cmd命令，打开命令行节面； 2、直接输入cnpm命令默认是报没有这个命令的，会出现报错的现象； C:\Users\18084\Desktop\fresh-market-master\fresh-market-master\生鲜超市\online-store>cnpm 'cnpm' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 3、接着输入node --version命令查看是否有nodejs，没有就下载安装； C:\Users\18084\Des
npm、cnpm、yarn管理工具常见指令Node与Vue安装环境配置及nvm常用指令详解
Programming is art
04-26 1335
npm：是Node.js下的资源包管理器，可以简单的理解为下载、更新、卸载等一系列操作的命令框工具。webpack：它主要用途是通过CommonJS的语法把所有客户端需要发布的静态资源做整合，例如图片视频、静态页面、css样式、font-icon等资源合并打包等操作。vue-cli：vue官方所提供快速生成一个Vue工程化的模版项目工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值