从零开始学Vue3脚手架 (三) 基础指令

于 2023-08-24 17:56:16 发布
阅读量129 收藏
点赞数
分类专栏： VUE 3.0 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenyan7877/article/details/132467563
版权

一、概述

        Vue3 的语法格式有2中，一种为选项式，一种为组合式。

        选项式和vue2的语法格式相同，更加适用于初学者。

        组合式为vue3的新特性，更加适用于项目中，能够增加代码的可读性、复用性。

        本章内容使用的是选项式。

二、常用指令

2.1、简介       

        Vue.js 是一个构建用户界面的 JavaScript 框架。在javascript中定义数据内容，通过vue框架中的指令将数据渲染到页面之上。

Vue的常用指令有以下几个：

        ​​v-bind​​：绑定数据到 HTML 元素的属性。
        ​​v-if​​：根据表达式的值的真假来决定是否渲染元素。
        ​​v-for​​：循环渲染一个数组中的项目。
        ​​v-on​​：监听 DOM 事件并执行一个表达式。
        ​​v-model​​：双向绑定数据到表单输入元素。

除了这几个指令以外，还有以下几个不太常用的指令

        v-show、v-html、v-text

        这些指令是 Vue.js 的核心功能，它们可以帮助你在模板中绑定数据、控制元素的显示和隐藏、遍历数组并执行事件处理。

2.2、VUE基础入门

        在vue中定义的数据如何简单的显示在页面之上？

        在vue中可以使用{{属性名}}的方式将数据展示浏览器之上

实现步骤：

        1.在js中定义数据

        2.在 中通过 {{}} 显示js中定义的数据

Test.vue

<script>
// export：es6中的写法，导出当前的js代码，可以在其他的页面/js中导入当前的js代码，并使用
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    // 在 return 中定义vue中的数据，可以加载 JSON 数据格式的内容.
    return {
      message: "我是vue中定义的一个数据哟"
    };
  },
  // methods为vue中的属性，用于定义vue中的函数
  methods:{
    show(){
      alert("我是show");
    }
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    <!-- 在template中任意一个位置都能显示data中的数据 -->
    {{ message }}
    <!-- 也可以将message显示在其他标签中 -->
    <p>
      {{ message }}
    </p>
    <!-- 调用函数 -->
    {{ show() }}
  </div>
</template>

<style scoped>

</style>

App.vue

<script setup lang="ts">
// 导入Test.vue 文件
import Test from './views/Test.vue'
</script>

<template>
// 以子组件的方式加Test.vue文件中的内容
  <Test></Test>
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

2.3、v-html和v-text

        v-html：将js中定义的数据以HTML内容的方式加载到浏览器之上。

        v-text：以文本的方式加载js中的数据，和 {{}} 加载数据是一样的效果

Test.vue

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      test: "<a href='http://www.baidu.com'>百度</a>"
    };
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    <!--  vue的指令需要设置在标签之上 -->
    <!--  v-html：<标签名 v-html="在js中定义的属性名">,如果test中有标签，test中的标签内容以标签的方式加载 -->
    <p v-html="test"></p>
    <!--  v-text：<标签名 v-text="在js中定义的属性名">,如果test中有标签，test中的标签内容以文本的方式加载 -->
    <p v-text="test"></p>

  </div>
</template>

<style scoped>

</style>

2.4、v-show和v-if

        v-show：通过标签的display样式属性设置标签是否显示在浏览器之上

        v-if：通过表达式控制标签是否加载到浏览器之上

Test.vue

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      age: 18
    };
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    <!--
      v-if：通过表达式放回的结果决定当前标签是否加载到浏览器
        一个v-if之后能跟多个 v-else-if，只能加一个v-else
        v-else-if和v-else都不能单独出现
    -->
    <p v-if="age<18">未成年</p>
    <p v-else-if="age<25">青年</p>
    <p v-else-if="age<35">中年</p>
    <p v-else-if="age<45">壮年</p>
    <p v-else-if="age<80">老年</p>
    <p v-else>大寿星啊~~</p>

  </div>
</template>

<style scoped>

</style>

Test.vue

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      age: 18
    };
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    <p v-show="age>18">我是v-show</p>
    <p v-show="age<=18">我是v-show</p>
  </div>
</template>

<style scoped>

</style>

2.4、v-for 列表指令

        v-for：循环加载数据到浏览器之上

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      number: 10,
      userObject: {
        userName: "小明",
        userAge: 15,
        userSex: 0
      },
      userArray: [{
        userName: "小明",
        userAge: 15,
        userSex: 0
      }, {
        userName: "小红",
        userAge: 15,
        userSex: 0
      }, {
        userName: "小兰",
        userAge: 15,
        userSex: 1
      }]
    };
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    <!--
    固定次数的循环
      i为循环变量，用于接收循环过程中的临时数据
      in为关键字
      number为vue data属性中的数据
    -->
    <p v-for="i in number">
      <!--  将i显示在浏览器之上    -->
      {{ i }}
    </p>

    <!--
      循环对象
        value：对象中属性的值
        kay：对象中的属性名
        userObject：在vue data 中声明的对象
    -->
    <p v-for="(value,key) in userObject">
      {{ key }}-->{{ value }}
    </p>

    <!--
      循环数组
        user：存储数组中的元素对象，对象名自定义
        user.属性名：获取数组中的元素对象的属性，属性名需要和数组中的对象属性名相同！！！
    -->
    <p v-for="user in userArray">
      <!--  user:为userArray中的对象    -->
      {{ user }}
      姓名：{{ user.userName }} 年龄：{{ user.userAge }} 性别：{{ user.userSex == 1 ? "男" : "女" }}
    </p>
  </div>
