vue.js数据实例化

今天分享的内容主要是：
1、如何修改值，
2、阻止值发生变化freeze()，
3、打印输出新旧的值，watch()
4、以及$符号简单区分用户定义的变量

一切都在代码中~收藏学起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例化</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        {
   
   {a}}
    </div>
<!-- object.freeze()阻止修改现有的属性 -->
    <div id="app-2">
       <p>
           {
   
   {foo}}
       </p>
       <button v-on:click='foo="new"'>改变它</button>
    </div>
    <!-- 使用$前缀区分 用户定义的prop属性 -->
    <div id="app-3">
        {
   
   {message3}}
    </div>

    <script>
        var data = { a: 1 };
        var vm = new Vue({//vm就是英文缩写的实例vuemodel
            el: '#app',
            data: data//属性：变量对象
        });
        //data.a='hi'
        vm.$watch('a', function (newVal, oldVal) {
            console.log(newVal, oldVal);//控制台查看修改之前的值，以及输出新的值
        })
        vm.$data.a = 'test...'//修改a的值
        /***************************/ 
        var obj={
            foo:'原始值'
        }
        Object.freeze(obj)//阻止改变原有的属性值

        new Vue({
            el:'#app-2',
            data:obj
        })
        /***************************/ 
        var data = {message3:3}//给变量赋初值
        var vm=new Vue({
            el:'#app-3',
            data:data//啥意思来着。。。
        })

        console.log(vm.$data===data)//true
        console.log(vm.$el===document.getElementById('app-3'))//true

        vm.$watch('message3',function(newVal,oldVal){
            console.log(newVal,oldVal)
        })//结果：新的值 3
        vm.$data.message3='新的值'//新的值写在这里
    </script>
</body>

</html>

结果：
在这里插入图片描述

猜你喜欢