vue知识点11
2024-08-27 17:24:15
1. Vue.js 是什么
Vue是一套用于构建用户界面的渐进式框架
2. vue的环境搭建(Vue2 )
3. 经典的hello world
new Vue({
el："挂载的元素" 挂载的元素不能是body或html
data:{ key:value...} data是存储数据的地方 (要把这数据渲染/挂载到模板里面)
template："<div>模板的内容</div>" ，渲染数据的是模板，如果没有指定template,默认的模板就是el挂载的元素，如果el和template同时存在，
渲染的是template模板的内容
})
4. 插值表达式 {{ 插值表达式 }} Mustache
5. jq用的是事件驱动，而vue用的是数据驱动的思路
数据改变了，视图会“自动”改变，这叫数据驱动
6. 既然数据改变了，做了dom操作，视图才改变的，那么，效率怎么样？？（怎么解决：）
虚拟dom技术提高dom操作的效率：（本质是js对象,对象里存储的是模板的内容） --> 当数据发生改变时，比对数据变化前后的对象的差异（diff算法）,
找出变化的部分，对变化的部分做真实的dom操作, 来提高dom操作的效率
7. Vue是一个 MVVM 框架
M model 模型 存储数据的 data
V view 视图 模板 (template)
VM viewModel 视图模型 vm (对应的是vue实例)
8. 监测的数据的变化的原理： Object.defineProperty
（采用 Object.defineProperty 原理来监听data里的数据的变化，观察者模式，观察这个数据什么时候发生变化）
9. vue的五大块：指令 组件 路由 vuex 第三方的插件
现在学习指令：
1) v-bind 把变量的值绑定到标签的属性上 v-bind 可以简写为 :
10. 模板 template
1) template和el同时存在 渲染的是template的内容
2) 模板的内容不能只是文本，必须要有标签/根元素
3) 根元素只能有一个，若想有多个，要写v-if v-else-if才行(判断最终也只是渲染一个元素)
11. v-on 事件监听的指令 v-on:事件="事件处理函数" *****
1）事件处理函数是放在methods里面
2） 实际处理函数不过调用时不传参数 传递的参数是$event
3) 阻止冒泡 v-on:事件.stop，阻止默认的行为 v-on:事件.prevent
4) 简写为 @
5) 监听键盘事件 v-on:keyup.enter 回车 v-on:keyup.esc esc键
12. v-bind :
v-bind:style="{key:value....}"
v-bind:class="{'类名':布尔值的表达式}" 常用
v-bind:class="[类名1，类名2...]"
13. v-on @
14.对差值表达式的深入理解
1） 不能为 if for 这样的语句
2) 替代if
a.可以使用三目运算符
b.可以用指令 v-if *******
c.函数
15. v-if 是惰性的 条件不满足，不渲染
例如:
<p v-if="a>0">1</p>
<p v-else-if="a===0">0</p>
<p v-else>-1</p>
16.v-show 满足条件显示，不满足条件的就隐藏
17. v-for 指令
1） 遍历数组 (item,index) in array
一定要指定key值 表示列表中的每一项
2) 遍历对象 (value,key,index) in obj
3)遍历 数字 从1开始
4)遍历字符串
18.v-show vs v-if 的区别
最新文章
- SQL语法粗整理
- Android Camera 相机程序编写
- poj 3299 Humidex
- IOS文件存储小结
- Linux Shell脚本编程－－curl命令详解
- WebAPI 用ActionFilterAttribute实现token令牌验证与对Action的权限控制
- Recurrent Neural Network系列3--理解RNN的BPTT算法和梯度消失
- 总结基础OOP（面向对象）
- typedef void(*Fun)(void);
- HALCON不支持的设备中，获取图像
- netlink组播的使用
- 关于flex布局【转】
- VBA语法总结
- Mysql优化_慢查询开启说明及Mysql慢查询分析工具mysqldumpslow用法讲解
- 发展简史jQuery时间轴特效
- Apache poi简介及代码操作Excel
- python入门-类(一)
- TFlearn——（2）SVHN
- 51nod1057—N的阶乘—（大数阶乘）
- TClientDataSet[5]: 读取数据