一、Vue基础

展流

已于 2023-03-16 11:41:03 修改

阅读量775

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-03-09 21:42:15 首次发布

本文链接：https://blog.csdn.net/qq_53281003/article/details/129431334

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基础知识，包括Vue的简介，如数据驱动视图、双向数据绑定和全家桶组件。详细讲解了如何导入Vue，创建第一个Vue实例，使用el属性设置挂载点，以及data数据对象的使用。接着，深入探讨了Vue的各种指令，如v-text、v-html、v-on事件绑定、v-if和v-for列表渲染等，通过实例展示了这些指令的实际应用。

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

1、跑通一个vue

1.1、Vue简介

js框架

简化dom操作

响应式数据驱动

1.1.1、数据驱动视图（单向的数据绑定）

vue监听数据的变化，自动重新渲染页面的结构。

好处：数据变化，vue自动渲染，不需手动

1.1.2、双向数据绑定

开发者在不操作dom的前提下，自动把用户填写的内容，同步到数据源中。

好处：开发者不在手动操作dom元素，来获取表单元素最新的值。

1.1.3、vue全家桶

vue的官方定义为前端框架，提供了构建用户界面的一整套解决办法。（俗称Vue全家桶）

①vue（核心库）

②ue-router（路由方案）

③vuex（状态管理方案）

④vue组件库（快速搭建页面UI效果的方案）

以及辅助Vue项目开发的一系列工具

①vue-cli（npm全局包：一键生成工程化的vue项目-基于webpack、大而全）

②vite9（npm全局包：一键生成工程化的vue项目-小而巧）

③vue-devetools（浏览器插件：辅助调试的工具）

④vetur（vscode插件：提供语法高亮和智能提示）

1.2、导入vue

开发环境，带有帮助

1.3、跑通hello vue

1、创建Vue实例对象，设置el属性和data属性。

2、使用模板语法（ {{message}} ）把数据渲染到页面上。

个人理解：

“#”是id选择器

<div id="app">{{ 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>

1.4、el属性，设置挂载点

el命中的元素内部，用两个大括号修饰的部分，就会被data中同名的数据给替换。

问1：vue实例的作用范围

答1：el命中的元素内部。

问2：是否可以使用其他选择器（id，标签）。

答2：可以，建议id，因为唯一。

问3：是否可以设置其他的dom元素

答3：可以使用其他双标签，不能html和body，建议div，因为没有额外样式。

1.5、data数据对象

<div id="app">
      {{ message }}
      <h2>{{ school.name }} {{ school.mobile }}</h2>
      <ul>
        <li>{{ learn[0] }}</li>
        <li>{{ learn[1] }}</li>
        <li>{{ learn[2] }}</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
          school: {
            name: "赵yf",
            mobile: "186*****587",
          },
          learn: ["数据结构", "操作系统", "计算机网络"],
        },
      });
    </script>

个人理解：

Vue中用到的数据定义在data里

data可以写复杂类型的数据

渲染复杂类型数据，遵循js语法即可，对象点语法，数组索引语法

2、Vue指令

2.1、内容渲染指令

v-text，{{}}，v-html

2.2、属性绑定指令

v-bind（:）

2.3、事件绑定指令

v-on（@）

2.3.1、事件对象event

2.3.2、绑定事件并传参

2.3.3、传参并接受事件对象

2.3.4、事件修饰符

2.3.5、按键修饰符

配合键盘相关事件

2.4、双向渲染、绑定指令

2.4.1、v-modle

只能配合表单元素使用

2.4.2、v-model修饰符

2.5、条件渲染指令

v-if、v-show、v-else（配合v-if）、v-else-if（充当v-if的else-if，可以连续使用）

2.6、列表渲染指令

2.6.1、v-for

2.6.2、v-for的索引

2.6.3、使用key维护列表的状态

2.6.4、key的注意事项

3、指令使用

通过Vue实现常见的网页效果

Vue指令值得是以v-开头的一组特殊语法

3-1、v-text

设置标签的文本值（textContent）

<div id="ap">
      <!-- v-text默认替换全部内容 -->
      <h2 v-text="message+'!'">河南</h2>
      <!-- 差值表达式替换指定内容 -->
      <h2>河南{{ message+'!' }}</h2>
    </div>
    <script>
      var app = new Vue({
        el: "#ap",
        data: {
          message: "赵yf",
        },
      });
    </script>

3-2、v-html

设置标签的innerHTML

内容有html结果可以被解析，而v-text只会解析成文本

<div id="app4">
      <p v-html="content"></p>
      <p v-text="content"></p>
    </div>
    <script>
      var app = new Vue({
        el: "#app4",
        data: {
          content: "<a href='https://www.baidu.com/'>百度</a>",
        },
      });
    </script>

3-3、v-on

为元素绑定事件（鼠标点击，鼠标移入）

"v-on:"可以替换成"@"

