vue中el和data的两种写法

已于 2022-11-09 20:37:24 修改
阅读量910 收藏 2
点赞数 4
分类专栏： Vscode Vue 文章标签： vue.js 前端 javascript
于 2022-10-06 22:49:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46713508/article/details/127189140
版权
Vue 同时被 2 个专栏收录
83 篇文章 13 订阅
订阅专栏
Vscode
18 篇文章 3 订阅
订阅专栏

首先做一个简单的效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好,{{name}}!</h1>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue'
            }
        })
    </script>
</body>

</html>

查看页面，发现name被插值进去了，控制台也没有错误

在这里插入图片描述
按照我们的写法，是通过el和容器进行关联，其实不用写el属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好,{{name}}!</h1>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        //el的两种写法
        const v=new Vue({
            //第一种写法 直接使用eq关联容器
            //el:'#root',
            data:{
                name:'vue'
            } 
        }) 
        //第二种写法使用mount指定容器，相比于第一种写法，这种写法更加的灵活
        //mount意为挂载
         v.$mount("#root")
        console.log(v)
    </script>
</body>

</html>

el的第一种写法

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好,{{name}}!</h1>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        //data的两种写法
        const v=new Vue({
            //第一种写法：对象式
            el:'#root',
            data:{
                name:'vue'
            } 
        }) 
     
     
    </script>
</body>

</html>

el的第二种写法

