官网

初识Vue

  • 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
  • root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
  • root容器里的代码被称为【Vue模板】
  • Vue实例和容器是一一对应的
  • 真实开发中只有一个Vue实例,并且会配合着组件一起使用
  • {{xxx}}中的xxx要写JS表达式,且xxx可以自动读取到data中的所有属性
  • 一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新

区分:JS表达式和JS代码(语句)

  • 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
    1. a
    2. a+b
    3. demo(1)
    4. x === y ? ‘a’ : ‘b’
  • JS代码(语句):
    1. if(){}
    2. for(){}

模板语法

插值语法

  • 功能:用于解析标签体内容
  • 写法:,xxx是JS表达式,且可以直接读取到data中的所有属性

指令语法

  • 功能:用于解析标签(包括:标签属性,标签体内容,绑定事件……)
  • 举例:v-bind:href="xxx"或简写为:href="xxx",xxx同样要写JS表达式,且可以直接读取到data中的所有属性
  • 备注:Vue中有很多的指令,且形式都是:v-???,此处只是拿v-bind举个例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr>
<h1>指令语法</h1>
<a :href="url">点我去尚硅谷学习</a>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
//创建Vue实例
const x = new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data:{ //data中用于存储数据,数据供el所指定的容器去使用,值暂时先写成对象,以后会写成函数
name:'Jack',
url:'http://www.atguigu.com'
}
})
</script>

输出结果为:

image-20210925202122204

数据绑定

  • Vue中有两种绑定方式
  1. 单向绑定(v-bind):数据只能从data流向页面
  2. 双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data
  • 备注:
    • 双向绑定一般都应用于表单类元素上(如:input,select等…)
    • v-model:value可以简写为v-model,因为v-model默认收集的就是value值
1
2
3
4
5
6
7
8
9
<div id="root">
<!-- 普通写法 -->
单向数据绑定:<input type="text" v-bind:value="name"><br>
双向数据绑定:<input type="text" v-model:value="name"><br>
<!-- 简写 -->
双向数据绑定:<input type="text" v-model="name"><br>
<!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 -->
<h2 v-model:x="name">你好啊</h2>
</div>

el与data的两种写法

el有两种写法

  1. new Vue是配置el属性
  2. 先创建Vue实例,然后再通过vm.$mount('#root')指定el的值

data有两种写法

  • 对象式
  • 函数式
  • 如何选择:目前两种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错

一个重要原则

  • 由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
//创建Vue实例
new Vue({
el:'#root', //第一种写法
data:{ //第一种写法:对象式
name:'Jack',
url:'http://www.atguigu.com'
}
})

const v = new Vue({
data(){ //第二种写法:函数式
console.log(this); //此处的this是Vue实例对象
return{
name:'Jack'
}
}
})
v.$mount('#root'); //第二种写法
</script>

MVVM模型

  • M:模型(Model):对应data中的数据
  • V:视图(View):模板
  • VM:视图模型(ViewModel):Vue实例对象

image-20210927144900686

  • 观察发现
    • data中所有的属性,最后都出现在了VM身上
    • VM身上所有的属性 及 Vue原型上所有的属性,在Vue模板中都可以直接使用

数据代理

Object.defineProperty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let number = 18;
let person = {
name:'张三',
sex:'男',
}

Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举,默认值是false
// writable:true, //控制属性是否可以被修改,默认值是false
// configurable:true, //控制属性是否可以被删除,默认值是false

//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get(){
console.log("有人读取age属性了");
return number;
},

//当有人读取person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value){
console.log("有人修改了age值,且值是",value);
number = value;
}
})

输出结果为:

image-20210927200413693

何为数据代理

  • 数据代理就是通过一个对象代理对另一个对象中属性的操作(读/写)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let obj = {x:100};
let obj2 = {y:200};


Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},

//当有人读取person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value){
obj.x = value;
}
});

输出结果为:

image-20210927201610468

Vue中的数据代理

  • 通过VM对象来代理data对象中属性的操作(读/写)
  • Vue中的数据代理的好处:
    • 更加方便的操作data中的数据
  • 基本原理:
    • 通过Object.defineProperty()把data对象中所有属性都添加到vm上
    • 为每一个添加到vm上的属性,都指定一个getter/setter
    • 在getter/setter内部去操作(读/写)data中对应的属性

image-20210927203834442

事件处理

事件的基本使用

  • 使用v-on:xxx 或 @xxx(常用这个) 绑定事件,其中xxx是事件名
  • 事件的回调需要配置在methods对象中,最终会在vm上
  • methods中配置的函数,不要用箭头函数!否则this就不是vm了
  • methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象
  • @click="demo"@click="demo($event)"效果一样,但后者可以传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="root">
<h1>欢迎来到{{name}}学习</h1>
<button @click="showInfo">点我提示信息1(不传参)</button>
<button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
</div>
<script>

//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
//创建Vue实例
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
},
methods: {
showInfo(event){
// console.log(this); //此处的this是vm
alert('同学你好!');
},
showInfo2(event,number){
console.log(number);
console.log(event);
alert('同学你好!!');
}
},
})
</script>

输出结果为:

image-20210927211401535

事件修饰符

  • prevent:阻止默认事件(常用)
  • stop:阻止事件冒泡(常用)
  • once:事件只触发一次(常用)
  • capture:使用事件的捕获模式
  • self:只有event.target是当前操作的元素时才触发事件
  • passive:事件的默认行为立即执行,无需等待事件回调执行完毕
1
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

上述案例浏览器在响应点击事件后,并不会作页面跳转。

  • 修饰符可以连续写

    例如:键盘弹起ctrl和y触发事件可以写成@keyup.ctrl.y="showInfo"

键盘事件

  • Vue中常用的键盘别名:
    • 回车:enter
    • 删除:delete(捕获“删除”和”退格“键)
    • 退出:esc
    • 空格:space
    • 换行:tab(必须配合keydown去使用)
    • 上:up
    • 下:down
    • 左:left
    • 右:right
  • Vue未提供别名的按键,可以使用原始的key值去绑定,但注意要转为kabab-case(短横线命名)
  • 系统修饰键(用法特殊):ctrl,alt,shift,meta
    • 配合keyup使用:按下修饰键的同时,再按下其它键,随后释放其它键,事件才被触发
    • 配合keydown使用:正常触发事件
  • 也可以使用keycode去指定具体的按键(不推荐)
  • Vue.config.keycodes.自定义键名 = 键码,可以去定制按键别名(不推荐)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="root">
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script>

//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
//创建Vue实例
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
},
methods: {
showInfo(e){
console.log(e.target.value);
},
},
})
</script>