Vue基础知识总结(二)：进阶篇

已于 2022-03-30 10:38:20 修改
阅读量1.4k 收藏 6
点赞数 4
分类专栏： # Vue学习记录 文章标签： vue.js javascript html css router
于 2022-03-30 10:36:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41239465/article/details/123840148
版权

Vue基础知识总结(二)：进阶篇

1.0 MVVM模式

  • MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
  • MVVM模式将页面,分层了 M 、V、和VM ,解释为：
    • Model: 负责数据存储
    • View: 负责页面展示
    • View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
<body>
  <div id="app">
   <!-- View 视图部分 -->
   <h2>{{name}}</h2>
  </div>
 </body>
 <script src="./js/vue.min.js"></script>
 <script>
  //创建的vue实例,就是 VM ViewModel
  var VM = new Vue({
   el: "#app",
   //data就是MVVM模式中的 model
   data: {
    name: "hello",
  },
 });
 </script>

image-20220327201156937

  • 首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

    • 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
    • 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的
      DOM元素

  • MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定

1.1 v-mode指令

作用：获取和设置表单元素的值（实现双向数据绑定）

  • 双向数据绑定
    • 单向绑定：就是把Model绑定到View，当我们用javaScript代码更新时Model时，View就会自动更新。
    • 双向绑定：用户更新了View,Model的数据也自动被更新了，这种情况况就是双向绑定。
  • 什么情况下用户可以更新View呢？
    • 填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js" ></script>
</head>
<body>
    <!-- View 视图部分 -->
    <div id="app" >
        <input type="button" value="修改model的数据" @click="change" /><br>
        <!-- 单向绑定 -->
        <input type="text" V-bind:value="msg" /> <br>
        <label>单向绑定：</label>{{msg}}<br>
        <!-- 双向绑定 -->
        <input type="text" v-model="msg" /><br>
        <label>双向绑定：</label>{{msg}}
    </div>
</body>
<script>
    //创建的vue实例,就是 VM ViewModel
    var obj = new Vue({
        el: "#app",
         //data就是MVVM模式中的 model
        data: {
            msg: "天天好心情",
        },
        methods:{
            change:function(){
                this.msg = "我变了";
            },
        },
    });

</script>
</html>

效果展示：

image-20220327201953503

v-model指令总结

  • v-model 指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
  • 双向数据绑定

1.2 实现简单记事本

  1. 功能介绍

    image-20220328200318350

  2. 实现步骤

    1. 生成列表结构（v-for）数组
    2. 获取用户输入（v-model双向绑定）
    3. 回车，新增数据（@keyup.enter事件修饰符）

    实现源码：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
  </head>

  <body>
    <!-- VUE示例接管区域 -->
    <section id="app">

      <!-- 输入框 -->
      <header class="header">
        <h1>VUE记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="输入日程"
          class="new-todo"
          v-model:value="msg"
          @keyup.enter="add"
        />
      </header>

      <!-- 列表区域 -->
      <section class="main">
        <ul class="listview">
          <li class="todo" v-for="(item,index) in content">
            <div class="view">
              <span class="index">{{index + 1}}</span> <label>{{item}}</label>
              <button class="destroy" @click="del(index)"></button>
            </div>
          </li>
        </ul>
      </section>
       <!-- 统计和清空 -->
       <footer class="footer">
        <span class="todo-count"> <strong>{{content.length}}</strong> items left </span>
        <button class="clear-completed" @click="delAll">
          Clear
        </button>
      </footer>
    </section>
    
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var obj = new Vue({
        el: "#app",
        data:{
          content:["西游记","水浒传","红楼梦"],
          msg: "三体",
        },
        methods:{
          add:function(){
            //将用户输入的信息添加到列表里去
            this.content.push(this.msg);
          },
          // 删除方法
          del:function(index){
            // 使用splice(元素索引，删除几个)根据索引删除
            this.content.splice(index,1);
          },
          delAll:function(){
            this.content = [];
          }
        },
      });
    </script>
  </body>
</html>

  1. 删除内容

    点击删除指定内容（根据索引删除元素）

    删除方法：

    //删除方法
remove:function(index){
  console.log(index);
  //使用splice(元素索引,删除几个) 根据索引删除
  this.list.splice(index,1);
}

  2. 清空数据

    <button class="clear-completed" @click="clear()">Clear</button>

    //清空数组元素
