Vue3 学习笔记，快速初始化Vue项目及 data 函数用法学习(二)

ztj100 2024-12-31 15:58 18 浏览 0 评论

快速初始化Vue项目

在学习之前，我们先通过引入JS文件的方式快速初始化一个 Vue 项目，首先我们先打开 VsCode 编辑器，具体步骤如下：

一、新建一个文件夹

二、新建index.html、style.css 和 index.js 文件

三、新建个lib目录，把下载好的 vue.global.js 文件放在这个目录下（下载地址：https://unpkg.com/vue@3.2.45/dist/vue.global.js）

完成后的目录结构如下：

--- index.html
--- index.js
--- lib 
    ---vue.global.js
--- style.css

四、然后回到 index.html 做一些代码编写工作：

通过一个！（感叹号）快速初始化一个 h5 页面代码
然后再 head 标签和 title 标签之间，引入 lib/vue.global.js 文件。
在 js 文件的下方引入 style.css 文件
在 body 中定义一个 id = app 的 div 容器
在body标签结束之前引入 index.js 文件

<!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.0" />
    <title>Vue项目初始化</title>
    <script src="/lib/vue.global.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

五、接下来回到 index.js 文件初始化 vue 实例，挂载到 id 等于 app 的实例中,代码如下

const app = Vue.createApp();
app.mount("#app");

到这里一个简单的 Vue3 项目就创建完了，接下来我们进入 data() 函数的学习。

如何理解 data() 数据状态函数

在 Vue.js 中，data 函数用于定义组件实例的状态。组件实例中定义的数据可以在模板中使用，也可以在组件的 JavaScript 逻辑中使用。

下面是一个例子，该组件有一个名为 message 的 data 属性：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '你好，前端达人!'
    }
  }
}
</script>

在上面的例子中，data 函数返回了一个对象，该对象中有一个名为 message 的属性。在模板中，可以使用 {{ message }} 来显示这个属性的值。

注意，data 属性必须是函数,这是固定用法。如果 data 属性是一个普通对象，那么所有组件实例将共享同一个数据对象，在多个组件实例中使用同一个 data 对象将会导致问题。

另外，组件实例中定义的数据属性是响应式的，这意味着如果数据属性的值改变，那么对应的模板中的内容也将自动更新（响应式机制，稍后会介绍）。

通过data函数返回的对象，组件内部都能使用 this 访问到，如:

<template>
  <button @click="changeData">Change Data</button>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods:{
    changeData(){
      this.message = "new data";
    }
  }
}
</script>

在 Vue.js 中，data 函数用于定义组件实例的状态，返回的对象中的属性可以是任意类型的值，包括：

基本类型: 例如数字、字符串、布尔值等
数组: 例如 array
对象:例如 Object
甚至是函数

例如

data() {
    return {
      message: 'Hello, Vue!',
      count: 0,
      todos: [],
      user: {
        name: 'John Doe',
        age: 30
      },
      print: function(){
        console.log("data function")
      }
    }
  },

在上面的例子中, 定义了message,count,todos,user,print五个数据，分别是字符串，数字，数组，对象，函数。

Vue3 中你可以用 setup() 函数定义数据状态

在 Vue 3 中，可以使用 setup() 函数来定义组件的逻辑和状态。在 setup() 函数中，可以使用 reactive() 函数来创建一个响应式对象，它可以用来存储组件的状态。下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Vue 3 数据状态示例</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          const state = Vue.reactive({
            message: 'Hello Vue 3'
          });

          return {
            ...state
          }
        }
      });
      app.mount('#app')
    </script>
  </body>
</html>

HTML属性绑定 Data 中的值

当你想要绑定一个链接的 href 属性到 Vue 实例中的数据时，你可以这样做：

<a v-bind:href="url">Link</a>

这里的 v-bind:href 指令绑定了 Vue 实例中的 url 数据到链接的 href 属性上。当 url 数据更新时，链接的 href 也会更新。

同样也可以使用缩写:

<a :href="url">Link</a>

需要注意的是，当你绑定一个数据到 href 时，确保你绑定的是完整的URL，不然可能会被浏览器理解成相对路径。

基于 data 数据状态进行列表展示