</template>

<style scoped>

</style>

2.5、v-bind 属性绑定

        将vue data中的数据以标签属性的方式加载到浏览器中。

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      imagePath: "./src/assets/img/1.png",
      widths: "200",
      title: "vue 3.0",
      imagePath2: "https://www.xgccm.com/kindeditor/attached/image/20200310/20200310164388978897.jpg",
      styleText: "red",
      fontSize: "24px",
      styleObject: {
        color: "pink",
        "font-size": "36px"
      },
      styleObject2: {
        "margin-left": "10px"
      },
      classAFlag: true,
      fontAFlag: true,
      classObject: {
        colorA: true,
        fontA: true
      },
      bgObjct: {
        bg: true
      },
      classArray: [{
        "bg": true
      }, {
        "fontA": true
      }]
    };
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    <!--  vue3中动态加载静态图片【存在assets文件夹】中的图片路径需要从src目录开始  -->
    <img v-bind:src="imagePath" v-bind:width="widths" v-bind:title="title"/>
    <!--  vue3加载远程图片  -->
    <img v-bind:src="imagePath2" v-bind:width="widths">

    <!--  设置动态样式【通过style属性进行设置】  -->
    <p :style="{color:styleText,'font-size':fontSize}">颜色</p>
    <p :style="styleObject">obj</p>
    <p :style="[styleObject,styleObject2]">Array</p>

    <!--  设置动态样式【通过class样式表进行设置】  -->
    <p :class="{colorA:classAFlag,fontA:fontAFlag}">哈哈哈</p>
    <p :class="classObject">class-obj</p>
    <p :class="classArray">array</p>
    <p :class="[classObject,bgObjct]">array2</p>
  </div>
</template>

<style scoped>
.colorA {
  color: red;
}

.fontA {
  font-size: 30px;
}

.bg {
  background-color: papayawhip;
}
</style>

2.6、v-model 双向绑定

        如果需要获取到表单元素中的数据，在Vue 中可以使用v-model，将vue data 中的数据和表单元素的value属性进行双向绑定，当表单元素的value值改变之后，vue data 中的数据会同时变化。反之亦然。

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      userName: "小白",
      hobby: ["吃饭"],
      picked: "One"
    };
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    {{ userName }} {{ hobby }} {{ picked }}
    <br>
    <input type="text" v-model="userName"/><br/>

    <!--  多个复选框/单按钮 为一组，那么这几个表单元素的v-model的属性名要相同  -->
    <input type="checkbox" value="吃饭" v-model="hobby"/>吃饭
    <input type="checkbox" value="睡觉" v-model="hobby"/>睡觉
    <input type="checkbox" value="打豆豆" v-model="hobby"/>打豆豆<br/>

    <input type="radio" id="one" value="One" v-model="picked"/>
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked"/>
    <label for="two">Two</label>


  </div>
</template>

<style scoped>

</style>

2.7、v-on 事件绑定

        v-on用于完成事件绑定

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      count: 1,
      message: ""
    }
  }, methods: {
    show(text) {
      console.log(text)
    },
    getTitle() {
      return "title哦";
    }
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    {{ count }}
    <button @click="count++">count</button>
    <br>
    <!-- prevent：阻止本身的行为 -->
    <a @click.prevent="show('我是小新呀')" href="#">单击事件</a><br>

    <!-- 设置返回值赋值给属性 -->
    <a :title="getTitle()" herf="#">信息</a>
  </div>
</template>

<style scoped>

</style>

三、综合案例

        通过Vue的指令，来完成对数据的增删改查

<script>
export default {
  // data为vue中的属性，在次属性中定义要在template中展示的数据，data需要函数化！！！
  data() {
    return {
      user: {
        userName: "小李",
        age: 16,
        sex: "男"
      },
      users: [{
        userName: "小王",
        age: 16,
        sex: "男"
      }, {
        userName: "小张",
        age: 16,
        sex: "男"
      }, {
        userName: "小刘",
        age: 16,
        sex: "女"
      }]
    }
  }, methods: {
    save: function () {
      // 添加
      this.users.push({
        userName: this.user.userName,
        age: this.user.age,
        sex: this.user.sex
      });
    },
    edit: function (index) { // index：tr的下标
      // 修改
      this.users.splice(index, 1, this.user);
      alert("修改成功");
    },
    remove: function (index) {
      // 删除
      this.users.splice(index, 1);
    }
  }
}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div>
    姓名：<input type="text" name="username" v-model="user.userName"/><br/>
    年龄：<input type="text" name="username" v-model="user.age"/><br/>
    性别：<input type="radio" name="sex" v-model="user.sex" value="男"/> 男
    <input type="radio" name="sex" v-model="user.sex" value="女"/> 女<br/>
    <input type="button" value="保存" @click="save"/>
    <br/>
    <table>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(user,index) in users">
        <td>{{ user.userName }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
          <input type="button" value="修改" @click="edit(index)"/>
          <input type="button" value="删除" @click="remove(index)"/>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>

</style>

四、总结

        Vue3 的基本指令包括 ​​v-bind​​、​​v-if​​、​​v-for​​、​​v-on​​ 和 ​​v-model​​。它们可以帮助我们在模板中绑定数据、控制元素的显示和隐藏、遍历数组并执行事件处理，实现双向绑定。通过学习和使用这些指令，我们可以在 Vue.js 中快速开发出功能丰富的用户界面。

若若牙不疼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值