创建Vue对象和v-for

最新推荐文章于 2024-04-27 20:35:11 发布
最新推荐文章于 2024-04-27 20:35:11 发布
阅读量1k 收藏
点赞数
分类专栏： # Vue 文章标签： 创建Vue对象 v-for
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43613849/article/details/117381490
版权

目录

创建Vue对象

1. 实例选项的使用

2. components的使用

3. data的正确打开方式

v-for（响应式）

1.迭代普通数组

2.迭代对象数组

3.迭代对象

4.迭代数字

 

创建Vue对象

1. 实例选项的使用

var my = new Vue({
  el: '#app',
  template: '<div>{{ fruit }}</div>',
  data: {
    fruit: 'apple'
  }
})

这个options中可以包含哪些选项呢？ 详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

目前掌握这些选项：

  • el: 类型：string | HTMLElement

       作用：决定之后Vue实例会管理哪一个DOM。

  • data: 类型：Object | Function （组件当中data必须是一个函数）

           作用：Vue实例对应的数据对象。

  • methods: 类型：{ [key: string]: Function }

                 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

2. components的使用

import Vue from 'vue'
import App from 'App.vue'
new Vue({
  el: 'body',
  components: { App }
})

实例化一个根组件 Vue ， 通过el挂载到body上。
从App.vue中引入App子组件，App是Vue的子组件，Vue又挂载到body上，所以App就被挂载到了body上。

3. data的正确打开方式

data使用时要避免引用赋值，如这样：

 

//不推荐的方法
 data : {
     d : 5,
     b : 8,
     fruit: 'apple'
}

如果一个组件在项目中被多次引用，在一个组件中改变data的值，其余组件也会改变，所以要用function返回数据就可避免这种情况。如这样：

 

//推荐的方法
 data ()  {
   return {
     d : 5,
     b : 8,
     fruit: 'apple'
    }
}

v-for（响应式）

1.迭代普通数组

  • 在data中定义普通数组
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['海贼王', '火影忍者', '妖精的尾巴', '快乐星球']
      }
    })
  • 在html中使用 v-for 指令渲染
<div id="app">
    <ul>
      <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

2.迭代对象数组

  • 在data中定义对象数组
const app = new Vue({
      el: '#app',
      data: {
        obj: [
          { id: 1, name: '海贼王' },
          { id: 2, name: '火影忍者' },
          { id: 3, name: '妖精的尾巴' },
          { id: 4, name: '快乐星球' }]
      }
    })
  • 在html中使用 v-for 指令渲染
<div id="app">
    <ul>
      <li v-for="(item,i) in obj">id={{item.id}},,,,,,,,name={{item.name}},,,,,,,,i={{i}} </li>
    </ul>
</div>

3.迭代对象

  • 在data中定义对象
const app = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼.贾',
          gender: '男'
        }
      }
    })
  • 在html中使用 v-for 指令渲染
<div id="app">
    <ul>
      <li v-for="(val,key) in user">键是--{{key}},,,,,,,,值是--{{val}}</li>
    </ul>
  </div>

4.迭代数字

<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>

完整代码

<!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">
    <ul>
      <li v-for="item in movies">{{item}}</li>
    </ul>
    <ul>
      <li v-for="(item,i) in obj">id={{item.id}},,,,,,,,name={{item.name}},,,,,,,,i={{i}} </li>
    </ul>
    <ul>
      <li v-for="(val,key) in user">键是--{{key}},,,,,,,,值是--{{val}}</li>
    </ul>
    <p v-for="count in 10">这是第{{count}}次循环</p>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        movies: ['海贼王', '火影忍者', '妖精的尾巴', '快乐星球'],
        obj: [
          { id: 1, name: '海贼王' },
          { id: 2, name: '火影忍者' },
          { id: 3, name: '妖精的尾巴' },
          { id: 4, name: '快乐星球' }],
        user: {
          id: 1,
          name: '托尼.贾',
          gender: '男'
        }
      }
    })
  </script>

</body>

</html>


参考链接：
https://www.jianshu.com/p/741fc1001db2

https://blog.csdn.net/xukongjing1/article/details/81584890

https://www.bilibili.com/video/BV1H7411j7Mc