clear:function(){
this.list=[];
}

1.3 Axios

1.3.1 Ajax回顾

Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。

1.3.2 什么是Ajxa?

Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。

1.3.3 Ajxa的作用

  • Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。
  • 简单记: Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验性, 进行网页的局部刷新.

1.3.4 异步与同步

  • 浏览器访问服务器的方式
    • 同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作
    • 异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作

image-20220328202744270

案例演示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
    <input type="text" />
  <input type="button" value="Jquery发送异步请求" onclick="run1()" />
</body>
<script src="./jquery-1.8.3.min.js"></script>
<script>
  function run1() {
    //JQuery Ajax方式 发送异步请求
    $.ajax({
      url: "/ajax",
      async:true,
      data: { name: "天青" },
      type: "post",
      dataType:"text",
      success: function (res) {
        console.log(res)
        alert("响应成功" + res);
     },
      error: function () {
        alert("响应失败!");
     }
   });
 }
</script>
</html>

servlet

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
    //1.获取请求数据
    String username = req.getParameter("name");
    //模拟业务操作,造成的延时效果
    try {
      Thread.sleep(5000);
   } catch (InterruptedException e) {
      e.printStackTrace();
   }
    //2.打印username
    System.out.println(username);
    resp.getWriter().write("hello hello");
 }
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
    doGet(req, resp);
 }
}
  • 如果是同步，那么页面在空白期会等待服务器响应才能操作
  • 异步的话，页面input能进行输入

1.3.5 axios介绍

VUE中结合网络数据进行应用的开发

  • 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
  • axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.

[^]: Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax

1.3.6 axios入门

使用步骤:

  1. 导包

    <!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  2. 请求方式

get

05

POST

axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})
  • 原生js
<body>
  <input type="button" value="get请求" id="get">
  <input type="button" value="post请求" id="post">
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  /*
   请求地址:https://autumnfish.cn/api/joke/list
   请求方法:get
   请求参数:num(笑话条数,数字)
   响应内容:随机笑话
 */
  document.getElementById("get").onclick=function(){
    axios.get("https://autumnfish.cn/api/joke/list?num=1")
   .then(function(response){
      //请求成功,调用
      console.log(response);
   },function(error){
      //请求失败,调用
      console.log(error)
   });
 }
  /*
   请求地址:https://autumnfish.cn/api/user/reg
   请求方法:post
   请求参数:username(用户名,字符串)
   响应内容:注册成功或失败
 */
  document.getElementById("post").onclick=function(){
    axios.post("https://autumnfish.cn/api/user/reg",{username:"张百万"})
   .then(function(response){
      console.log(response);
   },function(error){
      console.log(error);
   });
 }
</script>
  • axios小结

  1. axios 必须导包才能使用

  2. 使用get或者post方法,就可以发送请求

  3. then方法中的回调函数,会在请求成功或者请求失败的时候触发

  4. 通过回调函数的形参可以获取响应的内容,或者错误信息

vue+axios

<body>
  <div id="app">
    <input type="button" value="点击获取一个笑话" @click="getJoke">
    <p>{{joke}}</p>
  </div>
</body>
<!-- 引入vue + axios -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  /*
   请求地址:https://autumnfish.cn/api/joke
   请求方法:get
   请求参数:无
   响应内容:随机笑话
 */
  var VM = new Vue({
    el:"#app",
    data:{
      joke:"笑笑更健康"
   },
    methods: {
      getJoke:function(){
        console.log(this.joke);//笑笑更健康
        var that = this; //把this保存起来
        //异步访问
        axios.get("https://autumnfish.cn/api/joke").then(
          function(response){
            //获取data中的笑话
            console.log(response.data);
            //console.log(this.joke); //undefined 没有获取到this
            that.joke=response.data;
         },
          function(error){}
       )
     }
   }
 })
</script>

案例总结

  1. axios回调函数中this指向已经改变,无法访问data中的数据

  2. 解决方案: 将this进行保存,回调函数中直接使用保存的this即可

1.4 computed计算属性

在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长忙活着逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如下面的代码：

