Vue2和Vue3
Vue2和Vue3
初识
vue.js
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
helloVue
<!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 type="text/javascript"
src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script type="text/javascript">
new Vue({
el: '#app', //用于指定vue为哪个容器服务
//暂时先写成一个对象,后期是一个函数
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
单文件
模版语法
<div id="app">
<!-- 插值语法 -->
<h1>hello {{ name }}</h1>
<!-- 指令语法 -->
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
</div>
数据绑定
<div id="app">
<!-- 标准 -->
单向数据绑定:<input v-bind:value="name" /><br />
双向数据绑定:<input v-model:value="name" /><br />
<!-- 简写 -->
单向数据绑定:<input :value="name" /><br />
双向数据绑定:<input v-model="name" /><br />
<!-- v-model:value 只能应用在表单类元素(输入元素)-->
</div>
el和data的两种写法
<script type="text/javascript">
// el第一种写法
// new Vue({
// el: '#app',
// data: {
// name: 'zhangsan',
// }
// })
// el第二种写法
const v = new Vue({
data: {
name: 'zhangsan',
}
})
v.$mount('#app')
// data第一种写法(对象式)
// new Vue({
// el: '#app',
// data: {
// name: 'zhangsan',
// age: 18
// }
// })
// data第二种写法(函数式)
// new Vue({
// el: '#app',
// //这里不能写成箭头函数，否则this指向window
// data: function () {
// // 这里的this指向Vue实例对象
// console.log(this)
// return {
// name: 'zhangsan',
// age: 18
// }
// }
// })
// data第二种写法(函数式简写)
new Vue({
el: '#app',
data() {
console.log(this)
return {
name: 'zhangsan',
age: 18
}
}
})
</script>
理解MVVM
- MVVM是Model-View-ViewModel的缩写，是MVVM架构模式
model: 数据
view: 模版
viewModel: Vue实例对象
数据代理
Object.defineProperty()
<script type="text/javascript">
let number = 18;
let person = {
name: '张三',
sex: '男',
};
// 在一个对象中添加一个属性，并设置get和set方法
Object.defineProperty(person, 'age', {
// value: 18, //属性值
// enumerable: true,//是否可枚举
// writable: true, //是否可以修改
// configurable: true, //是否可以删除
get() {
console.log('读取了get方法');
return number;
},
set(newValue) {
console.log('修改了set方法');
number = newValue;
}
});
console.log(person);
</script>
Vue中的数据代理
<body>
<div id="app">
学校名称：{{school}} <br>
学校地址：{{address}}
</div>
<script type="text/javascript">
const v = new Vue({
el: '#app',
data() {
return {
school: '清华大学',
address: '北京市海淀区清华园'
}
}
})
console.log(v);
</script>
</body>
数据时在data属性中,而之所以要在Vue对象中有自定义的属性(school,address)是因为方便在{{school}}插值时方便书写而不写成{{_data.school}}
事件
事件处理
<body>
<div id="app">
<h1>{{name}}</h1>
<!-- 标准 -->
<button v-on:click="showInfo1">点我提示信息1(不接受参数)</button>
<!-- 简写 -->
<button @click="showInfo2(18)">点我提示信息2(接受参数)</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
name: '小明'
},
methods: {
showInfo1() {
//此处的this指向的是Vue实例(也是不能写成箭头函数)
alert('你点击了按钮')
},
showInfo2(data) {
console.log(data);
alert('你点击了按钮')
}
}
})
console.log(vm);
</script>
</body>
事件修饰符
<body>
<div id="app">
<a href="http://www.baidu.com" @click="showInfo">点我提示信息</a> <br />
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息(阻止默认事件)</a> <br />
</div>
<!-- 事件修饰符
1.prevent 阻止默认事件
2.stop 阻止事件冒泡
3.self 只在当前元素触发事件
4.once 只触发一次
5.capture 捕获事件
6.passive 被动事件监听器
-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
methods: {
showInfo() {
alert('hello')
}
}
})
console.log(vm);
</script>
</body>
键盘事件
<body>
<div id="app">
1<input type="text" placeholder="按下回车提示" @keyup="showInfo" /><br />
<!-- 快捷绑定案件 -->
2<input type="text" placeholder="按下回车提示" @keyup.enter="showInfo2" />
</div>
<!-- 键盘事件
keyup: 键盘抬起事件
keydown: 键盘按下事件
Vue中常用案件别名:
enter: '回车',
delete: '删除',
tab: 'tab',
space: '空格',
up: '上键',
down: '下键',
left: '左键',
right: '右键'
-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
methods: {
showInfo(e) {
if (e.keyCode === 13) {
console.log(e.target.value);
}
},
showInfo2(e) {
console.log(e.target.value);
}
}
})
console.log(vm);
</script>
</body>
计算属性
<body>
<div id="app">
姓:<input type="text" v-model="firstName" /><br />
名:<input type="text" v-model="lastName" /><br />
姓名:<span>{{ fullName }}</span><br />
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '三'
},
// 计算属性
computed: {
//标准写法
// fullName: {
// get() {
// console.log('fullName get')
// return this.firstName + this.lastName
// },
// set(value) {
// console.log('fullName set')
// const names = value.split('')
// this.firstName = names[0]
// this.lastName = names[1]
// }
// }
//简写
fullName() {
return this.firstName + this.lastName
}
}
})
console.log(vm);
</script>
</body>
浙公网安备 33010602011771号