使用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>天气案例，实现：
方法1，自己写的，使用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"><h1>今天温度挺{{wendu}}</h1><button @click="change()">切换</button></div><script>const vm = new Vue({el: '#rooot',data: {wendu: '高'},methods: {change() {if (this.wendu == '高') {this.wendu = '低'}else {this.wendu = '高'}}}})</script>
</body></html>方法2：并进行数据监听
<!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"><h1>今天温度挺{{info}}</h1><button @click="changeweather()">切换</button><!--点击函数里面可以书写较为简单的语句--><!--@xxx='yyyy' yyyy可以是一些简单的语句--><!-- <button @click="isHot = !isHot">--><!-- 切换--><!-- </button>--></div><script>const vm = new Vue({el: '#rooot',data: {ishot: true},//改变模版数据的方法methods: {changeweather() {this.ishot = !this.ishot;}},//计算属性computed: {info() {return this.ishot ? "高" : "低";}},//监听ishot值的变化watch: {ishot: {// handler() {// console.log('ye!');// }handler(newValue, oldValue) {console.log('从' + oldValue + '变成' + newValue);}}}})</script>
</body></html>列表，通过遍历的方法实现（v-for）:
实现效果;
<!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"><!--v-for指令:1.用于展示列表数据2.语法：v-for="(item, index) in xxx" :key="yyy"3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）--><h1>人员列表</h1><!-- 遍历数组 --><!--:代表v-bind 属性key让每一个li有了唯一的标识,key一定不要重复--><!--v-for(for in// for of)可以接受到两个参数,一个是当前的元素另一个是当前元素的索引 类似于下面的person,index--><!-- v-for写在ul中是让ul循环，写在li中是让li循环，都能实现效果，只是间距不同 --><!-- <ul v-for="person in persons" :key="person.id"> --><ul v-for="(person, index) in persons" :key="person.index"><li><!-- {{index}} -->{{person.name}}--{{person.age}}</li></ul><!-- 遍历对象 --><!--注意遍历对象的时候先收到的是每一项的属性的value，第二项是对应的键名:key--><h1>汽车信息</h1><ul v-for="(p, key) in car" :key="key"><li>{{key}}--{{p}}</li></ul><!-- 遍历字符串 --><h1>说HI</h1><ul v-for="(p, index) in str" :key="index"><li>{{index}}--{{p}}</li></ul><!-- 遍历指定次数 --><h1>次数</h1><ul><li v-for="(num, index) in 5" :key="num">{{index}}--{{num}}</li></ul></div><script>const vm = new Vue({el: '#rooot',data: {persons: [{ id: '001', name: 'yan', age: 19 },{ id: '002', name: 'yanyan', age: 21 },{ id: '003', name: 'yanyanyan', age: 25 }],car: {name: 'ccc',price: '20w',color: 'balck'},str: 'hello'}})</script>
</body></html>