Vue 中el和data的两种写法

最新推荐文章于 2024-05-11 07:19:05 发布

YonChao

最新推荐文章于 2024-05-11 07:19:05 发布

阅读量479

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44141172/article/details/121339467

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue实例中el绑定的两种写法：

直接使用el标签去指定容器的id

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
    </div>
    
    <script type="text/javascript">
        /* 开发环境提示关闭 */
        Vue.config.productionTip = false

        /* new一个Vue */
        new Vue({
            //容器
            /* el用于指定当前实例为那个容器服务，值通常为css选择器字符串 */
            el:'#root',
            //数据,提供给el对应的容器去使用
            data:{
                
            }
        })
    </script>
</body>

2.使用Vue对象去接收，然后使用$mount("#id")的方法去绑定容器。这种的比较灵活，可以不直接去绑定绑定，可以做一些操作之后在进行绑定。

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
    <h1>Hello，{{name}}</h1>
    </div>
    
    <script type="text/javascript">
        /* 开发环境提示关闭 */
        Vue.config.productionTip = false

        /* new一个Vue */
        const v = new Vue({
            //数据
            data:{
                name:"王永超"
            }
        })
        //不使用el而使用这种方式也能绑定。
        //这样子写比较灵活。
        v.$mount("#root")
    </script>
</body>

Vue实例中data的两种写法：

1.直接写json形式的数据。对象式。

        /* new一个Vue */
        new Vue({
            //容器
            /* el用于指定当前实例为那个容器服务，值通常为css选择器字符串 */
            el:'#root',
            //数据,提供给el对应的容器去使用
            data:{
                name:"张三"
            }
        })

2.在data中是一个函数，它的返回值必须是一个对象，即函数式。

 /* new一个Vue */
        const v = new Vue({
            //数据
            data:function() {
                return{
                    name:"李四"
                }
            }
        })

或者直接不写function()

const v = new Vue({
            //数据
            data:{
                return{
                    name:"李四"
                }
            }
        })

ps:在后面使用到组件的时候，使用函数式的方式比较多一点。

YonChao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 中el和data的两种写法

Vue实例中el绑定的两种写法：直接使用el标签去指定容器的id<body>  <div id="root"> </div> <script type="text/javascript"> /* 开发环境提示关闭 */ Vue.config.productionTip = false /* new一个Vue */
复制链接

扫一扫