Vue屬性和方法

時間 2020-09-22

標籤 vue 屬性方法简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>屬性和方法</title>
    </head>
    <script type="text/javascript" src="js/vue.js" ></script>
    <body>
        <div id="div1">
            `msg`
            <h1 ref="hello">你好</h1>
            <h2 ref="world">世界</h2>
            <h3 ref="content">`content`</h3>
        </div>
    </body>
    <script>
        // let vm = new Vue({
        //     el: "#div1",
        //     data:{
        //         msg:'hello world'
        //     },
        //     name:'恆大足球',
        //     show:function(){
        //         alert('hello');
        //     }
        // });
        
        // 屬性
        // 獲取data屬性
        // console.log(vm.$el);//獲取DOM對象
        // vm.$el.style.color = 'blue';  //修改DOM樣式
        // console.log(vm.$data.msg);  //獲取數據對象data
        // console.log(vm.$options); //獲取自定義屬性
        // console.log(vm.$options.name);  //獲取自定義值
        // vm.$options.show();  //調用自定義方法
        // console.log(vm.$refs.hello);
        // vm.$destroy();  //銷燬實例
        // vm.name = '國足';
        // console.log(vm.$options.name);
        let vm_obj = new Vue({
            data:{
                msg:'程序猿',
                content:'這是內容'
            }
        }).$mount('#div1');  //掛載實例
        vm_obj.content = '這是改變後的內容';
        //DOM尚未及時更新完，Vue實現響應式並非數據發生以後DOM當即變化
        vm_obj.$nextTick(function(){
            //DOM更新完成後再執行此代碼
            console.log(vm_obj.$refs.content.textContent);
        })
    </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。