<div>
写在双括号中的表达式太长了,不利于阅读
{{text.split(',').reverse().join(',')}}
</div>.
将这段操作text.split(',').reverse().join(',')  放到计算属性中,最终返回一个结果值就可以
  • computed的作用：减少运算次数，缓存运算结果，运用于重复相同的计算
<body>
    <div id="app">
        <h2>{{res()}}</h2>
        <h2>{{res()}}</h2>
        <!-- 上面调用了两次res函数 -->
        <h1>{{res2}}</h1>
        <h1>{{res2}}</h1>
        <h1>{{res2}}</h1>
    </div>
</body>
<script>
    var obj = new Vue({
        el:"#app",
        data:{
            a:10,
            b:20,
        },
        methods:{
            res:function(){
                console.log("methods执行了：");
                return this.a * this.b;
            },
        },
        computed:{
            res2:function(){
                console.log("computed执行了！");
                return this.a * this.b;
            },
        },
    });
</script>

效果展示：

image-20220329114648414

1.4.1 computed总结

  • 可以看出methods里的res被执行了两次，但是computed值被执行了一次，说明computed是在缓存中运算取得结果的。
  • 定义函数也可以实现与 计算属性相同的效果,都可以简化算。
  • 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

1.5 filter 过滤器

1.5.1 什么是过滤器

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

数据加工车间,对值进行筛选加工.

