05_02_ Vue基础入门（axios，computed计算属性、filter过滤器、watch侦听器、vue生命周期、组件、路由）

广+土

已于 2022-03-09 17:12:46 修改

阅读量410

点赞数 1

分类专栏：笔记 05拉钩第五阶段单体架构项目：拉钩教育管理系统文章标签： vue.js javascript 前端

于 2021-12-31 13:17:53 首次发布

本文链接：https://blog.csdn.net/weixin_41596178/article/details/122079059

版权

本文介绍了Vue.js的基础知识，包括Vue.js的介绍、使用和优势。详细讲解了Axios的使用，从Ajax回顾到axios入门、案例演示，以及如何解决页面闪烁问题。此外，文章还探讨了Vue.js的计算属性、过滤器和侦听器，阐述了它们在数据处理和响应式更新中的作用。最后，文章深入浅出地介绍了Vue的组件、生命周期和路由概念，帮助读者掌握构建用户界面的基本技能。

摘要由CSDN通过智能技术生成

Vue.js

1.Vue.js

1.1 Vue.js 介绍

1.1.1 Vue.js是什么? Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，

Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与
现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。

官方网站: https://cn.vuejs.org/v2/guide/ 作者尤雨溪是中国人.

VSCode插件:
在这里插入图片描述

1.1.2 为甚么使用Vue?

声明式渲染: 前后端分离是未来趋势
渐进式框架: 适用于各种业务需求
简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1.2 Vue.js 基础

1.2.1 Vue.js的使用

在html页面使用script引入vue.js的库即可使用。

远程CDN 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
本地
<script src="vue.min.js"></script>

Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形

1.2.2 入门程序

创建一个vuetest目录, 并且在目录下创建 01_vue入门程序.html 文件.
代码编写步骤：

定义html，引入vue.js
定义app div，此区域作为vue的接管区域
定义Vue实例，接管app区域。
定义model（数据对象）
在app中展示数据

<!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>
    <!-- 1.通过联网进行引入vue.js-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  -->
    <!-- 1.通过本地进行引入vue.js-->
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <!-- 2. 定义app div，此区域作为vue的接管区域 -->
    <div id="app">
    <!-- {
   {}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->
    {
  {name}}         
    </div> 
</body>
<!-- 创建vue的实例 -->
<script>
	//3. 创建vue实例
    var VM =new Vue({
    
    //定义 Vue实例挂载的元素节点,表示vue接管该div
        el:"#app", //选择器，选择id为app的
        //4.定义model模型数据对象
        data:{
    
            name:"hello vue!!"
        }
    });
</script>
</html>

{ {}}: 插值表达式
1. 插值表达式的作用?
  通常用来获取Vue实例中定义的数据(data)
  属性节点中不能够使用插值表达式
el: 挂载点
1. el的作用 ?
  定义 Vue实例挂载的元素节点,表示vue接管该区域
2. Vue的作用范围是什么 ?
  Vue会管理el选项命中的元素,及其内部元素
3. el选择挂载点时,是否可以使用其他选择器 ?
  可以,但是建议使用 ID选择器
4. 是否可以设置其他的DOM元素进行关联 ?
  可以但是建议选择DIV, 不能使用HTML和Body标签
data: 数据对象
1. Vue中用到的数据定义在data中
2. data中可以写复杂类型
3. 渲染复杂类型数据的时候,遵守js语法

<!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>
    <!-- 1.通过联网进行引入vue.js-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  -->
    <!-- 1.通过本地进行引入vue.js-->
    <script src="./js/vue.min.js"></script>
  </head>
  <body>
    <!-- 创建id为APP 的div -->
    <div id="app">
      {
  {name}}<br />
      {
  {school.name}}{
  {school.mobile}}<br />
      <ul>
        <li>{
  {names[0]}}</li>
        <li>{
  {names[1]}}</li>
        <li>{
  {names[2]}}</li>
      </ul>
    </div>
  </body>
  <!-- 创建vue的实例 -->
  <script>
    var VM = new Vue({
    
      el: '#app',
      data: {
    
        name: '你好世界 我不好',
        //对象类型
        school: {
    
          name: '拉钩教育',
          mobile: '1001001',
        },
        //数组类型
        names: ['尼古拉斯', '张三', '凯莎'],
      },
    });
  </script>
</html>

1.2.3 声明式渲染的好处

Vue中的声明式渲染,简单理解就是我们声明数据,Vue帮我们将数据渲染到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>
  </head>
  <body>
    <div id="app">
      <h2>{
  {name}}</h2>
    </div>
	<!--jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合-->
    <!-- <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#app').append('<h2>hello Word!</h2>');
      });
    </script> -->
    <!-- 在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以. -->
    <script src="./js/vue.min.js"></script>
    <script>
      var VM = new Vue({
    
        el: '#app', //挂载点
        data: {
    
          name: 'Hello Word!!',
        },
      });
    </script>
  </body>
