Vue-声明式渲染

最新推荐文章于 2024-04-17 19:25:06 发布

是Ryan吖

最新推荐文章于 2024-04-17 19:25:06 发布

阅读量298

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45497246/article/details/104903167

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<body>
    <div id='app'>{{content}}</div> //通过插值表达式{{}}调用data里的数据进行渲染
    <script>
        // var dom = document.getElementById('app');
        // dom.innerHTML = 'hello world' //这两句代码和下面的vue实例产生的效果一样
        var vm = new Vue({
            el:'#app',//表示让这个vue实例去接管id为app的div标签里的内容
            data: {  //vue实例里定义了一组data数据，里边有content对象，内容为'Hello World'
                content:'Hello World'
            }
        })
    </script>
</body>

data的作用是：定义一些数据
el的作用是：限定vue实例接管（处理）的dom的范围

数据和 DOM 已经被建立了关联，所有东西都是响应式的

        // var dom = document.getElementById('app');
        // dom.innerHTML = 'hello world'
        // setTimeout(function(){
        //     dom.innerHTML = 'bye world'
        // },2000) //这段操作dom的代码产生效果和以下vue的代码一样

        setTimeout(function(){
            app.$data.content = 'bye world' //修改 vue的实例对象（app）中$data（也就是data对象的别名）的content数据
        },2000)

vue不需要注重dom的操作，而是把精力集中在数据的管理
数据放的是什么，页面展示的就是什么；
数据改变，页面也随之改变。

是Ryan吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<body> <div id='app'>{{content}}</div> //通过插值表达式{{}}调用data里的数据进行渲染 <script> // var dom = document.getElementById('a...
复制链接

扫一扫