1.5.2 过滤器使用位置

  1. 双括号插值内
{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道将数据传输给过滤器进行过滤 加工操作
  1. v-bind绑定的值的地方。
<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>

1.5.3 过滤器

  1. 局部过滤器
    需求: 通过过滤器给电脑价格前面 添加一个符号$

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <P>电脑价格:{{price | addIcon}}</P>
    </div>
</body>
    <script>
        var obj = new Vue({
            el: "#app",
            data:{
                price:200,
            },
            methods:{

            },
            computed:{

            },
            // 局部过滤器
            filters:{
                // 处理函数，value = price，是固定参数
                addIcon(value){
                    return "$" + value;
                },
            }

        });
    </script>
</html>

  1. 全局过滤器

    需求: 将用户名开头字母大写

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>姓名:{{user.name | changeName}}</p>
    </div>
</body>
<script>
    // 在创建Vue实例之前，创建全局过滤器
        Vue.filter("changeName",function(value){
        // 将姓名开头字母大写，然后在重新拼接
        return value.charAt(0).toUpperCase() + value.slice(1);
    });
    var obj = new Vue({
        el: "#app",
        data: {
            user:{name:"jack"},
        },
    });
</script>
</html>

总结：

  • 在创建Vue实例之前，创建全局过滤器，不然不起作用
  • 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
  • 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

1.6 watch 侦听器

1.6.1什么是监听器

  • Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。
  • 作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

1.6.3案例演示

需求: 监听姓名变化,实时显示

image-20220329150427334

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <label>姓：</label> <input typoe="text" v-model="lastName" /><br>
        <label>名：</label><input type="text" v-model="firstName" /><br>
        <label>全名：{{getfullName}}</label>
    </div>
</body>
<script>
    var obj = new Vue({
        el: "#app",
        data: {
            firstName: "",
            lastName: "",
            fullName: "",
        },
        watch:{
            firstName(newValue, oldValue){
                console.log("newValue:"+newValue);
                console.log("oldValue:"+oldValue);
                this.fullName = this.lastName +" "+newValue;
            },
            lastName(newValue,oldValue){
                console.log("newValue:"+newValue);
                console.log("oldValue:"+oldValue);
                this.fullName = newValue +""+ this.firstName;
            },
            
        },
        computed:{
            getfullName:function(){
                return this.fullName = this.lastName+this.firstName
            }
        }
    });

</script>
</html>

1.7 全局组件

语法格式：

Vue.component("组件名称", {
  template: "html代码",  // 组件的HTML结构代码
  data(){ //组件数据
    return {}
 },
  methods: {  // 组件的相关的js方法
    方法名(){
      // 逻辑代码
   }
 }
})

注意:

  1. 组件名以小写开头，采用短横线分割命名: 例如 hello-Word
  2. 组件中的data 必须是一个函数,注意与Vue实例中的data区分
  3. 在template模板中, 只能有一个根元素

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <page-head></page-head>
    </div>
</body>
<script>
    // 定义全局组件
    Vue.component("page-head",{
        // 组件的命名一般使用短横线方式，组件中的模板只能有一个根元素
        template: "<div><label>头部组件</label><h1 @click='hello'>{{msg}}</h1></div>",
        data(){
            // 组价中的data是一个函数
            return {
                msg:"hello这里是组件中的data数据",
            };
        },
        methods: {
            hello() {
                alert("天天好心情");
            }
        },
    });
    var obj = new Vue({
        el: "#app",
        data:{

        },
    });
</script>
</html>

1.8 局部组件

比起全局组件，局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。 唯一不同就是：局部组件要写在Vue实例里面。

new Vue({
  el: "#app",
  components: {
    组件名: {
      // 组件结构
      template: "HTML代码",
      // data数据
      data() { return { msg:"xxxx" };},
   },
 },
});

注意：

创建局部组件，注意components,注意末尾有’‘s’’,而全局组件是不用+“s”的，这意味着，component里可以创建多个组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <pagecontent></pagecontent>
    </div>
</body>
<script>
    var obj = new Vue({
        el: "#app",
        components:{
            // 组件名称
            "pagecontent":{
            // 组件内容
            template: "<div><h1>{{msg}}</h1></div>",
            data(){
                return{
                    msg:"今天不学习，明天变垃圾！",
                };
            },
        },
        },
    });
</script>
</html>

效果展示：

image-20220329201218545

1.9 组件与模板分离

  • 由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用组件 -->
      <page-content></page-content>
    </div>
    <!-- 将模板写在HTML中, 给模板指定一个ID -->
    <template id="content">
        <div>
            <button @click="show">{{msg}}</button>
        </div>
    </template>
</body>
<script>
    var obj = new Vue({
        el: "#app",
        components:{
            "page-content":{
                template: "#content",
                data(){
                    return{
                        msg:"点击查询",
                    };     
                },
                methods:{
                    show(){
                        alert("正在查询，请稍等···");
                    }
                }
            },
        },
    });
</script>
</html>

总结:

  1. 上面这种写法，浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 JS 中的 Vue 调用。
  2. 在 html 中，template 标签一定要有一个 id，因为通过 id 是最直接被选中的。 data 和 methods等参数，全部都要放到 Vue 实例里面写。

2.0 Vue生命周期

2.0.1 生命周期图示

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期

了解生命周期的好处:

  1. 找错误
  2. 解决需求

下图展示了实例的生命周期：

image-20220329205812200

2.0.2 钩子函数介绍

  • 生命周期中的钩子函数
    钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。

image-20220329205956132

2.0.3 案例演示

<body>
    <div id="app">
        <button @click="next">获取下一句</button>
        <h2 id="msg">{{message}}</h2>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            message: "想当年,金戈铁马",
        },
        methods: {
            next() {
                this.message = "气吞万里如虎!";
            },
            show() {
                alert("show方法执行!");
            },
        },
        beforeCreate() {
            alert("1.beforeCreate函数在组件实例化之前执行");
            alert(this.message); //undefined
            this.show(); // this.show is not a function
        },
        created() {
            alert("2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成");
            alert(this.message);
            this.show();
        },
        beforeMount() {
            alert(
                "3.beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中"
            );
            alert(document.getElementById("msg").innerText); //Cannot read property'innerText' of null
        },
        mounted() {
            alert("4.mounted函数执行时,模板已经渲染到页面,执行完页面显示");
            alert(document.getElementById("msg").innerText);
        },
        beforeUpdate() {
            alert("5.beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染");
            alert("页面显示的内容:" + document.getElementById("msg").innerText);
            alert("data中的message数据是: " + this.message);
        },
        updated() {
            alert("6.updated执行时，内存中的数据已更新,此方法执行完显示页面!");
        },
    });
</script>

2.1 Vue Router路由

2.1.1 什么是路由?

在Web开发中，路由是指根据URL分配到对应的处理程序。 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图单页面web应用（single page web application，SPA）

image-20220329214656291

2.1.2 什么是SPA ?

百度百科

  • 单页面Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新，举个例子:

image-20220329214828024

整个body的内容从登录组件变成了欢迎页组件, 从视觉上感受页面已经进行了跳转。但实际上，页面只是随着用户操作，实现了局部内容更新,依然还是在index.html 页面中。

