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

最新推荐文章于 2024-09-13 14:34:15 发布

我爱布朗熊

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量133

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126568935

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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>