Doe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-06-组件化
wsssq_的博客
04-23 1107
组件使用步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、组件模板的分离写法、组件中的数据存放、父子组件的通信
Vue基础语法（三）
申小兮和林小兮的博客宝
10-23 676
Vue的监听，组件的创建，语法糖，全局组件、局部组件，父组件、子组件，模板抽离写法，组件数据
vue创建对象的方式
最新发布
B__B_B的博客
04-27 275
【代码】vue创建对象的方式。
vue 对象中插入新对象
u013798595的博客
03-26 326
【代码】vue 对象中插入新对象。
VUE的基本用法
weixin_60232967的博客
08-28 258
一.MVC思想说明 二.VUE的基本用法 2.1基本案例 <body> <!-- 基本语法 --> <div id="app"> {{msg}} </div> <!-- 1.导入js类库 --> <script src="../js/vue.js"></script> <!-- 2.创建vue对象 --> <script> const app = ne.
vue学习笔记二：vue开发基础上
jinyeran的博客
09-24 1789
tips：vs code中，对HTML页面结构初始化方法为：先输入！然后按tab键。 操作步骤： 1.引入vue.js 2.定义一个div
VUE中v-model和v-for指令详解
12-07
总结来说，`v-model`和`v-for`是Vue.js中的核心概念，它们帮助开发者轻松实现数据绑定和列表渲染。`v-model`使得双向数据绑定成为可能，而`v-for`则允许我们高效地遍历数据结构并动态生成UI。理解并熟练运用这两个...
vue2.0使用v-for循环制作多级嵌套菜单栏
08-27
总之，掌握如何在Vue2.0中使用`v-for`循环制作多级嵌套菜单栏，将有助于你在构建用户界面时更有效地组织和展示数据，提高用户体验。不断探索和实践，你将能够创建出更加丰富和功能强大的菜单系统。如果有任何疑问或...
vue使用v-for实现hover点击效果
10-17
在Vue.js中，我们可以利用其强大的数据绑定和事件处理能力来实现复杂的功能，比如在使用`v-for`循环遍历列表时，同时实现鼠标悬停（hover）和点击效果。`v-for`指令用于渲染列表或数组，而`v-on`指令（通常简写为`@`...
vue2和vue3的v-if与v-for优先级对比学习
10-14
在这篇文章中，我们将深入探讨Vue 2.x和Vue 3.x中v-if和v-for这两个关键指令的优先级差异，以及如何在实践中更好地利用它们。 首先，v-if和v-for都是Vue中的条件指令，但它们的作用不同。v-if用于条件渲染，只有当...
vue v-for直接循环数字实例
10-16
在Vue中，`v-for` 指令是用于遍历数组、对象或数字的工具，使得我们可以轻松地渲染列表或者进行重复操作。在这个实例中，我们将详细探讨如何使用 `v-for` 直接循环数字。 在Vue中，`v-for` 的基本语法是这样的： `...
Vue2，部分指令的认识（含小练习）
qq_45188736的博客
02-08 496
一、Vue初体验 1.1 Vue安装 引入 外网链接，可以去BootCDN获取 <script src=""> npm安装到本地 npm install vue@2.6.14 <script src="../node_modules/vue/dist/vue.js"> 注意：在2022年Vue如果不加版本号默认下载最新3X的版本 1.2 第一个Vue程序 <body> <span id="aaa" >{{msg}}</span> &
Vue —— 创建响应式对象的四种方式对比（reactive、ref、toRef、toRefs）
weixin_52148548的博客
05-31 3514
目录一、reactive二、ref三、reactive对比ref四、toRef五、toRefs六、一些问题 一、reactive reactive方法根据传入的对象，创建返回一个深度响应式对象（Proxy代理对象）。 reactive 会对传入对象进行包裹，创建一个该对象的 Proxy代理对象。它是源对象的响应式副本，不等于原始对象。它==“深层”==转换了源对象的所有嵌套property（属性） ，解包并维持其中的任何ref引用关系。 响应式对象属性值改动，不管层级有多深，都会触发响应式。新增和删除属
【JAVA】Vue
haoyu__的博客
08-18 610
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
Vue 基础应用
longlonglaobiao
06-23 349
VUE 实例 在我们使用 vue 之前我们需要事先得到 一个 vue 实例对象，我们需要传递一个对象用于描述你的 vue 实例。 const app = new Vue({}); DOM 相关 el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例 const app = new Vue({ el: "#app", // el: document.getElementById("app"), });
vue 基础知识点
z459148345的博客
03-01 511
vue 基础知识点 vue 的实例化对象创建 const app = new Vue({}) 挂载点 ***vue 的挂载点使用id选择器 *** vue 的挂载点必须是一个具体的元素， 不能是body或者是HTML标签 官网定义： 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。 通过el属性设置挂载点 const app = new Vue({ el:"#app" }) 通过 $mo
VUE创建使用组件的5种方式
qq_37196621的博客
03-11 359
第一种 // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg'...
vue.js入门(一)创建vue对象和常用指令及使用示例
格乄子
03-13 6890
Vue官网中文网：https://cn.vuejs.org/ 一、创建一个Vue对象 var vm = new Vue({ el: '#example',//定位操作对象，即需要渲染的div，里面包括需要用vue渲染的控件 data: {//数据json或者json数组的嵌套格式 myData:[],
(vue)给对象中添加属性，新对象在另一个页面展示
nyf_unknow的博客
07-06 729
(vue)给对象中添加属性，新对象在另一个页面展示
vue2的v-for
01-17
在上面的例子中，v-for指令将遍历名为object的对象，并为每个键值对创建一个div元素。value是当前键值对的值，key是当前键值对的键，index是当前键值对的索引。 注意：在使用v-for时，需要为每个循环项提供一个唯一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值