vue中的el和data(){}简介及综合案例

已于 2022-02-06 23:59:23 修改
阅读量910 收藏 3
点赞数 2
分类专栏： Vue小白入门 文章标签： vue.js javascript 前端
于 2022-02-06 23:30:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45586870/article/details/122803005
版权

一、el简介

el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

二、data的简介

Vue 实例的数据对象。data本身是一个函数，但是返回是一个对象。

三、el和data综合案例如下:

①index.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
最低0.47元/天 解锁文章
我吃饭很慢.
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue前端框架 —— Vue 实例中 el 和 data 的两种写法
weixin_45661229的博客
08-29 1650
在 Vue 2.0 中创建 Vue 实例时，通常情况下与这两个配置项都是按照一种固定的方式写的，像下面这样。除了上面那一种常用写法之外，el 与 data 都分别有另一种写法。el 的另一种写法使用起来会更灵活，data 的另一种写法在组件中使用较为频繁。在原来代码的基础上将创建的 Vue 实例赋值给一个变量，官方推荐使用 "vm" 当做变量名。将 Vue 实例赋值给 vm 之后在控制台中输出一下 vm（ Vue 实例 ）下图就是 vm 的输出结果，输出结果为一个实例对象。展开后会出现很多以美元符号 '..
Vue中的数据监听和数据交互案例解析
12-29
现在我们来看一下vue中的数据监听事件$watch， js代码： new Vue({ el:#div, data:{ arr:[1,2,3] } }).$watch(arr,function () { alert(数据改变了) }) html代码： <input type=button value=...
vue实例中data使用return包裹
热门推荐
pobu168的博客
06-07 2万+
vue组件变量污染
vue中data()和data{}的区别
关北道.
07-08 1743
使用对象方式定义数据时，如果将一个组件作为另一个组件的子组件使用时，两个组件会共享同一个data对象，这就导致如果一个组件修改data对象属性的值，另一个组件中data对象相同属性的值也会修改，这个问题就是共享数据。但是使用函数方式定义数据事，每个组件示例都会调用一次data函数，返回一个新的data对象，这就避免了数据共享问题。在vue中，data用于定义组件中所用到的数据，可以使用函数或者对象的方式来定义。
Vue 组件的编写方式data(){}的含义
kelvin4587的专栏
12-13 1409
我看官方文档就是直接引用javascript方式的，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" ch...
vue中的 data(){}、components:{}、methods:{}、props:{}的使用方法
负数
01-14 9188
data(){}定义属性 ( 返回一个对象) components:{}（组件 要注册的组件） methods:{} （事件处理 点击函数所放置的位置） props:{} （父传子 数据传递） 应用 App.vue中 &lt;template&gt; &lt;ul&gt; &lt;my-li v-for="(item,index...
在vue中使用Base64转码的案例
10-14
这里展示了如何在Vue组件中使用`Base64.encode`进行编码和`Base64.decode`进行解码的方法。如果你需要在多个组件中复用这些方法，可以考虑在`main.js`中全局注册这些方法，这样在任何组件中都可以直接调用。 除了...
Vue3+element-plus+axios 综合小案例
最新发布
09-26
在这个综合小案例中，我们将探讨如何结合Element Plus UI库和axios HTTP客户端来构建一个功能丰富的前端应用。 首先，Vue3引入了Composition API，这是一个更加灵活和模块化的API，使得组件的状态管理和逻辑更加...
vue中的计算属性实例详解
10-17
在Vue.js中，计算属性（Computed Properties）是一个强大的特性，它允许我们定义基于其他数据（如Vue实例的数据属性或方法）的复杂逻辑，并在需要时自动更新。这使得我们的模板保持简洁，专注于展示数据，而将复杂的...
Vue 介绍以及如何使用，配有demo案例
02-25
- 通过`new Vue()`创建局部实例，定义`el`选项指定挂载元素，`data`选项声明初始数据。 3. **组件系统**： - 自定义组件是Vue的核心，通过`components`选项注册。 - 使用`props`接收父组件传递的数据。 - 子...
Vue之el和data基本使用
兮动人
02-08 1013
文章目录1. el：挂载点2. data：数据对象 1. el：挂载点 案例：分别用类、标签选择器来绑定挂载点 <body> <div id="app" class="app"> {{message}}<br> <span>{{message}}</span><br> <span>{{ message }}</span> </div>
Vue 中data 和 data() 区别
qq_41936561的博客
04-15 4016
Vue 中data 和 data() {return {};}区别 一般简单Vue实例(常见教程视频中) new Vue({ el: "#id", data: { message: "Vue实例" } }); 在组件化的项目中(我们在公司接触的项目) 一般会这么写 export default { name: "home"; data() { return { message: "组件化项目一般这样写~", ...... } } } 两者区别 在大型项目中 data
vue入门1：el 与 data
丙睦的进阶之路
01-16 596
深入研究VUE入门到放弃一般需要多长时间
vue.js基础--el与data
weixin_42738354的博客
10-08 251
学习网站：cn.vuejs.org 首先插入开发环境版本引入vue 一.el挂载点 el是用来设置Vue实例挂载（管理）的元素 1.Vue实例的作用范围： Vue会管理el选项命中的元素及其内部的后代元素 2.可以使用其他的选择器，但是建议使用ID选择器，用’#'表示 3.div标签可以用其他的双标签来替换，但是不能使用html和body <div id="app"> //ID选择器 {{ message }} </div> <!-- 开发环境版本，包含了有帮助的命令行警
vue 的data属性
liu1992452008的博客http://write.blog.csdn.net/configu
11-22 2374
我是刘洋 {{message}} // Vue.component('child' ,child1) Vue.component('my-div',{template:'#my_div',data(){//必须是函数在component里面 return{message:"啛啛喳喳错错错错"} }
Vue 06 - el与data的两种用法
m0_53753920的博客
04-01 690
el两种写法. 1. 创建vue时候配置el属性。2.先创建vue实例，后通过vm.$mount(’#root'）指定el的值。data两种写法. 1. 对象式. 2. 函数式.注意事项，由Vue管理的函数，不要写箭头函数，创建箭头函数之后，this就不是vue实例。
【Vue】el 和 data 的含义与两种写法
y_coder的博客
03-15 312
先创建 Vue 实例，随后再通过 $mount 方法来指定 el 的值。其中，mount 有挂载的意思，通俗来讲他的作用就是把 Vue 对象中的内容放到绑定的容器里面。
$refs，$el，$data，$options区别及用法
qq_39141511的博客
09-25 1376
1.$refs 作用跟jq的获取dom元素$一样 有三种用法： 1.ref加在普通的元素上，用this.$refs.(ref值)获取到的是dom元素 2.ref加在子组件上，用this.$refs.(ref值)获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法()就可以使用了。 3.如何利用v-for和ref获取一组数组或者dom节点 需要注意的点： 1.通过 :ref=某变量添加ref，如果想获取该ref时需要加[0]，如this.$refs[refs
Vue中el的理解
dongnihao的博客
10-12 1万+
Vue中的el，称之为挂载点。原理来自于：MVC架构中，使用一个标签当做容器包住一些标签，使得标签被重新渲染，同时保留一些必要的属性。 <body id="body"> {{ message }} <h2 id="app" class="app"> {{ message }} <span> {{ message }} </span> </h2> <!-- 开发环境版本，包含了有帮助的命令行警告 -->
vue el-upload使用，写个案例
06-07
当然，我可以帮你解决 Vue el-upload 的问题并提供一个开发案例。在 Vue 中使用 el-upload 进行文件上传非常简单，你只需要选择需要上传的文件，然后通过发送请求将其上传到服务器。 这里提供一个简单的案例： ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值