害🙃学习很枯燥但生活还是要继续的呀
今天我们就来学习一下Vue中相关使用知识点
目录
老规矩,在学习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实例
发现:
- data中所有的属性最后都出现在vm身上
- vm身上所有的属性 及 Vue原型上所有属性,再vue模板中都可以直接使用。
数据代理
含义:通过一个对象代理对另一个对象中属性的操作(读/写)
注意理解:一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新。
事件处理
事件处理
<button v-on:click="showInfo">点我提示信息</button>
//表示v-on:click="showInfo" 一点击就调用showInfo这个函数
事件修饰符
- prevent:阻止默认事件(常用)
- stop:阻止事件冒泡(常用)--当点击内层的div时外层的div也会受到影响则此时需要阻止冒泡
- once:事件只触发一次(常用)--该效