单页面应用的好处:

  1. 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
  2. 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

2.1.3 路由相关的概念

  • router :
    是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌 ,router 就相当于一个管理者，它来管理路由。

  • route:
    ruter相当于路由器, route就相当于一条路由.比如: Home按钮 => home内容， 这是一条route, news按钮 => news内容， 这是另一条路由。

  • routes :
    是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {about按钮 => about 内容}]

  • router-link组件:

    router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML内容。 to 属性为目标地址， 即要显示的内容。

  • router-view 组件:

​ 路由导航到指定组件后,进行渲染显示页面.

2.1.4 使用路由

（1）Vue.js路由需要载入vue-router库

//方式1: 本地导入
<script src="vue-router.min.js"></script>
//方式2: CDN
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

（2）使用步骤

  1. 定义路由所需的组件
  2. 定义路由 每个路由都由两部分 path (路径) 和component (组件)
  3. 创建router路由器实例 ,管理路由
  4. 创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。

（3）Html代码

<body>
  <div id="app">
   <h1>渣浪.com</h1>
   <p>
    <!-- 使用 router-link 组件来导航,to属性指定链接 -->
    <router-link to="/home">go to home</router-link>
    <router-link to="/news">go to news</router-link>
   </p>
   <!-- 路由的出口, 路由匹配到的组件(页面)将渲染在这里 -->
   <router-view></router-view>
  </div>
 </body

（4）JS代码

<script src="./vue.min.js"></script>
 <script src="./vue-router.min.js"></script>
 <script>
  //1.定义路由所需的组件
  const home = { template: "<div>首页</div>" };
  const news = { template: "<div>新闻</div>" };
  //2.定义路由 每个路由都有两部分 path和component
  const routes = [
  { path: "/home", component: home },
  { path: "/news", component: news },
 ];
  //3.创建router路由器实例,对路由对象routes进行管理.
  const router = new VueRouter({
   routes: routes,
 });
  //4.创建Vue实例, 调用挂载mount函数,让整个应用都有路由功能
 const VM = new Vue({
   router,
 }).$mount("#app"); //$mount是手动挂载代替el
 </script>

2.1.5 路由总结

  1. router是Vue中的路由管理器对象,用来管理路由.
  2. route是路由对象,一个路由就对应了一条访问路径,一组路由用routes表示
  3. 每个路由对象都有两部分 path(路径)和component (组件)
  4. router-link 是对a标签的封装,通过to属性指定连接
  5. router-view 路由访问到指定组件后,进行页面展示

🍗🍗🍗 完结撒花
💖💖💖写作不易，如果您觉得写的不错，欢迎给博主点赞、收藏、评论、收藏来一波~让博主更有动力吧！
👍👍👍 路漫漫其修远兮，吾将上下而求索

