Vue基础学习

害🙃学习很枯燥但生活还是要继续的呀

今天我们就来学习一下Vue中相关使用知识点

目录

Vue的概念知识

定义

特点

模板语法

插值语法

指令语法

数据绑定

单向数据绑定v-bind

双向数据绑定v-model

（知识点补充）el与data的两种写法

el的两种书写方法

data的两种书写方法

理解MVVM模型

MVVM的含义：

数据代理

事件处理

事件处理

事件修饰符

键盘事件

使用方法：

 Vue中常用的按键别名：

Vue中自定义按键别名：

属性

计算属性computed

监视属性watch

计算属性和监视属性的区别：

绑定样式和渲染

绑定样式

绑定class样式

绑定style样式

渲染

指令

内置指令

常用内置指令

 举例讲解：

自定义指令

局部指令

全局指令

 总结

---

老规矩，在学习Vue的知识时先看一下学习框架：

Vue的概念知识

定义

一套用于构建用户界面的渐进式JavaScript框架。构建用户界面-->指数据让用户看到的界面效果，渐进式-->Vue可以自底向上逐层的应用。

简单应用：只需一个轻量小巧的核心库。

特点

• 采用组件化模式，提高代码复用率、且让代码复用率、且让代码更好维护
• 声明式编码，让编码人员无需直接操作DOM，提高开发效率
• 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

模板语法

插值语法

 { {}}里的就是插值语法

指令语法

v-bind: /v-xxx:

数据绑定

单向数据绑定v-bind

单向绑定（v-bind）：数据只能从data流向页面；

简写成 ：href=“url”

双向数据绑定v-model

双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data；

v-model：value 可以简写为 v-model= ,因为v-model默认收集的就是value值

⚡注意：双向绑定一般都应用在表单类元素上（如：input、select等 就是说输入类元素 有value值的）

（知识点补充）el与data的两种写法

el的两种书写方法

• new Vue时配置el属性
• 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

data的两种书写方法

• 对象式

data: {   //data的第一种写法:对象式
         name: 'psy'
       }

• 函数式

 data() {
          return {//data第二种写法：函数式
                   name: 'psy'
                  }

理解MVVM模型

Vue是基于MVVM模型！

MVVM的含义：

• M--model模型：data中的数据
• V--view视图：模板代码
• VM--viewmodel视图模型：vue实例

发现：

1. data中所有的属性最后都出现在vm身上
2. vm身上所有的属性 及 Vue原型上所有属性，再vue模板中都可以直接使用。

数据代理

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

注意理解：一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

事件处理

事件处理

<button v-on:click="showInfo">点我提示信息</button>
//表示v-on:click="showInfo" 一点击就调用showInfo这个函数

事件修饰符

• prevent:阻止默认事件(常用)
• stop:阻止事件冒泡(常用)--当点击内层的div时外层的div也会受到影响则此时需要阻止冒泡
• once:事件只触发一次(常用)--该效