ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

el和data的两种写法

2022-06-15 00:00:16  阅读:113  来源: 互联网

标签:el Vue name data root 写法


<!DOCTYPE html> <!-- el-data的两种写法 --> <html>     <head>         <meta charset="utf-8" />         <title>数据绑定</title>         <!--引入vue-->         <script type="text/javascript" src="../js/vue.js"></script>     </head>     <body>         <!-- data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 U英", (2).先创建Vue实例,随后再通过vm.$mount( ' #root ')指定el的值。 2.data有2种写法 (1).对象式(2).函数式 如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。 3.一个重要的原则:I 由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。         -->
        <!--准备好一个容器-->         <div id="root">             <h1>你好,{{name}}</h1>         </div>     </body>     <script type="text/javascript">         Vue.config.productionTip = false//阻止vue在启动生成生产提示         //el的两种写法         // const v = new Vue({         //     //el:'#root',第一种写法         //     data:{         //         name:'尚硅谷'         //     }         // })         // console.log(v)         // setTimeout(()=>{         //     v.$mount('#root')//第二种写法         // },1000);//异步延迟
        //data两种写法         new Vue({             el:'#root',             // data的第一种写法:对象式             // data:{             //     name:'尚硅谷'             // }             // data的第二种写法:函数式                 data:function(){                     console.log('@@@',this)//此处的this是vue实例对象                     return{                         name:'尚硅谷'                     }                 }         })     </script> </html>

标签:el,Vue,name,data,root,写法
来源: https://www.cnblogs.com/xxz-sky/p/16376894.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有