程序员阿红
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue进阶篇.pdf
05-09
vue基础知识，文章内部存在案例、分析以及js底层原理。深入解剖前端模块之间的原理，是读者更容易上手和编写，为后续自我提升帮助很大。让读者在轻松阅读中得到良好的提升
浅记录小白学习vue问题
zhanghuahuapoi的博客
08-29 1798
小白学习vue记录的疑问点
vue2笔记（三）组件化开发
luobobei的博客
09-20 735
组件化开发 (来源csdn博主「程序猿玖月柒」) 原文链接：https://blog.csdn.net/weixin_45257157/article/details/113705867 什么是组件化？ 面对复杂问题的处理方式，把问题拆解成很多个能处理的小问题，再将其放在整体中，会发现大的问题也会迎刃而解。 而组件化的思想也类似： 如果我们实现一个页面结构和逻辑非常复杂的页面时，如果全部一起实现会变得非常复杂，而且也不利于后续的维护和迭代功能。 但如果我们这时候把页面分成一个个小的功能块，每个功能块能完成属
Vue3 - 从 vue2 到 vue3 过渡，这一套就够了（案例 + 效果演示）（一）
CYK_byte的博客
02-03 1230
vue3 中有一个新的配置项，值是一个函数. 他是所有组合 API 的“舞台”，也就是说，之前 vue2 组件中使用到的 data、methods...... 都要配置在 setup 中.
div,section,article,aside 区分
War__Tiger的博客
10-18 1312
section：含义是区，块。里面必须包含一个标题，如果一个网页分区比较明确可以使用section。举例：报纸 section不能代替div。在没有明确的区块划分（没有标题）的情况下最好用div，如果用了section的话需要设置样式，最好在section中设置一个div，然后给这个div设置样式以及脚本。最好不要直接在section上设置样式和脚本 section和article可以互相嵌套。article的含义是一篇完整的文章。一篇完整的文章就需要有标题有内容，有结尾，所以当你写的页面包含这些.
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2039
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
Vue：过度效果、动画效果、key值、插槽、动态组件、实例的属性
洪布斯的博客
12-11 319
vue过渡效果： transition标签对，用来放置即将要发生动画或过渡效果的标签 默认使用六个类名，设置效果，类名以v-开头 如果需要设置多个效果，需要给transition添加name属性，那么六个类名一律nameValue-开头 /* 设置标签即将显示时的初始位置 */ .v-enter { left: -100%; ...
面试最全Vue知识点（基础到进阶，覆盖vue3）.pdf
02-10
Vue面试知识点，帮助复习找到更好的工作！！
Vue完整项目构建(进阶篇)
01-19
了解 nodejs 基础知识，npm 常用命令，以及 npm script 使用 (vue 项目中使用 npm 进行包管理)。 了解 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack webpack.github.io/ 是一个模块打包工具。它将...
FE-advance-road:进阶资深前端开发
05-27
第二点就是建立起团队的基础设施，解放大家的劳动力，减少重复工作，把更多的时间投入到编码。 那么到底学习哪些内容可以提升以上说的点呢？或者说你知道有哪些点可以提升，但是觉得它们很神秘、学习起来很困难，不...
Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip
最新发布
03-03
Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip
详解 Vue & Vuex 实践
weixin_34223655的博客
01-29 139
详解 Vue & Vuex 实践翻译自Vue + Vuex — Getting started，承接自2017 Vue.js 2快速入门指南，从属于Web 前端入门与工程实践。 随着应用复杂度的增加，我们需要考虑如何进行应用的状态管理，将业务逻辑与界面交互相剥离，详细讨论参考笔者的2016-我的前端之路:工具化与工程化。Vue 为...
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue实现点击页面侧边导航节点页面滚动到对应section(段落)部分
树上骑个猴的博客
01-22 1657
效果图： index.html(假设该页面要实现点击导航实现滚动功能) <template> <div> <info-line /> <div> <el-row type="flex" justify="center"> <el-col :span="23"> <div class="container-page-main"> &
Vue框架——基本知识点+示例（1）
Whuiry的博客
08-09 420
03 vue相关问题 第一步：引入框架 < script src=“js/vue.js”></ script> 第二步：body中写入元素 < div id=‘app’>{{msg}}</ div> 第三步：实例化对象 new Vue({ ​ el:’#app’ //绑定元素 ​ data:{ ​ msg:‘Hello Vue!’ ​ } }) <!DOCTYPE html> <html lang="en"> <hea
vue 全局组件开发页面引用
周家大小姐
10-23 291
创建src\components\SectionTitle\index.vue <template> <div class="section-title"> <slot> <span class="text">{{ text }}</span> </slot> </div> </template> <script> export default {
何时使用section标签
goodgirl1991的专栏
01-10 7053
本文内容转自链接：https://www.zhihu.com/question/20227599/answer/16314207 一个section通常由内容和标题组成，通常不推荐那些没有标题的内容用section，在HTML 5 Outliner这个网站可以检测没有标题的section，section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完
Vue 使用中的小技巧
weixin_33929309的博客
04-22 376
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~ 1. 多图表resize事件去中心化 1.1 一般情况 有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会...
vue基础案例5 - 变换布局
zjsfdx的博客
12-20 1279
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"
vue.js全家桶 零基础入门到进阶项目实战 pdf
01-08
在掌握了这些基础知识之后，这本书还会通过一些实际项目来帮助你深入理解Vue.js全家桶的应用。通过实战项目，你可以学会如何构建复杂的交互式应用程序，以及如何使用Vue.js全家桶来进行数据管理和页面导航。 总的来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员阿红

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值