vue常见的指令

vue常见的指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

🍀v-text(相当于原生js中的innerText)

解析文本

两者等价
<span v-text="msg"></span>
<span>{{msg}}</span>

🍀v-html(相当于原生js中的innerHTML)

与v-text相比，v-html可以解析标签

<p v-html="<span>你好</span>"></p>

🍀v-once(只渲染一次)

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-text="msg"></span><br>
<span v-once>{{msg}}</span><br>
<button @click="msg = '滚滚'">改变msg</button>
点击按钮之后，第一个msg发生变化；第二个不发生变化

🍀v-cloak(解决页面加载时闪烁问题)

注意：在脚手架中，不会有闪烁问题，因为经过webpack打包处理过了

v-cloak指令的作用防止页面加载时出现闪烁问题，保持在元素上直到关联实例结束时进行编译
插值闪烁 两个{{}}会闪一下
原因：是先加载html 再加载 js 所以在vue.js还没有加载完成的时候 两个花括号会先出来
解决：

<style>
[v-cloak]{
	display:none
}
</style>
让带有插值语法的添加v-cloak属性在数据渲染完之后，v-cloak 属性会被自动去除
v-cloak一旦移除也就是没有这个属性了，属性选择器找不到该标签，就把该标签变成可见
<div v-cloak>{{message}}</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>

🍀v-show

v-show 元素始终被渲染并保存在dom中，它只是简单的切换css的display属性

<div v-show="bool">uu盘</div>
当bool值为true，页面中显示，bool值为false,给div设置display:none这个属性实现隐藏效果

🍀v-if

v-if 是惰性的，如果条件一开始为false,什么都不做，当条件为true才会创建元素，条件再为false就会销毁元素，不存在dom中

<div v-if="bool">uu盘</div>

也可以使用v-if v-else-if v-else语句联合使用
注意：使用时指令要属于同级关系才会有用

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

<script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
</script>

v-if和v-show的区别

• 相同点：给用户的感受都是元素的显示或隐藏
• 实现原理不同：v-if会动态创建或销毁dom元素，v-show会动态添加或移除display:none样式控制元素的显示或隐藏
• 性能不同：v-show比v-if性能好

🍀v-for 循环

v-for:循环动态绑定数据
可以循环数字：item从1开始到当前数字， index从0开始
可以循环字符串：item是每一个字符，index索引
可以循环对象：item是属性值，key是属性名，第三个参是索引index
可以循环数组：item是每一项，index是索引

<span>---数字--</span>
<p v-for="(item,index) in 2" :key="index">{{index}} -- {{item}}</p>
<span>---字符串--</span>
<p v-for="(item,index) in '你好'" :key="index">{{index}} -- {{item}}</p>
<span>---对象--</span>
<p v-for="(item,key,index) in {name:'zbt'}" :key="index">{{index}} -{{key}}- {{item}}</p>
<span>---数组--</span>
<p v-for="(item,index) in ['a','b','c','d']" :key="index">{{index}} -- {{item}}</p>

🍀v-pre

显示原始信息跳过编译过程

跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

<span v-pre>{{msg}}</span>   // 显示{{msg}}

🍀v-bind

v-bind 简写为 :
动态的绑定一个或者多个属性

# 绑定class
<div v-bind:class="flag?'active':''"></div>
v-bind可以简写成':'
<div :class="{textSize: flag1,textColor: flag2}"></div>
v-bind支持绑定一个数组
<div :class="['textSize','textColor']"></div>
# 绑定style
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
<div v-bind:style="[styleObj]"></div>
<script>
    new Vue({
      el: '#app',
      data: {
        flag:true,
        flag1:true,
        flag2:true,
        activeColor: 'red',
        fontSize: '30px',
        styleObj:{
        	color: 'red'
        }
      }
    })
</script>
.active { color: red; }
.textColor { color: green; }
.textSize { font-size:30px; }

🍀v-on

v-on 简写为 @
主要用来监听dom事件，用来实现事件绑定指令

