开头附上官网Vue.js 教程 | 菜鸟教程 (runoob.com)
一、Vue核心
1.模板语法
1.1插值语法
{{ name.toUpperCase() }}? 作用将属性值中的字符串转换为大写
{{}}为插值语法，其中name为data{ name：‘zhangsan’}中的属性
1.2指令语法
v-bind:href = 'xxxx' ，其中xxxx会被会被作为js表达式解析
?例如：写一个超链接
?例如：写一个超链接
? ? ? ? ? ? ? ? <a v-bind:href = 'url'>点击跳转</a>
????????????????data{ url：‘http://www.xxx.com’}
? ? ? ? 如此即可修改url，解析跳转网页
? ? ? ? 如此即可修改url，解析跳转网页
显而易见，两种语法都可以读取data中的值，但是插值语法常用语标签体，指令语法常作用于标签属性。另外，
v-bind:href
可以直接简写为
:href
2.数据绑定?
数据绑定有单向数据绑定v-bind，还有双向数据绑定v-model（数据不仅能从 data 流向页面，还能从页面流向 data）
3.MVVM模型
M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象
4.Object.defineProperty与数据代理
let person = {
? ? ? ? name:'张三',
? ? ? ? sex:'男'
? ? ? ? //age:18
}
Object.defineProperty(person,'age',{
? ? ? ? value:18,
? ? ? ? //enumerable:true,? ? ? //控制属性是否可以枚举，默认值为false
? ? ? ? //writable:true,? ? ? ? //控制属性是否可以被修改，默认值为false
? ? ? ? //configurable:true? ? ? ? //控制属性是否可以被删除，默认值是false
})
4.1Object.defineProperty功能
采用此方法Object.defineProperty为person追加的age属性，但是无法被遍历
测试：console.log(Object.keys(person))查看，可以发现只显示了name与sex，数组当中没有age；若想遍历到age将enumerable设置为true即可
????????Object.keys(person)：此方法会将person里面的属性名都提取出来变成一个数组
4.2数据代理
数据代理就是为了更加方便的操作data中的数据，方便程序员编写代码。
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="root">
<h1>学校名称：{{name}}</h1>
<h2>地址名称：{{address}}</h2>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'武汉理工大学',
address:'洪山区'
}
})
</script>
</html>以上述代码为例，Vue中的数据代理是通过vm对象来代理data对象中的属性的操作（读/写）
基本原理是通过Object.defineProperty将data对象中所有属性添加到vm上，为每一个vm上的属性都指定一个getter/setter方法，从而操作data中的属性。不需要data.name/data.address。
5.事件处理
5.1绑定监听
v-on绑定事件，例如点击v-on:click='方法名'????????或? ? ? ? @click='方法名'
5.2事件修饰符
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
.once：事件只触发一次
.capture：使用事件的捕获模式——事件有捕获和冒泡阶段，倘若从div还有一层div嵌套，访问内层必然会冒泡到外层（控制台先输出内层后输出外层）。给外层div事件添加.capture则外层div会在捕获阶段即输出（控制台先输出外层后输出内层）。
例如：@click.prevent='方法名'
? ? ? ? @click.capture='方法名'
5.3键盘事件?
@keyup="方法名"
例如：@keyup.enter /?@keyup.ENTER? ? ? ? 按下回车触发?
6.计算属性
6.1小案例
下面三块html代码分别是插值语法实现姓名拼接、methods方法实现姓名拼接、计算属性实现需求：?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
<!-- 将两个输入框的文字拼接起来 -->
<div id="root">
姓：<input type="text" v-model="firstName"></input><br>
名：<input type="text" v-model="lastName"></input><br>
<!-- .slice为截取firstName前三位 -->
全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstName:'张',
lastName:'三'
}
})
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName"></input><br>
名：<input type="text" v-model="lastName"></input><br>
<!-- 注意这里的方法名后面要加（），否则输出的是全名：function () { [native code] } -->
全名：<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
firstName: '张123',
lastName: '三'
},
methods: {
fullName(){
return this.firstName + '-' + this.lastName
}
}
})
</script>
</html><script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
x:'你好'
},
methods: {
demo(){
}
},
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
console.log('get被调用了')
// console.log(this) //此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用? 当fullName被修改时。
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>?7.监视属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_watch实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
-->
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气小案例</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
<div id="root">
<h1>今天的天气很{{info}}</h1>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
isHot: {
immediate: true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
}
}
})
</script>
</html>同样的，监视属性还可以监视computed里面的info，另外watch还可以方便的开启异步，见下段代码：
watch:{
firstName(val){
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}