VUE学习笔记
1. Vue核心
1.1 Vue简介
1.1.1 官网
- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
1.1.2 介绍与描述
- 动态构建用户界面的渐进式JavaScript框架
1.1.3 Vue的特点
- 遵循MVVM模式
- 代码简洁,体积小,运行效率高,适合移动/PC端开发
- 它本身只关注UI,也可以引入第三方库开发项目
1.1.4 与其它JS框架关联
- 借鉴Angular的模板与数据绑定技术
- 借鉴React的组件化和虚拟DOM技术
1.1.5 Vue周边库
- vue-cli:vue脚手架
- vue-resource
- axios
- vue-router:路由
- vuex:状态管理
- element-ui:基于vue的UI组件库(PC端)
...
1.2 初识Vue
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
- root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
- root容器里的代码被称为【Vue模板】;
- Vue实例和容器是一一对应的;
- 真实开发中只有一个Vue实例,并且会配合着组件一起使用;
- {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
- 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
注意区分:js表达式 和 js代码(语句)
1.表达式 一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
//创建Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
name:'atguigu',
address:'北京'
}
})
1.3 模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
1.3.1 模板的理解
html中包含了一些JS语法代码,语法分为两种,分别为:
- 插值语法(双大括号表达式)
- 指令(以v-开头)
1.3.2 插值语法
- 功能:用于解析标签体内容
- 语法:{xxx},xxx会作为js表达式解析
1.3.3 指令语法
- 功能:解析标签属性,解析标签体内容,绑定事件
- 举例:v-bind:href='xxx',xxx会作为js表达式被解析
<a v-bind:href='url'/>
- 说明:Vue中有很多的指令,此处只是用v-bind举例
1.4 数据绑定
1.4.1 单向数据绑定
- 语法: v-bind:href="xxx"或简写为
:href
- 特点: 数据只能从data流向页面
1.4.2 双向数据绑定
- 语法: v-model:value="xxx"或简写为
v-model="xxx"
- 特点: 数据能从data流向页面,也能在页面上流向data(通常涉及修改与保存时使用)
1.5 MVVM模型
- M:模型(Model):对应data中的数据
- V:视图(View):模板
- VM:视图模型(ViewModel):Vue实例对象
1.6 数据代理
1.6.1 Object.defineProperty
- 语法 Object.defineProperty(obj, prop, descriptor)
- 参数
- obj: 要定义的属性
- prop: 要定义或修改的属性名称或Symbol
- descriptor: 要定义或修改的属性描述符
- 方法
-
get
属性的 getter 函数,如果没有 getter,则为 undefined。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。 默认为 undefined。 -
set
属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。 默认为 undefined。
-
1.6.2数据代理
通过vm对象来代理data对象中属性的操作(读/写)
1.6.3 代理的好处
更加方便的操作data中的数据
1.6.4 基本原理
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
1.7 事件处理
1.7.1 绑定监听
- v-on:xxx="fun"
- @xxx="fun"
- @xxx="fun(参数)"
- 默认事件形参:event
- 隐含属性对象:$event
1.7.2 事件修饰符
- .prevent: 阻止事件的默认行为 event.preventDefault()
- .stop: 停止事件冒泡 event.stopPropagation()
- .once: 事件只触发一次
- .capture: 使用事件的捕获模式
- .self: 只有event.target是当前操作的元素时才出发事件
- .passive: 事件的默认行为立即执行,无需等待事件回调执行完毕
1.7.3 按键修饰符
- 常用别名
- 回车 => enter
- 删除 => delete
- 退出 => esc
- 空格 => space
- 换行 => tab(特殊,必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
- Vue未提供别名的按键,可以使用原始的key值去绑定,但要注意转为kebab-case(短横线命名)
- CapsLock => caps-lock
- 系统修饰符(用法特殊): ctrl,alt,shift,meta
- 配合keyup使用:按下修饰键同时,再按下其他键,随后释放其他键,事件才触发
- 配合keydown使用:正常触发事件
- 也可以使用keyCode去指定具体的按键(不推荐)
- Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
1.8 计算属性
1.8.1 计算属性-computed
- 要显示的数据不存在,要通过计算得来
- 在computed对象中定义计算属性
- 在页面中使用{{方法名}}来显示计算的结果
1.8.2 监视属性-watch
- 通过vm对象的$watch()或watch配置来监视指定的属性
- 当属性变化时,回调函数自动调用,在函数内部进行计算
1.9 class与style绑定
1.9.1 理解
- 在应用界面中,某些元素的样式是变化的
- class/style 绑定就是专门用来实现动态样式效果的技术
1.9.2 class绑定
- :class='xxx'
- 表达式是字符串:'classA'
- 表达式是对象:
- 表达式是数组:['classA','classB']
1.9.3 style绑定
- :style="{color:activeColor,fontSize:fontSize+'px'}"
- 其中activeColor/fontSize是属性
1.10 条件渲染
1.10.1 条件渲染指令
- v-if与v-else
- v-show
1.10.2 比较v-if与v-show
- 如果需要频繁切换v-show比较好
- 当条件不成立时,v-if的所有子节点不会解析(项目中使用)
1.11 列表渲染
1.11.1 v-for
- 使用v-for指令基于数组来渲染列表
- 使用形式 v-for="item in items" items 是源数据数组,而item是被迭代的数组元素别名
- 在 v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
- 你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:
<div v-for="item of items"></div>
本文来自博客园,作者:黑子桑,转载请注明原文链接:https://www.cnblogs.com/shenjun980326/p/16741181.html