HTML5自定义属性前缀 dataset 常用Vue指令
HTML5自定义属性前缀
"data-"
解释：HTML规定可以为元素添加非标准的属性，但要添加前缀data-
目的：为元素提供与渲染无关的信息，或者语义信息。
-------- 属性可以任意添加和命名，只要以data-开头
访问：添加自定义属性之后，可以通过元素的dataset属性来访问自定义的值。
使用JavaScript操作dataset注意：
- 在添加或读取属性的时候需要去掉前缀data-
- 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式
1 <div id="box" data-name='ghostwu' data-age='22' , data-sex='man'>ghostwu tell you how to learn html5</div>
2 <script>
3 var oBox = document.querySelector("#box");
4 console.log( oBox.dataset ) ;
5
6 var myName = oBox.dataset.name;
7 var myAge = oBox.dataset.age;
8 var mySex = oBox.dataset.sex;
9
10 if( oBox.dataset.name ) {
11 console.log( oBox.dataset.name );
12 }
13 </script>
关于VUE 中的自定义指令 v-
Vue指令：内置指令、自定义指令（注册）
VUE自带指令以及自定义指令的创建和注册
v-cloak —— 解决屏幕闪烁
解释： 网速慢，Vue未加载过来，在Vue实例化之前，HTML中的插值表达式原样显示到用户界面的现象。
适用：可以使用v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除
原因： 屏幕闪烁（网速慢导致的源码插值表达式显示）
- 模拟 控制台network / 定时器代码模拟VUE
总之 是VUE 还为实例化 模板语法原样输出 - 实际中 当网络较慢，网页还在加载Vue.js，导致Vue.js来不及渲染，这是页面会显示出Vue源代码（插值表达式如
{{ msg }}），使用v-cloak指令解决这一问题
（模拟：控制台 networkTIM图片20190528110127.png
切换 3g在http协议vue模块加载慢（网速慢）
）
v-show
显示内容
v-hide不存在于vue.js文件中
原理：控制台Elements中元素存在 ，v-show="Blooen/条件"，控制的是该元素css属性display
v-if / v-else / v-else-if
v-if （通过JavaScript的值）v-if条件的真假，决定DOM元素是否隐藏或者显示
注：Vue React 均使用虚拟DOM，最终比对相异进行渲染，减少DOM操作。专题
不同条件的分支控制元素DOM的显示与隐藏,类似于append，remove
Point: v-else、v-else-if只作用于同级的且相邻的v-if和v-else-if
v-if / v-show 小结
-v-show是通过display样式决定隐藏显示的，在HTML结构，DOM树中一直存在。适用于频繁操作该元素的显示，隐藏，不用操作DOM
-
v-if类似于append，remove 隐藏的时候，DOM树中不存在相应元素，使用区别此。
v-for
Point： 循环遍历的包括所在的HTML语句，即该li、p等也会被打印，知道遍历完item。
可以循环遍历item：数组、对象、数字、字符串等
script脚本中new的Vue实例中存放需求的数据
Point： 数组、对象遍历的索引方式
-
若不需求索引
<!-- 循环data数组，循环渲染当前标签 --> <li v-for="like in likes"> {{like.name}} </li> </ul><!-- 可以循环对象 --> <p v-for="value in person"> {{value}} </p> 若需求索引
<ul>
<!-- 循环data数组，得到索引和元素值，循环渲染当前标签 -->
<li v-for="(like, index) in likes">
{{index}} : {{like.name}}
</li>
</ul>
<!-- 可以循环对象 -->
<p v-for="(value, key) in person">
{{key}}： {{value}}
</p>
v-text / v-html
模板语法 Vue 两种数据引入
-
<p>{{ str }}</p>——插值表达式 -
<p v-text="str"></p>——内置指令
例：str = '<b>hello</b>';
不会被解析
Point: - 指令包含
Vue内置指令和自定义指令 - 指令中的语法符合和解析为JavaScript
- 解析规则，指令中的当做JavaScript解析为属性或方法（真假布尔-属性，方法-函数）
————————<p v-text="你真帅"></p>——会报错，非JavaScript语法
————————<p v-text=" '你真帅' "></p>——当做字符串 - 当指令和插值表达式同时存在，
指令生效 - 当需求解析为
HTML时，需要使用指令v-html
————————<p v-html="str"></p>
v-bind
- 动态绑定
- 作用：及时对页面的数据进行更改
- 用法：v-bind用来绑定一个属性,属性值作为javascript去执行
<a v-bind:href="baiduLink">百度一下</a>
-
可简写：
v-bind:属性=""=>:属性="" - 用法二： 绑定到自定义属性上
给每一个循环动态绑定一个唯一的key,-这个key一般是一条数据的id,或者name,title之类的唯一标识
<ul>
<!-- 循环data数据，得到索引和元素值，循环渲染当前标签 -->
<!-- 给每一个循环动态绑定一个唯一的key,-->
<!--这个key一般是一条数据的id,或者name,title之类的唯一标识 -->
<li v-for="(like, index) in likes" :key="like.id">
{{index}} : {{like.name}}
</li>
</ul>
- 用法三：
<div :class=" ' box ' "></div>——v-bind简写，后面的按照""里的内容按照JavaScript解析，标注为字符串，否则报错ReferenceError: box is not defined reference 查询，参考,引用
<div class="box" ></div>——css常规用法
- 用法四：
可以绑定一个对象,通过isAc的boolean来决定ac是否存在
注：外层的""中的内容解析为JavaScript
<div :class="{ac: isAc}"></div> - 多个
class样式
- 普通class和绑定class可以共存,最后把两部分叠加渲染
—— ——<div class="box" :class="{ac: isAc}"></div>
- 绑定一个数组
————<div :class="[className, {ac: isAc}]"></div>
v-on
<button v-on:click="onNumDecrease">decrease</button>
简写
<button @click="onNumAdd(12, $event)">Add</button>
解释： v-on:事件描述 = "函数方法名"
若函数方法名(a,b，$event)，传参，则事件对象亦通过传参获取，事件对象中有事件源等更多的。
若函数方法名没有进行传参，则默认实例Vue的methods的方法中接受的第一个参数为该事件对象e
事件修饰符（Event Modifier）
- Vue实现方法 只有纯粹的数据逻辑，而不是去处理DOM事件细节。即避免在方法中调用
e.preventDefault()或e.stopPropagation() - 修饰符是有点开头的
指令后缀来表示的,如：
v-on:click.stop="doThis",@click.stop="doThis"
事件修饰符：
-.stop—— 阻止事件继续传播---阻止冒泡
-.prevent—— 阻止默认事件（浏览器默认的交互行为，如右键菜单）
-.capture—— 事件监听时使用事件捕获模式， 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理（情况较少）,优先捕获，在进行冒泡
-.self—— 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的。不清楚是否冒泡，但只在当前元素时触发事件处理函数，不会传播父级
-.once——只触发一次事件
-.passive——@4B$@P6)Z$5@T)`U(0LK0H6.png
按键修饰符：
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
其他修饰键： link
