代码编织梦想

el的俩种写法:

  • new Vue的时候配置el属性
  • 先创建Vue实例,随后在通过vm.$mount('#root')指定el的值

代码示例:

方法一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{date}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: {
            date: "今天是2023-03-29"
        }
    })
</script>
</body>
</html>

 方法二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{date}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        data: {
            date: "今天是2023-03-29"
        }
    })
    vm.$mount('#root')
</script>
</body>
</html>

data的俩种写法:

  • 对象式
  • 函数式

如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。 

代码示例:

方法一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: {
            day: "今天是2023-03-29"
        }
    })
</script>
</body>
</html>

方法二:

普通:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: function () {
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

简写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data() {
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了.

如下举例:

console.log打印的是vue这个实例对象:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: function () {
            console.log(this)
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

运行结果:

改成箭头函数试一试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    {{day}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: () => {
            console.log(this)
            return {day: "今天是2023-03-29"}
        }
    })
</script>
</body>
</html>

运行结果:

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_56444564/article/details/129829488

el与data的两种写法-爱代码爱编程

data与el的2种写法                     1.el有2种写法                                     (1).new Vue时候配置el属性。                                     (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el

4. el与data的两种写法-爱代码爱编程

el与data的两种写法 data与el的两种写法: 1. el的两种写法 1.1 new Vue()时配置el属性 1.2 先创建Vue实例,随后再通过v.$mount('#root')指定el的值 2. data的两种写法 2.1 对象式 2.2

Vue入门 - 4 el和data的两种写法-爱代码爱编程

文章目录 一、el和data的两种写法?1 el有两种写法2 data有两种写法3 一个重要的原则二、代码 一、el和data的两种写法? 1 el有两种写法 (1) new Vue的时候设置属性 (2) 先创建vue实例,再通过vue.$mount.('#root') 指定vue的值 2 data有两种写法 (1) 对象

Vue中el和data的两种写法-爱代码爱编程

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

Vue:el与data的两种写法-爱代码爱编程

data与el的2种写法 1.el的两种写法 (1)new Vue时候配置el属性 (2)先创建Vue实例,随后再通过vm.$mount(’#root’)指定el的值【可以对其进行一些操作】 2.data的两种写法 (1)对象式 (2)函数式 如何选择:学到组件时,data必须使用函数式,否则会报错 3.一个重要原则: 由Vue管理的函数,一定

Vue -- el 与 data 的两种写法-爱代码爱编程

Vue – el 与 data 的两种写法 小结 data 与 el 的两种写法: 1、el 的两种写法: 1)new Vue 时候配置 el 属性 2)先创建 Vue 实例,随后再通过 vm.$mount('#root') 指定 el 的值 2、data 的两种写法: 1)对象式

vue学习笔记4----el与data的两种写法_lazy91的博客-爱代码爱编程

el的两种写法 el 和 $mount,$mount 更灵活,用啥都行。 将容器与vue实例绑定起来。 <body> <div id="root"> <h1>hello,{{name}}</h1> </div> <script type="te

03el与data的两种写法_终是痴情负了空的博客-爱代码爱编程

data与e1的2种写法 1.e1有2种写法 (1) .new Vuel时候配置e1属性 (2).先创建Vue实例,随后再通过vm. $mount( ’ #root”)指定e1的值。 2.data有2种写法 (1).对象

vue - el和data的两种写法_鬼鬼骑士的博客-爱代码爱编程

文章目录 el的两种写法分析vue实例源码$mount举例el的第二种写法进化版 data的两种写法对象式函数式简写 认识this 讲师笔记 el的两种写法 一般写法,在new vue里面

从零学习vue - 02模板语法、el与data两种写法、mvvm模型、数据代理_邓兰花的博客-爱代码爱编程

root容器里的代码被称为模板,有了模板会有特殊的模板语法。Vue模板中语法有两大类,一类是插值语法,另一类是指令语法。 插值语法 功能:用于解析标签体内容。写法:{{xxx}},xxx为js表达式,且可以直接读取到data中的所有属性。 由两个大括号引用Vue实例中定义的data数据,在Vue实例进行解析扫描时会检查到他的模板语法,从而根据模板语法

vue—el与data的两种写法-爱代码爱编程

data与el的2种号法 1.el有2种写法 (1).newvue时候配置el属性。 (2).先创建vue实例。随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择:目前哪种写法都可以。以后学习到组件时,data必须使用函数式。否期会报错。 3.一个重要的原则:

05-el与data的两种写法-爱代码爱编程

1.el的第一种写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

【vue全家桶】组件系列(一)—组件开发基础-爱代码爱编程

【Vue全家桶】组件系列(一)—组件开发基础 文章目录 【Vue全家桶】组件系列(一)—组件开发基础前言一、注册Vue的组件1.1 注册全局组件1.2 组件的名称1.3 注册局部组件 二、Vue的开发模式三、单

vue中el与data的两种写法_vue el data-爱代码爱编程

Vue中el与data的两种写法 el的两种写法 new Vue的时候配置el属性 new Vue({ el: '#app' }) 先创建Vue实例,然后通过vm.$mount(‘#app’)指定el的值

vue中 el与data的两种写法_vue中el和data的写法-爱代码爱编程

el 与 data 的两种写法 el 的2种写法: 第一种:创建 Vue 实例对象的时候去配置 el 属性 第二种:先创建 Vue 实例,随后再通过 vm.$mount("#app") 指定 el 的值 data 的2种写法: 第一种:对象式:data:{ } 第二种:函数式:data() { return { } } 目前这些写法都可以,以

【vue2从入门到精通】vue监听器watch,计算属性computed,方法methods的区别及使用场景_vue2 methods-爱代码爱编程

文章目录 人工智能福利文章前言Vue 监听器 $watch定义及作用示例使用场景 Vue 计算属性 computed定义及作用示例使用场景 Vue 方法 methods定义及作用示例使用场景

使用chatgpt实现数字自增动画_num-爱代码爱编程

num-auto-add:数字自增动画 序言 我们经常在一些好的网站上遇到数字自增的动画效果,为用户提供了更加丰富的交互体验,看起来非常酷。 我之前也有写过,为了方便以后使用,打算将它优化,并上传到npm中。 首

vue3为什么要使用组合式api——vue3的组合式api和vue2的选项式api的优缺点_vue3用选项式还是组合式-爱代码爱编程

Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点 1、Vue2为什么使用选项式API2、Vue2如何使用组合式API3、组合式API Vs 选项式API4、vue3当中