4. el与data的两种写法

最新推荐文章于 2023-08-02 18:03:22 发布

Sun Jiakai_凯

最新推荐文章于 2023-08-02 18:03:22 发布

阅读量262

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/s12345672/article/details/119704408

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

el与data的两种写法

data与el的两种写法:
      1. el的两种写法
          1.1 new Vue()时配置el属性 
          1.2 先创建Vue实例，随后再通过v.$mount('#root')指定el的值
      2. data的两种写法
          2.1 对象式
          2.2 函数式
      3. 一个重要原则：
          由Vue管理的函数，一定不要写函数箭头，一旦写了箭头函数，this就不再时Vue实例了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>el和data的两种写法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>                 
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>{{name}}</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            // //el的两种写法
            // const v = new Vue({
            //     //el: '#root',  //第一种写法
            //     data:{
            //         name: '刘恺威',
            //         url: 'http://www.baidu.com'
            //     }
            // })
            // v.$mount('#root')   //第二种写法

            //data的两种写法
            new Vue({
                el: '#root',  
                //第一种，对象式
                // data:{
                //     name: '刘恺威',
                // }

                //第二种，函数式
                data(){
                    console.log("@@", this) //此时的this是vue对象
                    return{
                        name: '刘恺威'
                    }
                }
            })
        </script>
    </body>
</html>

Sun Jiakai_凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 函数式 3. 一个重要原则：由Vue管理的函数，一定不要写函数箭头，一旦写了箭头函数，this就不再时Vue实例了&
复制链接

扫一扫