腾讯十天Vue.js课程之一：Vue.js介绍

xiaotututuer

于 2017-04-15 15:37:00 发布

阅读量618

点赞数

分类专栏： Vue; 文章标签： VueVue.js

本文链接：https://blog.csdn.net/xiaotututuer/article/details/70184821

版权

Vue; 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

腾讯十天Vue.js课程之一：Vue.js介绍

使用div元素作为模版，message作为响应式的数据绑定，当数据发生改变，立刻更新视图。。

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 实例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!--模版-->
    <div id="demo">
        <span v-on:click="clickHandler">{{message}}</span>
    </div>
    <script>
//        数据
        let obj = {
            message: "hello, Vue"
        };
//        声明式渲染
        var vm = new Vue({
            el: "#demo",//挂载元素
            data: obj,
            methods:{
                clickHandler(){
                    alert("click")
                }
            }
        });
        console.log(vm.$data);

	        var arr = [1,2,3,4,5];
        var newArr = [];
//        命令式
        for(var i = 0; i < arr.length; i++){
            newArr.push(arr[i]*2);
        }
        console.log(newArr);
//        声明式
        newArr = [];
        newArr = arr.map(function (item) {
            return item * 2;
        });
        console.log(newArr);



    </script>
</body>
</html>


MVVM模式双向数据绑定

xiaotututuer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
腾讯十天Vue.js课程之一：Vue.js介绍

腾讯十天Vue.js课程之一：Vue.js介绍使用div元素作为模版，message作为响应式的数据绑定，当数据发生改变，立刻更新视图。。 Vue 实例 {{message}} // 数据 let obj = { message: "hello
复制链接

扫一扫