方法定义在methods中

方法内部通过this关键字访问定义在data的数据

<div id="app5">
      <input type="button" value="事件绑定" v-on:click="doit" />
      <input type="button" value="事件绑定" @click="doit" />
      <h2 @click="changesport">{{sport}}</h2>
    </div>
    <script>
      var app = new Vue({
        el: "#app5",
        data: {
          sport: "篮球",
        },
        methods: {
          doit: function () {
            alert("做it");
          },
          changesport: function () {
            this.sport += "好玩";
          },
        },
      });
    </script>

案例1：计数器

加减是两个click方法，在methods中，add，sub找到方法，this.找到data里的数据。

数字为span带的{{num}}

<div id="app6" class="input-num">
      <button @click="add">+</button>
      <span>{{num}}</span>
      <button @click="sub">-</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app6",
        data: {
          num: 1,
        },
        methods: {
          add: function () {
            if (this.num < 10) {
              this.num++;
            } else {
              alert("最大了");
            }
          },
          sub: function () {
            if (this.num > 0) {
              this.num--;
            } else {
              alert("最小了");
            }
          },
        },
      });
    </script>

3-4、v-show

根据表达值的真假，切换元素的显示和隐藏，原理是修改display

更高的初始渲染开销

指令后面的内容最终都会解析成布尔值

div id="app7">
      <input type="button" value="切换显示" @click="changeisshow" />
      <img
        v-show="isshow"
        src="https://img2.baidu.com/it/u=3001931313,3038848055&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
        alt=""
      />
      <input type="button" value="增加年龄" @click="addage" />
      <img
        v-show="age>18"
        src="https://img1.baidu.com/it/u=1147992555,4285883113&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt=""
      />
    </div>

    <script>
      var app = new Vue({
        el: "#app7",
        data: {
          isshow: true,
          age: 17,
        },
        methods: {
          changeisshow: function () {
            this.isshow = !this.isshow;
          },
          addage: function () {
            this.age++;
          },
        },
      });
    </script>

3-5、v-if

根据表达值的真假，切换元素的显示和隐藏（操作dom元素）

更高的切换开销

<div id="app8">
      <input type="button" value="切换显示" @click="changeisshow8" />
      <p v-if="isshow8">我是一个p标签</p>
      <p v-if="temperature>=35">热死啦</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app8",
        data: {
          isshow8: false,
          temperature: 40,
        },
        methods: {
          changeisshow8: function () {
            this.isshow8 = !this.isshow8;
          },
        },
      });
    </script>

v-show改变的只是display，v-if影响的是dom

一个操作样式（初始不显示时，初始渲染消耗较高），一个操作dom（对性能消耗比较大）

频繁切换的元素用v-show，反之用v-if。

3-6、v-bind

设置元素属性，可以省略，直接冒号就行

常见的属性：图片地址（src）、类（class）、文本（title）。写在元素内部。

<style>
      .active {
        border: 10px solid red;
      }
    </style>
    <div id="app9">
      <img
        :src="imgsrc"
        alt=""
        :title="imgtitle+'!'"
        :class="{active:isactive}"
        @click="toggleactive9"
      />
<!-- {active:isactive} active是否生效取决于isactive的值 -->
    </div>
    <script>
      var app = new Vue({
        el: "#app9",
        data: {
          imgsrc:
            "https://img1.baidu.com/it/u=1124731332,54191704&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
          imgtitle: "美女",
          isactive: true,
        },
        methods: {
          toggleactive9: function () {
            this.isactive = !this.isactive;
          },
        },
      });
    </script>

案例2：图片切换（轮播图）

列表数据使用数组保存

v-bind设置元素属性，例如src

v-show和v-if都可以切换显示状态，频繁用show

<h1>10</h1>
    <div id="app10">
      <a href="javascript:void(0)" @click="prev" class="left" v-show="index!=0"
        >上一张
      </a>
      <img :src="imgarr[index]" />
      <a
        href="javascript:void(0)"
        @click="next"
        class="right"
        v-show="index<imgarr.length-1"
        >下一张</a
      >
    </div>
    <script>
      var app = new Vue({
        el: "#app10",
        data: {
          imgarr: [
            "./images/00.jpg",
            "./images/01.jpg",
            "./images/02.jpg",
            "./images/03.jpg",
            "./images/04.jpg",
          ],
          index: 0,
        },
        methods: {
          prev: function () {
            this.index--;
          },
          next: function () {
            this.index++;
          },
        },
      });
    </script>

3-7、v-for

根据数据生成列表结构

<div id="app11">
      <ul>
        <li v-for="user in list">姓名是：{{user.name}}</li>
      </ul>
    </div>
    <script>
      var app = new Vue({
        el: "#app11",
        data: {
          list: [
            { id: 1, name: "zs" },
            { id: 2, name: "ls" },
          ],
        },
      });
    </script>