一、初识Vue
Vue实例和容器都是一一对应的，div的id和Vue对象中的el属性绑定
<body>
<div id="app">
{{message.toUpperCase()}}
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
二、模板语法
1、插值语法
功能：
用于解析标签体内容
写法：
{
{XXX}},XXX是js表达式，且可以直接读取到data中的所有属性
2、指令语法
功能：
用于解析标签（包括：标签属性，标签体内容，绑定事件）
举例：
v-bind:href=”XXX”或简写成 :href=”XXX”，XXX同样要写js表达式
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name.toUpperCase()}}</h3>
<br>
<h1>指令语法</h1>
<a v-bind:href="school.url" target="_blank">点我去{{school.name}}学习1</a>
<br>
<a :href="school.url" target="_blank" :time="Date.now()">点我去{{school.name}}学习2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
var app = new Vue({
el: '#root',
data: {
name: '高大俊abc!',
school: {
name: '尚硅谷网站',
url: 'http://www.atguigu.com'
}
}
})
</script>
三、数据绑定
1、单向绑定（v-bind）
数据只能从data流向页面
2、双向绑定（v-model）
数据不仅能从data流向页面，还可以从页面流向data
备注：
- 双向绑定一般都应用在表单类元素上（input、select等）
- v-model:value可以简写成v-model，因为v-model默认就是收集的value值
<body>
<div id="root">
单向数据绑定：<input type="text" :value="name">
<br>
<!-- 双向数据绑定：<input type="text" v-model:value="name"> -->
双向数据绑定：<input type="text" v-model="name">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
var app = new Vue({
el: '#root',
data: {
name: '123'
}
})
</script>
四、EL和data的两种写法
1、EL有2种写法
1）new Vue时配置el属性
2）先创建Vue实例，然后通过vm.$mount(‘#root’)指定el的值
2、data有2种写法
1）对象式
2）函数式：在学习到组件时，必须使用函数式
3、一个重要原则
由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue对象了
<body>
<div id="root">
<h1>你好，{{name}}</h1>
<h1>{{$options}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
// el的两种写法
// var app = new Vue({
// // el: '#root', // 第一种写法
// data: {
// name: '高大俊1'
// }
// })
// // 第二种写法
// setTimeout(() => {
// app.$mount("#root")
// }, 1000)
// data的两种写法
var app2 = new Vue({
el: '#root',
// data的第二种写法
// data: function() {
// return {
// name: '高大俊2'
// }
// }
// data: function()可以简写成data()
data() {
return {
name: '高大俊3'
}
}
})
console.log(app2);
</script>
五、MVVM模型
1、MVVM模型
M：模型（Model）：data中的数据
V：视图（View）：模板代码
VM：视图模型（ViewModel）：Vue实例
2、观察发现
data中所有的属性，都出现在了vm身上
vm身上所有属性及vue原型上所有属性，在vue模板中都可以直接使用
六、Object.defineProperty
1、Object.defineProperty配置项
enumerable：控制属性是否可以被枚举
writable：控制属性是否可以被修改
configurable：控制属性是否可以被删除
2、动态修改并读取属性值
通过Object.defineProperty的get和set方法来实现
3、通过一个对象代理对另一个对象中属性的操作
<script type="java/script">
let obj1 = {x:100}
let obj2 = {x:200}
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x;
}
set(value) {
obj1.x = value;
}
})
</script>
七、事件处理
1、事件的基本使用
1）使用v-on:XXX或@XXX绑定事件，其中XXX是事件名
2）事件的回调需要配置在methods对象中，最终会在vm上
3）methods中配置的函数，this指向vm或组件实例对象，不要用箭头函数，否则this就指向windows了
4）@click=”demo”和@click=”demo($event)”效果一致，但后者可以传参
<body>
<div id="root">
<h2>欢迎{{name}}</h2>
<button @click="showInfo1">点击我1</button>
<button @click="showInfo2($event,66)">点击我2</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
var app = new Vue({
el: '#root',
data: {
name: '高大俊'
},
methods: {
showInfo1() {
alert("提示1");
},
showInfo2(e, number) {
console.log(e);
alert(number);
}
}
})
2、事件修饰符
1）@XXX.prevent：阻止默认事件
2）@XXX.stop：阻止冒泡事件
3）@XXX.once：事件只触发一次
<body>
<div id="root">
<h2>欢迎{{name}}</h2>
<!-- 阻止默认事件 -->
<a href="www.baidu.com" @click.prevent="showInfo1('A')">点击提示信息</a><br><br>
<!-- 阻止冒泡事件 -->
<div @click="showInfo1('B')">
<button @click.stop="showInfo1('C')">点我提示信息</button>
</div><br>
<!-- 事件只触发一次 -->
<button @click.once="showInfo1('D')">点我提示信息</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: '高大俊'
},
methods: {
showInfo1(message) {
console.log(message);
}
}
})
</script>
3、键盘事件
1）vue中常用的按键别名
- 回车：enter
- 删除：delete
- 退出：esc
- 空格：space
- 换行：tab
- 上：up
- 下：down
- 左：left
- 右：right
2）系统修饰符：ctrl、alt、shift、meta要注意
- 配合keyup使用时，按下修饰符的同时，按下其他键，随后释放其他键，事件才会触发
- 配合keydown使用时，正常使用
<body>
<div id="root">
<h2>欢迎{{name}}</h2>
<input type="" placeholder="按下回车提示信息" @keyup.enter="showInfo">
<br><br>
<input type="" placeholder="按下alt+其他键再释放提示信息" @keyup.alt="showInfo">
<br><br>
<input type="" placeholder="按下alt键提示信息" @keydown.alt="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: '高大俊'
},
methods: {
showInfo(e) {
console.log(e.target.value);
}
}
})
</script>
八、计算属性
1、methods方法实现
通过调用fullName方法，拼接2个input中的输入内容，动态拼接成字符串。
注意span中的fullName必须加小括号
<body>
<div id="root">
姓：<input type="text" v-model="firstName"><br><br>
名：<input type="text" v-model="secondName"><br><br>
全名：<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
firstName: '张',
secondName: '三'
},
methods: {
fullName() {
return this.firstName + this.secondName;
}
}
})
</script>
2、computed实现
1）get方法
当有人读取fullName时，会调用get方法返回数据，get方法会有缓存，多次调用时只有第一次会真正调用get方法，其他都是用缓存中的数据
但要注意，只有当初次读取fullName，或者所依赖的数据发生变化时，才会调用get方法。这样就不会因为缓存不更新导致数据没有及时更新了
2）set方法
当修改fullName值时，会调用set方法。我们在set方法中重新给firstName和secondName赋值了，所以input框和span中的值也会变
<body>
<div id="root">
姓：<input type="text" v-model="firstName"><br><br>
名：<input type="text" v-model="secondName"><br><br>
<!-- 多个fullName只会调用get一次，依赖的数据发生变化时才会重新调用一次get -->
全名：<span>{{fullName}}</span><br><br>
全名：<span>{{fullName}}</span><br><br>
全名：<span>{{fullName}}</span><br><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
secondName: '三'
},
computed: {
fullName: {
get() {
return this.firstName + this.secondName;
},
set(value) {
const arr = value.split('-');
this.firstName = arr[0];
this.secondName = arr[1];
}
}
}
})
</script>