vue.js(1)学习vue.<meta name="viewport" content="initial-scale=

vue.js(1)学习

简单来做一个渲染：

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        {{ message }}
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1',
        data: {
            message: '你好 Vue!'
        }
    })
</script>

这个时候，我们把数据绑定到 DOM 文本上了

绑定以后如果需要改数据，我们就可以直接修改值就变化了。参考下面代码：
test1.message = “需要改变的值”;


    setTimeout(() => {
        test1.message = "变化";
    }, 2000);

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        {{ message }}
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1',
        data: {
            message: '你好 Vue!'
        }
    })

    setTimeout(() => {
        test1.message = "变化";
    }, 2000);

</script>

这个效果如果用原生js，就要写很多代码了。