Vue.js框架学习—el和data的两种写法

数据发现者

于 2022-09-29 09:47:56 发布

阅读量307

点赞数

分类专栏： Vue框架学习文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_45237668/article/details/127100543

版权

本文详细介绍了Vue.js框架中el和data的两种常见写法，包括在创建Vue实例时配置el属性以及通过vm.$mount指定el，以及data的函数式和对象式写法的区别和用法。

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

el和data的两种写法

在这里插入图片描述

一、el的两种写法

1、创建Vue实例的时候配置el属性。

<body>
    <div id="root">
        <h1>你好，{
  {name}}</h1>
    </div>
</body>
<script>
    new Vue({
     
        el:'#root',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

数据发现者

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js框架学习—el和data的两种写法

Vue.js框架学习—el和data的两种写法
复制链接

扫一扫

专栏目录

dataset的使用(结合vue使用碰到了坑)

m0_51431448的博客

12-23

5076

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。 <div data-id="test">test</div> 这里的data-前缀就被称为data属性;我们可以通过dataset来获取data属性。下面是两个例子：例1： <body> <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div> <div id="div2" .

几个你不知道的技巧助你写出更优雅的vue.js代码

12-01

在Vue.js开发中，编写优雅且可维护的代码至关重要。以下是一些你可能不熟悉的技巧，可以帮助你提升Vue项目的质量。 1. **watch 与 computed 的巧妙结合** 在处理多个参数变化时，频繁地在watch中调用相同的方法...

参与评论您还未登录，请先登录后发表或查看评论

Vue基础用法

Forever_che的博客

08-21

447

Vue基础用法模板语法 mustache 语法中在支持写js 1.用法：内容：必须加{{ js语法 }} 属性：属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量给一个标签加一个自定义属性/已有属性 img中的src就是已有属性 <img src = "" /> //data-index就是自定义属性， web网页中建议我们使用data-形...

Vue的基础知识

wdadwa565的博客

11-15

707

1,通过v-on：click绑定事件 2,可以通过<li v-for="(item，index)of list"> </li> 3,在一个标签上某一个属性跟某一个数据绑定的话只能使用 v-bind:title="inputvalue" 4,组件如何接受传递过来的值：在组件上使用 v-bind:index 绑定想要传的值然后在组件内部通过 app. component( 'todo-item',{ props: ['content', 'index' ], template:

vue 在data中的变量动态添加index this[`groupData${index}`]

c_qianxia5040的博客

04-28

1889

data(){ return{ groupData1:[], groupData2:[] } } //方法 index为循环的下标 this[`groupData${index}`] = res2.data

02-vue常用指令的基本使用

weixin_42699636的博客

09-01

124

一、Vue常用指令的基本使用： 1.1 v-on指令绑定事件：v-on:事件=“事件处理程序” 1.2 @符号简写方式绑定事件：@+事件（如：@click）往后的程序中常用简写方式来实现事件的绑定【说明】以上案例使用的@click来实现一个元素单击事件的绑定，往后所有事件都可以使用“@+事件”这样的方式来绑定一个事件，事件的实现简单而快捷。 1.3 v-show显示或隐藏指令：根据条件显示或隐藏元素，元素始终会被渲染并保留在 DOM 中。v-show 只是简单地使用display切换元素的none或

Vue.js 中的 v-show 指令及用法详解

10-17

Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的指令系统，帮助开发者轻松地处理视图层的动态性。本文将深入探讨Vue.js中的`v-show`指令...在实践中不断探索和学习Vue.js，你将能够更好地驾驭这个强大的框架。

Vue2 模板template的四种写法总结

08-27

Vue.js 是一款非常流行的前端框架，它以声明式的数据绑定和组件化开发为特点，极大地提高了Web应用的开发效率。在Vue2中，模板（Template）是构建组件的关键部分，用于定义视图层的结构。下面我们将详细探讨Vue2模板...

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

10-17

在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。首先，ElementUI的`el-table`组件通常通过`<el-table-...

vue学习笔记vue学习笔记

最新发布

08-14

在 Vue 中，El 和 data 有两种写法。第一种写法是使用对象式，例如 `Const vm = new Vue({el:'#root',data:{ //data 的第一种写法：对象式 name:'JoJo'}})vm.$mount('#root')`。第二种写法是使用函数式，例如 `new ...

33.Vue组件中的data数据属性

luzhensmart的专栏

12-01

2049

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met

vue对象中data的几种写法

蠢蠢欲动的猫

12-10

3715

4、vue对象中data的几种写法： 1）、直接用{} 一个object，在object里面写上属性（简单明了，直接进行操作） new vue({ el:"", data:{ name:"", age:"" } }) 2)、使用函数返回一个object对象（适用于组件传值，以及在返回之前进行一些其他的操作）函数的调用者 this 是vue这个对象 console.log(this) ------得到的是vue对象 new vue({

vue3学习随便记13

sjg20010414的专栏

12-17

284

过渡与动画进入过渡和离开过渡在插入、更新或从DOM移除项时，Vue提供了多种方法实现转换效果：自动为CSS过渡和动画应用class 集成第三方CSS动画库，例如Animate.css | A cross-browser library of CSS animations. 在过渡钩子期间使用 JS 直接操作 DOM 集成第三方 JS 动画库单个元素或组件的过渡 Vue提供了 transition 封装组件（内置组件），在下列情形下，可以给任何元素或者组件添加进入或离开过渡效果：使.

vue中的data-xx获取相应的值

qq_42112846的博客

03-15

9347

data-radius语法： data-属性我们可以去获取独立的标签当中标记为data-xx=""当中的值，也可以获取当循环遍历某个数组时，当前的值或者是当前数值的索引下面我们就来看一下具体的用法： 1，获取单个属性的值 //在当前div上定义一个点击事件 //当然这里的data-xx名字时可以自己定义的但是我们一般定义为与元素的值由对应意义的名字 <div @clic...

vue 设置标签data值，获取标签data参数