使用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-bind 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>键盘事件绑定：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><!--vue中键盘事件的绑定 一般用keyup(键松开的时候执行)(keydown键按下的时候执行)--><!--1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。4.也可以使用keyCode去指定具体的按键（不推荐）5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名--><div id="rooot"><h1>欢迎来到{{place}}</h1><input type="text" @keyup.enter="showI" placeholder="回车控制台提示输入"><input type="text" @keyup.delete="showI" placeholder="删除或退格控制台提示输入"><input type="text" @keyup.space="showI" placeholder="空格控制台提示输入"><!-- Tab得搭配keydown使用，否则按下时会移动聚焦事件 --><input type="text" @keydown.tab="showI" placeholder="Tab控制台提示输入"><!-- ctrl+任意键 --><input type="text" @keyup.ctrl="showI" placeholder="按下ctrl任意键提示输入" /><input type="text" @keydown.p="showI" placeholder="按下p提示输入" /></div><script>new Vue({el: '#rooot',data: {place: '哈尔滨'},methods: {//keyCode13为Enter键// <input type="text" @keyup.enter="showI" placeholder="回车控制台提示输入")>// if (a.keyCode === 13) {// console.log(a.target.value);// }showI: function (a) {console.log(a.target.value);//返回输入框的值console.log(a.key);//返回最后按下的按键}}})</script>
</body></html>姓名的显示：方法一：插值语法。方法二：methods定义函数后调用
实现效果：
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="rooot">姓:<input type="text" V-model:value="firstname"><br><br>名:<input type="text" V-model:value="lastname"><br><br><!-- 方法1:插值语法 --><!-- <span>全名：{{firstname.slice(0,3)}} {{lastname}}</span> --><!-- 方法2：methods方法调用之后进行插值 --><span>全名:{{fullname()}}</span></div><script>const vm = new Vue({el: '#rooot',data: {firstname: 'yanyan',lastname: 'mengying'},methods: {fullname() {return `${this.firstname.slice(0, 3)} + ${this.lastname}`}}})</script>
</body></html>姓名显示，方法三：计算属性（不是函数）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="rooot">姓:<input type="text" V-model:value="firstname"><br><br>名:<input type="text" V-model:value="lastname"><br><br><!-- 方法3:计算属性 --><!-- fullname后面不能加括号，否则会提示fullname不是函数（也就是说fullname不是函数） --><span>全名:{{fullname}}</span></div><script>const vm = new Vue({el: '#rooot',data: {firstname: 'yanyan',lastname: 'mengying'},computed: {fullname: function () {return this.firstname.slice(0, 3) + '-' + this.lastname;}}})</script>
</body></html>