</html>

1.2.4 Vue常用指令

根据官网的介绍，指令是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

v-text 指令
作用: 获取data数据, 设置标签的内容.
注意: 默认写法会替换全部内容,使用插值表达式{ {}}可以替换指定内容.
代码示例:

<!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>
  </head>
  <body>
    <div id="app">
      <!-- 插值表达式 不会覆盖原来的内容体 -->
      <h2>{
  {message}}高薪训练营</h2>
      <!-- v-text 获取data数据，设置标签的内容，会覆盖之前的内容体  -->
      <h2 v-text="message">高薪训练营</h2>
      <!-- 拼接字符串 能进行数字的拼接，无法进行字符串的拼接-->
      <h2 v-text="message+1"></h2>
      <!-- <h2 v-text="message+abc"></h2> -->
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
    
      el: '#app',
      data: {
    
        message: 'java程序员',
      },
    });
  </script>
</html>

v-html 指令
作用: 设置元素的 innerHTML (可以向元素中写入新的标签)
代码示例:

<!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>
    <style>
      /* 
      v-html指令：设置元素的innerHTML，向元素写入标签
    */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 获取普通文本 -->
      {
  {message}}
      <h2 v-text="message"></h2>
      <h2 v-html="message"></h2>

      <!-- 设置元素的innerHTML -->
      <h2 v-html="url"></h2>
      <h2 v-text="url"></h2>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
    
      el: '#app',
      data: {
    
        message: 'java程序员',
        url: "<a href='https://wwww.baidu.com'>百度一下</a>",
      },
    });
  </script>
</html>

v-on 指令
作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click=“方法”
绑定的方法定义在 VUE实例的, method属性中
语法格式

    <div id="app">
      <!-- 使用v-on 绑定click 点击事件 -->
      <input type="button" value="点击按钮" v-on:click="方法名" />
      <!-- 使用 @符号也可以绑定-->
      <input type="button" value="点击按钮" @click="方法名" />
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
    var VM = new Vue({ 
      el:"#app", 
      //通过methods ,专门存放Vue中的方法 
      methods:{
      方法名:function(){ 
        alert("123!") 
      }
    })

代码示例

<!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>
    <style>
      /* 
      v-on指令：作用是为元素绑定事件
    */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 绑定点击事件 -->
      <input type="button" value="点击按钮" v-on:click="show" />
      <!-- 简写方式 -->
      <input type="button" value="点击按钮" @click="show" />
      <!-- 绑定双击事件 -->
      <input type="button" value="双击按钮" @dblclick="show" />
      <!-- 绑定点击事件，修改内容 -->
      <h2 @click="changeFood">{
  {food}}</h2>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
    
      el: '#app',
      data: {
    
        food: '麻辣小龙虾',
      },
      //通过methods专门存放vue的方法
      methods: {
    
        show: function () {
    
          alert('程序员在加班!');
        },
        changeFood: function () {
    
          //使用this获取data中的数据
          //在vue中 不需要考虑如何更改DOM，重点放在修改数据上，数据更新后，使用数据的那个元素也会同步更新
          console.log(this.food);
          this.food += '真好吃';
        },
      },
    });
  </script>
</html>

计数器案例

编码步骤
1. data中定义数据: 比如 num 值为1 2. methods中添加两个方法: 比如add(递增) ,sub(递减) 3. 使用{ {}} 将num设置给 span标签
2. 使用v-on 将add,sub 分别绑定给 + ,- 按钮
3. 累加到10 停止
4. 递减到0 停止
页面准备

<!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>
  </head>
  <body>
      <div id="app">
        <!-- 计算功能区域 -->
        <div>
          <input type="button" class="btn btn_plus" /> 
          <span>{
  {num}}</span>
          <input type="button" class="btn btn_minus" />
        </div>
      </div>
    </body>
    <script src="vue.min.js"></script>
    <script>
      //创建VUE实例 
      var VM = new Vue({
     
        el:"#app", 
        data:{
    num:1 } 
      })
    </script>
  </body>
</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>
  <link rel="stylesheet" href="./css/inputNum.css"/>
</head>
<body>
  <div id="app">
    <!-- 计算功能区域 -->
    <div>
      <input type="button" class="btn btn_plus" v-on:click="add"</

最低0.47元/天解锁文章

广+土

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
05_02_ Vue基础入门（axios，computed计算属性、filter过滤器、watch侦听器、vue生命周期、组件、路由）

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

扫一扫

专栏目录