VUE练习
使用new Vue()创建Vue实例，传入配置对象（el data）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head><body><div id="root">{{ name }}</div><script type="text/javascript">const x = new Vue({el: '#root',data: {name: 999// message: 888}})</script>
</body></html>v-hind v-model
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head><body><div id="app"><!-- v-hind 单向传输，将data中的数据传给输入框 --><input type="text" v-bind:value="name"><!-- v-hind的缩写形式<input type="text" v-bind:value="name"> --><!-- v-model 双向传输，data中的数据与输入框中的value值相互传递 --><input type="text" v-model:value="name"></div><script type="text/javascript">var app = new Vue({el: "#app",data: {name: '燕'}});</script>
</body></html>效果：
Object.defineProperty
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>test</title><script src="../js/vue.js"></script>
</head><body><script type="text/javascript">number = 19;const person = {name: 'yan',school: '黑龙江大学',sex: '女'}Object.defineProperty(person, 'age', {// value: 19,// writable: false,//可重新赋值，默认false// enumerable: true//可枚举（可被遍历），默认false// configurable: true, //控制属性是否可以被删除 默认为falseget: function () {//测试它的调用情况console.log('@@@ GET AGE');//此时age的值依赖number的值return number},//当修改person的age属性时set(setter)属性就会被调用，且会收到修改的具体值set(v) {//测试console.log('CHANGE AGE');number = v;}});// person.school = 'hhhh';//可以赋值console.log(person);//遍历对象person中的可枚举的属性for (let prop in person) {console.log(prop);}//Object.keys遍历对象person中的可枚举的属性,和for in 一样的功能console.log(Object.keys(person));// delete person.age;// console.log(person);console.log(person.age);//调用了get函数person.age = 16;//调用了set函数console.log(number);//此时number为16</script>
</body></html>