一遍,一篇就够用了"/>
VUE基础知识总结,坚持每天一遍,一篇就够用了
Vue是目前 `前端三大框架` 之一: Angular React Vue
- 理念: `自动化+数据驱动`
- 自动完成DOM的相关操作, 数据变更时 自动更新相关DOM元素
- 作者希望用户: 只要关心数据的变化即可, DOM的操作全自动
Vue分三个版本:
- vue1: 已淘汰
- `vue2`: 目前占有率较高
- vue3: 以后的主流
Vue开发方式:
- 脚本: 同 jQuery 引入脚本即可, 适合入门阶段
- 脚手架: 适合实际开发 !
Vue语法:
new Vue({配置项}): 创建一个Vue对象, 根据配置项进行 个性化处理
el: 设置vue管理的元素, 值是 `id选择器`
data: 数据. 存储元素中使用的相关数据
methods: 方法们. 存储元素中使用的方法
HTML中新增语法
{{}}: 使用范围 -- `双标签的内容`, 其中书写JS代码
v-bind 或 : 使用范围 -- 属性
v-bind:属性名=""
:属性名=""
v-on 或 @ : 使用范围 -- 事件
v-on:事件名=""
@事件名=""
动态class :class="{样式类: true/false}"
根据值是 true还是false 决定是否添加样式
指令: vue提供的一套DOM属性, 可以快速操作DOM
v-html : 本质 innerHTML, 内容作为html解析后显示- v-text : 本质 innerText, 内容作为文本展示
v-show : 利用 css 的 style 的 display:none 实现元素的隐藏
v-once : 一次性渲染. 元素初始化渲染后, 后续数据变化不会更新
v-for : 遍历数组 生成元素
v-for="值 of/in 数组"
v-for="(值, 序号) of/in 数组"
key属性: 为遍历出来的DOM元素添加`唯一`标识, 当数组内容发生变更时, 相同唯一标识的元素直接复用. 提高使用效率
选项: 可选的配置项 -- 通过官方API文档查看
el : 指定vue对象管理的元
更多推荐
VUE基础知识总结,坚持每天一遍,一篇就够用了
发布评论