VUE概述 - pinkowonote

一、生命周期视图

二、vue是怎样改变dom元素的内容的

三、实例1：体验vue响应式程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="red">{{message}}</div>
    <div class="blue">
        <h1>{{light}}</h1>
        <h2>{{dark}}</h2>
    </div>
    <script>
        const app = new Vue({
            // el属性：决定Vue对象（app）会挂载到"#red"元素上去
            el:'#red',
            data:{
                message:'我是红色！'
            }
        })
        const app2 = new Vue({
            el:'.blue',
            data:{
                light:'我是浅蓝色',
                dark:'我是深蓝色'
            }
        })
    </script>
</body>

</html>

在console控制台可以直接进行数据的转变：

四、其他

1. const：定义变量

// const定义的可以改变里面的值
const ko = '1'；
ko = '5'

2. let：定义常量

// let定义的可以不可以改变里面的值
let ko = '5';
ko = '8' // X 报错，不能改变

posted on 2020-08-28 16:31 pinkowonote 阅读(143) 评论(0) 收藏举报

刷新页面返回顶部