-
一、认识Vuejs
1. Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
- 渐进式意味着可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验
2.学习Vue.js的前提
- 从零开始学习Vue开发,不需要具备其他类似与Angular,React,甚至JQuery的经验
- 需要具备一定的HTML、CSS、Javascript基础
3. 使用的软件是
- HBuilderX 软件,比较方便
- 里面直接有vue.js插件
4.Vuejs
5.vue的指令
- v-text 原文输出
- v-html 显示文本,包括了css的样式出现
- v-on 简写@
目录
事件修饰符 1.stop 阻止事件冒泡
2.self 只有元素本身被触发时才会执行事件函数
3.capture 在事件冒泡中优先执行当前元素上绑定的事件函数
4.prevent 阻止浏览器默认行为
5.once 只触发一次当前元素的事件
6.passive 忽略 preventDefault() 函数,不能和 prevent 修饰符同时 使用
-
v-show 通过CSS的display属性切换显示效果 display:none
-
v-if 通过DOM元素的渲染来实现显示隐藏,值为false时销毁元素及其子元素,值true时再创建 元素及其子元素 在 <template> 元素上使用 v-if 条件渲染分组 v-else-if v-else
-
v-bind
简写 :
样式绑定
绑定class
本质:赋予一个字符串的值
:class="'red'"
:class="s"
:calss="[s,b]"
:class="{s: true, b: false}"
绑定style
本质:赋予一个对象的值
:style="{fontSize:'10px', color: 'red'}"
:style="sty"
:style="[sty,bor]" -
v-pre
当前所修饰的元素及其子元素跳过Vue的编译,即原样输出 -
v-once
被修饰的元素只会被渲染1次 -
v-cloak
当前指令会一直存在于被修饰的元素上,直到Vue编译完成后才消失,一般会配合 display 样式解决源代码闪烁的问题