el与data的两种写法（未完全）

小鱼儿 2024-04-08 13:10 56阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
                <h1>你好，{
       {name}}</h1>
            </div>
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
                new Vue({
                  el:'#root',
                  data:{
                    name:'张靖奇'
                  }
    
                })
            </script>   
        </body>
    </html>

el的两种写法：

<script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
               const v= new Vue({
                //   el:'#root',   //el第一种写法
                  data:{
                    name:'张靖奇'
                  }
    
                })
                v.$mount('#root')  //el第二种写法   mount是挂载的意思
            </script>

data的两种写法：

第一种：

<script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
               const v= new Vue({
                  el:'#root',  
                //data的第一种写法，对象式
                   data:{
                    name:'张靖奇'
                 }
         
                })
                
            </script>

第二种：

<script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
               const v= new Vue({
                  el:'#root',  
    
                //data的第二种写法，函数式
                   data:function(){
                    return{
                        name:'张靖奇'
                    }
                   }
                })
                
            </script>

<script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
               const v= new Vue({
                  el:'#root',  
    
                //data的第二种写法，函数式
                   data(){
                    return{
                        name:'张靖奇'
                    }
                   }
                })
                
            </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 Thymeleaf中data-th-和th:两种写法说明

常遇见 th:fragment ="footer"的写法，突然看见data-th-fragment="footer",当时有点懵逼，找了好久资料才看到这个说法，记录一下方...

傷城~/ 2024年04月18日 10:17/ 0 赞/ 62 阅读

相关 el与data的两种写法（未完全）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

小鱼儿/ 2024年04月08日 13:10/ 0 赞/ 57 阅读

相关 Vue框架学习笔记——Vue实例中el和data的两种写法

文章目录前文提要 Vue实例的el 第一种写法第二种写法小结 Vue实例中data 第一种写法

迈不过友情╰/ 2024年02月17日 09:35/ 0 赞/ 63 阅读

相关 vue中el和data的两种写法

首先做一个简单的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-

绝地灬酷狼/ 2023年09月26日 10:15/ 0 赞/ 68 阅读

相关 el与data的两种写法

> Vue实例使用一个变量来接收由 Vue() 这个构造函数生成的 Vue实例对象，我们看看实例对象上有什么 const vm = new Vue({

我就是我/ 2022年09月14日 09:47/ 0 赞/ 260 阅读

相关 vue的两种写法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti

旧城等待，/ 2022年09月10日 12:11/ 0 赞/ 271 阅读

相关两种Ajax写法

Ajax:(Asynchronous Javascript And XML)简称为异步的js和xml js中有两种写法： //原生js写法 functio

﹏ヽ暗。殇╰゛Y/ 2022年03月28日 15:11/ 0 赞/ 319 阅读

相关 ajax的两种写法

一、原生ajax的实现 1.什么是ajax？ ajax是异步的javas和xml（ Asynchronous JavaScript And XML）。通过在后台与服务器

古城微笑少年丶/ 2022年03月27日 05:37/ 0 赞/ 376 阅读

相关 Thymeleaf中 data-th-* 和 th:* 两种写法

经常遇见 th:fragment ="footer"的写法，突然看见data-th-fragment="footer",当时有点懵逼，找了好久资料才看到这个说法，记录一下方便回

朴灿烈づ我的快乐病毒、/ 2021年11月10日 09:16/ 0 赞/ 292 阅读

相关 animate两种写法

animate.css <image class="logo animate__animated " :class="{ animate_

绝地灬酷狼/ 2021年07月25日 17:33/ 0 赞/ 556 阅读