先创建vue实例，随后再通过vm.$mount(‘#root’)指定el的值

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好,{{name}}!</h1>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        //el的两种写法
        const v=new Vue({
            //第一种写法 直接使用el关联容器
            //el:'#root',
            data:{
                name:'vue'
            } 
        }) 
        //第二种写法使用mount指定容器，相比于第一种写法，这种写法更加的灵活
        //mount意为挂载
        v.$mount("#root")

      
     


    </script>
</body>

</html>

data的第一种写法

对象式：直接创建对象在data中写属性
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好,{{name}}!</h1>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        //data的两种写法
        const v=new Vue({
            //第一种写法：对象式
            el:'#root',
            data:{
                name:'vue'
            } 
        }) 
     
  

    </script>
</body>

</html>

data的第二种写法

函数式：编写一个函数且必须返回一个对象，对象里面的数据，就是你所需要的,这种写法虽然麻烦，但是更灵活，通常配合组件使用
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好,{{name}}!</h1>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        const v=new Vue({
            //第二种写法：函数式，编写一个函数且必须返回一个对象，对象里面的数据，就是你所需要的
            //这种写法虽然麻烦，但是更灵活，通常配合组件使用
            el:'#root',
            data(){
                //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了
                console.log(111,this)
                // 这个函数是vue自动帮我们调用的
                return{
                    name:'张三丰'
                }
            }
            
        }) 

    </script>
</body>

</html>

注意事项

由vue管理的对象，一定不要写箭头函数，不然this就不是vue实例了
比如现在有一个箭头函数，我们打印this对象

 data:()=>{
                //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了
                console.log(111,this)
                // 这个函数是vue自动帮我们调用的
                return{
                    name:'张三丰'
                }
            }

在这里插入图片描述
控制台显示this是一个全局的window对象，而不是vue实例

在这里插入图片描述

我们改成普通函数再试试

 data(){
      //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了
     console.log(111,this)
     // 这个函数是vue自动帮我们调用的
      return{
      name:'张三丰'
       }
   }

在这里插入图片描述
this就变成了vue实例了
在这里插入图片描述

总结

data和el的两种写法

1 el有两种写法
(1).new vue的时候配置el属性
(2).先创建vue实例，随后再通过vm.$mount(‘#root’)指定el的值

2 data有两种写法
(1)对象式
(2)函数式
如何选择：目前哪种写法都可以，如果使用组件，data必须使用函数式，否则会报错

3 一个重要的原则
由vue管理的对象，一定不要写箭头函数，不然this就不是vue实例了

小花皮猪
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
const data彻底研究
01-02
对c++中const data所代表的含义进行了刨根问底
简单理解Vue的data为啥只能是函数
不定时分享最优质的网络技术与教程，满满的干货。
12-15 314
在学习vue的时候vue2只有在组件中严格要求data必须是一个函数，而在普通vue实例中，data可以是一个对象，但是在vue3出现后data必须一个函数，当时看着官方文档说的是好像是对象的引用问题，但是内部原理却不是很了解，今天通过一个简单的例子来说明为啥data必须是一个函数。
vue day1 学习总结
weixin_45100140的博客
08-23 179
总结 vue day1 1.3 Nodejs&Npm安装 node自带npm（安装了node也就有npm了） 1.3.1 安装NodeJs 官方网站查找下载 https://nodejs.org/en/download/ 下载后直接安装(傻瓜式,不解释) [外链图片转存失败(img-5YoDAjDm-1566498527476)(https://note.youdao.com/y...
const的几个用法
iteye_16942的博客
06-10 297
（1）const定义常量: const dataType constData=value;//const修饰的类型为dataType的变量value不可变. （2）指针中使用const，主要有三种方式 a.指针本身是常量,它本身不可变 char* const ptr; b.指针所指向的内容是常量，指向的内容不可变...
vue数据列表渲染
qq_23744567的博客
04-01 154
vue数据渲染 第一步：获取数据 methods: { async getFaultList() { const falutlist = await getFaultList({ whe: '' }); //后面是根据要求穿的字段 this.falutlistInfo = falutlist.lst; //data里面创建的对象要加上this. }, } 第二步：执行函数 created() { this.getFaultList(); }, 第三部：在data创建
ES对象声明新方法
oMangGuoBuDing1的专栏
06-03 1171
取出response对象中的data bian'liang const{data}=response
关键字：Const，Const函数，Const变量，函数后面的Const
wangwenwen的专栏
08-01 510
[转]关键字：Const，Const函数，Const变量，函数后面的Const 看到const 关键字，C++程序员首先想到的可能是const 常量。这可不是良好的条件反射。如果只知道用const 定义常量，那么相当于把火药仅用于制作鞭炮。const 更大的魅力是它可以修饰函数的参数、返回值，甚至函数的定义体。const 是constant 的缩写，“恒定不变”的意思。被const 修饰的东西都受
Vue笔记(1)
qq_18594435的博客
07-26 340
vue学习笔记，仅供参考
Vue笔记(4)-组件
qq_18594435的博客
08-02 1148
vue个人笔记
Vue知识点
const_ly的博客
03-20 425
1. Vue的生命周期理解 Vue的生命周期一共分为8个阶段，分别为创建前/后，载入前/后，更新前/后，销毁前/后 1. 创建前后：在beforeCreate阶段，vue实例的挂载元素$el和数据对象data都为underfined，还在初始化。在created阶段，vue实例对象data创建完成，$el还没有完成。 2. 载入前后：在beforeMount阶段，vue实例的$el也初始化完...
Vue2 模板template的四种写法总结
01-21
如下所示： 我是直接写在构造器里的模板1 </div> 我是选项模板3 </template> [removed] 我是script标签模板4 [removed] ... var vm=new Vue({ el:#app, data:{ ... //第2种模板 写在构造器
data与el的2中写法：.md
07-20
data与el的2中写法：.md
vue组件的写法汇总
11-27
常见的vue组件写法有四种，各有特色，适用于不同的场景。 1、全局组件 结构： // 组件的注册 Vue.component( 'componentName', { template: // 组件的html结构, data(){ return{ // 组件中的属性 } }, ...
vue里的data要用return返回的原因浅析
12-08
官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 ...data() { ...为什么要把data变成函数并return属性呢？...组件是一个可复用的实例，...PS：下面看下vue中data是否使用retu
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： ... <el data=tableData xss=removed> <el prop=date label=日期 width=180> </el> <el prop=name label=姓名 width=180> </el> <el-table-
const用法详解
FanBrother的博客
12-09 653
这篇是复习时，参考《C++语言程序设计（第四版）》写的学习笔记。可能对个人的意义更大一些。都是很基础的知识，不适合已经熟练使用了编程语言的人看。就这样。首先，const的使用意义在于，完美的解决了数据共享与保护的问题。所以个人觉得还是面向对象编程很重要的一个部分。常对象，就是给类的对象加个const呗。规矩还是有几个但是相对简单。 第一、常对象必须初始化，就是在定义的时候就必须给他赋值。为啥子？因
const
weixin_33725272的博客
11-03 94
const const主要是为了程序的健壮型,减少程序出错. 最基本的用法: const int a=100; b的内容不变,b只能是100也就是声明一个int类型的常量(#define b =100) int const b=100; //和上面作用一样 const指针和引用一般用在函数的参数中 int* m = &a...
JS数据处理
qq_42048638的博客
08-28 883
替换属性名相同的对象的值 当新数据为对象时可以直接使用map替换 const data = [{id: 1, value: 1}, {id: 2, value: 2}, {id: 3, value: 3}]; const newData = {id: 3, value: 50} const res = data.map(item => item.id === newData.id ? newData : item); console.log(res) // 0: {id: 1, val
const {data:res} = await login(this.loginForm)
xiao_xiao_o的博客
07-06 6302
这是es6中对象的解构赋值。 es6中对象的解构赋值： let [a,b,c] = [1,2,3]; a //1 b //2 c //3
vue data写法
最新发布
09-14
无论你选择哪种写法，最终的结果都是在Vue实例中定义了一个名为data的属性，并且该属性的值是一个包含name和age属性的对象。这样，在Vue实例中就可以通过this.data.name和this.data.age来访问和修改这些属性的值了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小花皮猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值