视频地址

https://pan.baidu.com/s/1sndXz3Z?fid=380327865135528

笔记

<div id="app">
    <!--表单元素 input checkbox textarea radio select-->
    <!--vue的“指令”directive 只是dom上的行间属性,vue给这类属性赋予一定的意义 来实现特殊的功能 所有指令都以v-开头,value属性默认情况下会vue忽略掉 selected checked 都没有意义-->
    <!--v-model会将msg的值会赋予输入框，输入框的值改变了会影响数据-->
    <input type="text" v-model="msg">
    <!--Object.defineProperty ES5 -->
    <!--v-text === {{}} 防止{{}}出现在页面上-->
    <div v-text="msg"></div>
    <!--v-once 只绑定一次 当数据再次发生变化 也不导致页面刷新-->
    <div v-once>{{msg}} {{msg}}</div>
    <!--v-html 把html字符当作html渲染,一定是可以信任的html xss攻击-->
    <div v-html="p"></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        msg:'hello',
        p:'<h1>hello</h1>'
    }
})
</script>

<input type="text" id="input">
<script>
let obj = {};
let temp = {};
Object.defineProperty(obj,'name',{
    get(){ // 取obj的name属性会触发
        return temp["name"];
    },
    set(val){ // 给obj赋值会触发get方法
        temp["name"] = val; // 改变temp的结果
        input.value = val; // 将值赋予输入框
    }
});
input.value = obj.name; // 页面一加载时 会调用get方法
input.addEventListener('input',function () { // 等待输入框的变化
    obj.name = this.value; // 当值变化时会调用set方法
});
/*Object.defineProperty(obj,'name',{
    configurable:false,// 是否可删除
    writable:false, // 是否可重新赋值
    enumerable:false, // 是否可枚举
    value:1
})*/
</script>

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » defineProperty