在 Vue 中展示列表数据可以使用 v-for 指令。v-for 指令用于遍历数组中的数据并将其渲染到页面上。

假设你有一个名为 items 的数组，其中包含了要展示在页面上的数据，那么你可以在模板中使用 v-for 指令来遍历 items 数组并将每一项数据渲染到页面上。

例如:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

当你使用 v-for 指令来遍历数组中的数据时，你需要在指令中指定两个值：

第一个值是当前遍历到的数组元素，在上面的例子中是 item。
第二个值是数组本身，在上面的例子中是 items。

在指令中你可以使用这两个值来定义要渲染在页面上的元素。在上面的例子中，我们使用了一个 li 标签来渲染每一项数据，并在里面使用了一个插值表达式来展示每一项的 name。

在遍历数组时,为了避免vue重复渲染,你需要给每一个元素赋予一个唯一标识符。可以使用 v-bind 指令和 key 特性来为每一项绑定一个唯一的标识符，比如上面的例子中用了每一项的 id 来标识。

整体来说，使用 v-for 指令可以让你很容易地在 Vue 中遍历数组并将数据渲染到页面上。

在真实项目中还会经常使用 computed 和 methods 来获取数据进行展示, 也可以使用vuex进行状态管理。（在稍后的文章里会详细介绍）

基于条件展示 Data 数据

在 Vue 中一共有 4 种方式可以基于条件展示 Data 中的数据。

一、使用 v-if 指令。

v-if 指令用于根据条件判断是否渲染元素。当条件为 true 时，元素会被渲染，否则元素不会被渲染。

<template>
  <div>
    <p v-if="showData">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'This is my data',
      showData: true,
    };
  },
};
</script>

二、使用 v-show 指令。

v-show 指令与 v-if 指令类似，也用于根据条件判断是否渲染元素。唯一的区别是，v-show 指令会始终渲染元素，只是在条件为 false 时将元素隐藏。

<template>
  <div>
    <p v-show="showData">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'This is my data',
      showData: true,
    };
  },
};
</script>

三、使用三元运算符。

三元运算符可以在模板中直接使用条件判断并返回对应的值，从而达到条件展示数据的目的.

<template>
  <div>
    <p>{{showData ? data : "loading"}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'This is my data',
      showData: true,
    };
  },
};
</script>

四、使用计算属性 computed.

可以在 computed 里面进行条件判断，并返回对应的数据。

<template>
    <div>
        <p>{{computedData}}</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: 'This is my data',
                showData: true,
            };
        },
        computed: {
            computedData() {
                return this.showData ? this.data : "loading"
            }
        }
    };
</script>

这四种方法都可以在 Vue 中基于条件展示数据。

你可以根据自己的需求来选择使用哪一种方法。

v-if指令和v-show的区别在于，v-if会在第一次加载的时候，真正的去除不需要的元素，而v-show只是用CSS来控制元素的显示和隐藏。所以v-if会在第一次加载时对性能有影响，而v-show在第一次加载时不会对性能产生影响。

计算属性 computed 可以在数据发生改变时自动更新，性能会比在模板中使用三元运算符和方法好。

结束语

今天的文章就介绍到这里，感谢你的阅读，下一篇文章我将会继续介绍事件、computed 计算属性相关内容。

vue 数组添加元素

上一篇：Vue指令:v-for列表循环
下一篇：第5天 | 14天搞定Vue3.0，循环渲染，燃

Vue3 学习笔记，快速初始化Vue项目及 data 函数用法学习(二)

推荐阅读

快速初始化Vue项目

如何理解 data() 数据状态函数

Vue3 中你可以用 setup() 函数定义数据状态

HTML属性绑定 Data 中的值

基于 data 数据状态进行列表展示

基于条件展示 Data 数据

结束语

相关推荐

取消回复欢迎你发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

Vue3 学习笔记，快速初始化Vue项目及 data 函数用法学习(二)

推荐阅读

快速初始化Vue项目

如何理解 data() 数据状态函数

Vue3 中你可以用 setup() 函数定义数据状态

HTML属性绑定 Data 中的值

基于 data 数据状态进行列表展示

基于条件展示 Data 数据

结束语

相关推荐

取消回复欢迎 你 发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起