<button v-on:click='fun'></button>
v-on 可以简写成@
<button @click='fun'></button>

事件函数传参
事件触发的时候，需要传递参数信息，把方法加小括号，$event是事件对象

在绑定事件时，如果没有小括号，那么第一个参数就是事件对象
<button @click='fun'></button>
<script>
    new Vue({
      el: '#app',
      data: {},
      methods:{
      	fun(e) { console.log(e)}	// 输出事件对象
      }
    })
</script>

如果有小括号，但是没有传参，那么e默认是undefined
<button @click='fun()'></button>
<script>
    new Vue({
      el: '#app',
      data: {},
      methods:{
      	fun(e) { console.log(e)}	// 输出undefined
      }
    })
</script>

如果既要有事件对象，也要传参，事件对象要写成$event
<button @click='fun($event,10)'></button>
<script>
    new Vue({
      el: '#app',
      data: {},
      methods:{
      	fun(e,num) { console.log(e,num)}
      }
    })
</script>

事件修饰符

常规修饰符:
.prevent[阻止默认事件]/stop[阻止冒泡]/once[只能触发一次] = ‘xxx’
.capture: 控制事件在捕获阶段执行[与事件冒泡的方向相反，事件捕获由外到内]
.passive: 修饰onscroll事件，不会等待onscroll完成，立即触发
.self:只有点击自己的时候才会执行
按键修饰符:
@keydown.enter/space/delete/up/right/down/left…=’ xxx’
键盘码: @keydown.13 = ‘xxx’
组合按键: @keydown.al1t.67 = 'xxx’ //=>ALT+C
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击

🍀v-model

用于在表单上创建双向数据绑定

能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值
v-model: 双向数据绑定；一般用于表单元素

// 下拉框
<div id="app">
  <select v-model="selected">
    <option value="A被选">A</option>
    <option value="B被选">B</option>
    <option value="C被选">C</option>
  </select>
  <span>Selected: {{ selected }}</span>	// 被选中元素的value 例如：A被选
</div>
--------------------------------------------------------------------
<div id="app">
  <select v-model="selected" multiple>
    <option value="A被选">A</option>
    <option value="B被选">B</option>
    <option value="C被选">C</option>
  </select>
  <span>Selected: {{ selected }}</span>	// 被选中元素的value的集合 例如：['A被选','B被选']
</div>

// 单选框
<div id="app">
  <input type="radio" value="small" v-model="picked">
  <label for="small">small</label>
  <br>
  <input type="radio" value="big" v-model="picked">
  <label for="big">big</label>
  <br>
  <span>Picked: {{ picked }}</span>		// 被选中元素的value  例如：small
</div>

// 复选框 
组合使用时，我们可以给它定义成一个数组(例如购物车每个单选框)
<div id="">
  <input type="checkbox" id="one" value="one" v-model="checkedNames">
  <label for="one">选项一</label>
  <input type="checkbox" id="two" value="two" v-model="checkedNames">
  <label for="two">选项二</label>
  <input type="checkbox" id="three" value="three" v-model="checkedNames">
  <label for="three">选项三</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>	// 被选中元素的value的集合 例如：['one','two']
</div>
-----------------------------------------------
单个时，我们可以给它定义成一个布尔值(例如购物车全选框)
<div id="app">
  <input type="checkbox" id="one" value="one" v-model="checkedNames">
  <label for="one">选项一</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>	// 布尔值
</div>
<script>
export default {
    data() {
        return {
          checkedNames:false
        };
    },
};
</script>

v-model修饰符

v-model也可以和.lazy、.trim和.number这些修饰符一起使用
在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步
<input v-model.lazy="msg" >		// v-model.lazy只有当焦点移除才会触发事件
去除字符串首尾的空格
<input v-model.trim="msg">
将数据转化为值类型
<input v-model.number="age" type="number">

🍀v-slot

详细请看vue中的slot

vue的自定义指令

详细请看vue的自定义指令