Vue基础1

Vue模板

数据绑定

el、data的两种写法

MVVM模型

数据代理

事件处理（事件的基本使用，事件修饰符，键盘事件）

计算属性

Vue模板：

1.插值语法：{{xxx}}

xxx是表达式，可以直接读取到data里的所有属性

2.指令语法：

例如：v-bind:

<a v-bind:href="xxx">a标签</a>

可以简写为<a :href="xxx">a标签</a>

绑定属性，使属性的内容是一个表达式，不然就是一个字符串

数据绑定：

单向绑定:<input type="text" v-bind:value="name">

双向绑定:<input type="text" v-model:value="name">

单向绑定(v-bind):数据只能从data流向页面

双向绑定(v-modle):数据不仅能从data流向页面，还可以从页面流向data

备注：双向绑定一般都应用在表单元素上，表单元素上有value;v-modle:value可以简写为v-modle,因为v-modle本来默认收集的就是value值

el的两种写法：

1.el:"app"

2.Vue的实例对象.$mount("#app")

data的两种写法：

1.对象式data:{ }

2.函数式:fuction(){return{}} 不能写成箭头函数

MVVM模型：

1.M：模型(Modle):data中的数据

2.V：视图(View):模板代码

3.VM：视图模型(ViewModle):Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm上

2.vm身上所有的属性以及Vue原型上所有属性，在Vue模板中都可以直接使用

何为数据代理：

通过一个对象代理对另一个对象中属性的操作（读/写）

 

1.Vue中的数据代理：

通过 vm 对象来代理 data 象中属性的操作（读／写）
2.Vue中数据代理的好处：
更加方便的操作 data 中的数据

3．基本原理：
通过 object . defineProperty (）把 data 对象中所有属性添加到 vm 上。
为每一个添加到 vm 上的属性，都指定一个 getter / setter .
在 getter / setter 内部去操作（读／写） data 中对应的属性。
 

事件处理：

事件的基本使用：

1．使用 v - on : xxx 或＠ xxx 绑定事件，其中 xxx 是事件名：

2．事件的回调需要配置在 methods 对象中，最终会在 vm 上

3.methods中配置的函数，不要用箭头函数！否则 this 就不是 vm 了：

4.methods中配置的函数，都是被 Vue 所管理的函数， this 的指向是 vm 或组件实例对象：

5.@click =" demo ＂和 @click =" demo ( $event )”效果一致，但后者可以传参；

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）;

2.stop：阻止事件冒泡（常用）;

3.once：事件只触发一次（常用）

< a href ="http://www. atguigu . com "
@ click . prevent =" showInfo "＞点我提示信息＜/ a >

修饰符可以连续写：

@click.prevent.stop：既阻止默认行为又阻止冒泡

点击a标签执行了showInfo但是不会跳转

键盘事件：

 < input type =" text ” placeholder ="按下回车提示输入＂ @keyup . enter =" showInfo "＞

对于第二点的解释：如果是单个单词直接写，如果是多个，中间用短横线隔开

< input type =" text ” placeholder ="按下回车提示输入＂ @keyup . ctrl . y =" showInfo "

计算属性

<div id="root">
姓：<input type="text" v-modle="firstName"><br/>
名：<input type="text" v-modle="lastName"><br/>
全名:<span>{{fullName}}</span>
<div>

<script>
new Vue({
el:"#root",
data:{
firstName:张,
lastName:三
}，
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生改变时
get(){
return this.firstName+'-'+this.lastName//此处的this指的是vm
}
}
}
})
</script>

1.定义：要用的属性不存在，要通过已有属性计算得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter

3.get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生改变时

4.优势：与methods实现相比，内部有缓存机制(复用），效率更高，调试方便

5.备注：1）计算属性最终会出现在vm上，直接读取使用即可  2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

下图增加了set函数，可以实现修改功能

computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生改变时
get(){
return this.firstName+'-'+this.lastName//此处的this指的是vm
}
set(value){
const arr =value.split('-')
this.firstName=arr[0]
this.lastName=arr[1]
}
}
}

若没有修改功能，可以简写为：

fullName:function(){

}