Web应用开发学习笔记————Vue框架

最新推荐文章于 2024-06-13 23:47:14 发布

面向对象的邓老凉茶

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量792

点赞数 8

文章标签： vue.js 前端学习

本文链接：https://blog.csdn.net/2301_77606661/article/details/138820383

版权

Vue框架快速入门

Vue入门

在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue入门</title>
  <!--
  引入vue.js文件
  -->
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
      <input type="text" v-model="message">
      <!--这里使用差值表达式-->
      {{message}}
  </div>
</body>
<!--在script标签下编写vue命令-->
<script>
<!--vue通过#app这个id来识别覆盖范围-->
  new Vue({
    el:"#app",
    data:{
      message:"Hello vue"
    }
  })
</script>
</html>

== 这里的vue.js文件需要在官网上下载到本地，后者直接在官网导包 ==

Vue常用指令

在这里插入图片描述

v-bind & v-model:
v-on:

v-bind & v-model & v-on的实践代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue入门</title>
  <!-- 引入Vue.js库 -->
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- Vue实例的作用域，所有指令和绑定都在这个元素及其子元素内生效 -->
  <div id="app">
    <!-- 使用v-bind指令绑定href属性的值到Vue实例的data属性中的url -->
    <a v-bind:href="url">
      <!-- 创建一个按钮，点击后会跳转到绑定的url -->
      <input type="button" value="url" >
    </a><br>
    <!-- 使用v-model指令创建双向数据绑定，将输入框的值与Vue实例的data属性中的url绑定 -->
    <input type="text" v-model="url"><br>
    <!-- 使用v-on指令绑定click事件到Vue实例的methods属性中的handle方法 -->
    <input type="button" value="click me" v-on:click="handle()">
  </div>
</body>
<!-- Vue实例的JavaScript代码 -->
<script>
  // 创建一个新的Vue实例
  new Vue({
    el:"#app", // 指定Vue实例挂载的元素，这里是id为'app'的div元素
    data:{     // 定义Vue实例的数据对象
      url:"https://cn.vuejs.org/guide/introduction.html" // 初始化url数据
    },
    methods:{  // 定义Vue实例的方法对象
      handle:function(){ // 定义一个名为handle的方法
        alert("我被点了") // 当方法被调用时，弹出一个警告框
      }
    },
  })
</script>
</html>

v-if & v-show

实践代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vuedome</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id ="app">
    <p>
      输入年龄:
    </p><br>           <!-- 输入年龄 -->
    <input type="text" v-model="age"><br>    <!-- 绑定输入框与 age 变量 -->
    判断为：
    <span v-if="age <= 35">年轻人（35以下）</span>  <!-- 使用 v-if 条件判断年龄范围 -->
    <span v-else-if="age > 35 && age <= 60">中年人（35到60）</span>
    <span v-else>老年人（60以上）</span>

    <span v-show="age <= 35">年轻人（35以下）</span>  <!-- 使用 v-show 按条件显示不同年龄段提示 -->
    <span v-show="age > 35 && age <= 60">中年人（35到60）</span>
    <span v-show="age > 60">老年人（60以上）</span>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      age:40   // 初始化 age 变量值为 40
    },
    methods:{  // 方法部分为空

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

Vue常用指令综合应用案列

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VueExeclDemo</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <table border="1" cellspacing="0" width="60%">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>score</th>
        <th>level</th>
      </tr>
      <!-- 使用 Vue 的指令 v-for 对用户数组进行循环渲染 -->
      <tr align="center" v-for="(users, index) in users">
        <td>{{index+1}}</td>
        <td>{{users.name}}</td>
        <td>{{users.age}}</td>
        <td>
          <!-- 根据用户的性别，显示不同的文本 -->
          <span v-if="users.gender === 1">Male</span>
          <span v-else>Female</span>
        </td>
        <td>{{users.score}}</td>
        <td>
          <!-- 根据用户的分数，显示不同的等级 -->
          <span v-if="users.score >= 85">A</span>
          <span v-else-if="users.score >= 60">B</span>
          <span style="color:red" v-else>C</span>
        </td>
      </tr>
    </table>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      // 定义用户数组，包含每个用户的信息
      users: [{
        id: 1,
        name: 'TOM',
        age: 18,
        gender: 1,
        score: 90,}, {
        id: 2,
        name: 'Jerry',
        age: 19,
        gender: 2,
        score: 85,}, {
        id: 3,
        name: 'Lily',
        age: 20,
        gender: 1,
        score: 95,}, {
        id: 4,
        name: 'Lucy',
        age: 21,
        gender: 2,
        score: 80,}, {
        id: 5,
        name: 'Mike',
        age: 22,
        gender: 1,
        score: 59,}
      ]
    },
    methods: {
      // 这里可以添加 Vue 的方法
    }
  })
</script>
</html>