使用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, //控制属性是否可以被删除 默认为false
get: 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
右 => right
2.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>
