Vue.js指令小结

主要简单的介绍一下Vue.js这个轻量级的前端框架的指令部分

Vue.js提供了很多的指令 ， 简化了我们写JS的复杂度，下面简单的介绍各个指令的常规用法 。

• v-text : 这个指令它的效果与双大括号效果是一样的，使用v-text可以避免因为js出错，而暴露了双括号里面的内容

<div id="app-text"> //下面两个效果一样 <span v-text="msg"></span> <span>{{msg}}</span> </div> <script> new.Vue({ el:"#app-text", data(){ return { msg:"hello Vue.js" } } }) </script>

• v-html ：这个指令的主要功能是把规范的html字符串渲染成浏览器可以解析的html内容

<div id="app-text">
      //v-html会使用h1标签，而v-text会输出原内容
      <span v-text="msg"></span>
      <p v-html="html-one"></p>
      <span v-text="html-two"/>
    </div>

new new Vue({
  el: "#app-text",
  data() {
    return {
      msg: "hello world",
      html-one: "<h1>hello world</h1>",
      html-two:"<h1>hello world</h1>"
    };
  }
});

• v-show : 这个指令作用是使标签是否可以显示出来，可以使标签存在于html内容中

<div id="app-text">
      //v-html会使用h1标签，而v-text会输出原内容
      <span v-text="msg"></span>
//显示在页面中
      <p v-show="true" v-html="html-one"></p>
//存在于页面中，但是不显示
      <span v-show="false" v-text="html-two"/>
    </div>
<script>
new Vue({
  el: "#app-text",
  data() {
    return {
      msg: "hello world",
      html-one: "<h1>hello world</h1>",
      html-two:"<h1>hello world</h1>"
    };
  }
});
</script>

• v-if : 用法于v-show一样， 不过如果值为False，那么就不会存在于页面中，一般如果页面只判断一次可以使用它
• v-else-if : 与v-if 和 v-else连起来用 ， 如果v-if不符合那就判断这个指令是否符合
• v-else : 如果v-if和v-else-if都不符合，那么就执行v-else里面的内容

v-for : 循环指令，可以传入Array | Object | number | string | Iterable 这些类型数据，然后去循环遍历

<div id="app-text">
      <span v-text="msg"></span>
      <p v-show="false">{{msg}}</p>

      <ul>
        <li v-for="(user,index) in users" :key="index">{{index}}--{{user}}</li>
      </ul>

      <!-- <p v-html="html"></p> -->
    </div>

<script>
new Vue({
  el: "#app-text",
  data() {
    return {
      msg: "hello world",
      html: "hello world html",
      users: ["小猪佩奇", "汪汪战队", "皮卡丘"]
    };
  }
});
</script>

• v-on : 绑定监听事件，可以缩写为@

<!-- 方法处理器 -->
//doThis 是一个method
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
//加上括号，可以传递需要的参数到method中
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
//@=v-on:
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
//<button>
//阻止触发第二个方法
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

• v-bind : 动态的绑定一个或多个prop组件到表达式,可缩写为:

<!-- 绑定一个属性 -->
//相当于 <img src="imageSrc">
<img v-bind:src="imageSrc">

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
//<div id="someProp" other-attr="otherProp">
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

• v-model : 双向绑定数据 ， 使用后在页面中输入，可以同步修改data中的属性,限制为：
  • <input>
  • <select>
  • <textarea>
  • components

<div id="app-text">

<!--

.lazy - 取代 input 监听 change 事件

.number - 输入字符串转为有效的数字

.trim - 输入首尾空格过滤 -->

<input type="text" v-model = "name">
</div>

<script>
new Vue({
el:"#app-text",
data(){
return {
name:""
}
}
})
</script>

• v-slot : 可以在父节点中向子节点添加内容

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

• v-pre : 这个指令的作用是跳过元素编译的过程

<div id="app-text">
      //v-html会使用h1标签，而v-text会输出原内容
      <span v-text="msg"></span>
//显示为{{msg}}
<span v-pre>{{msg}}</span>
    </div>

new new Vue({
  el: "#app-text",
  data() {
    return {
      msg: "hello world",
      html-one: "<h1>hello world</h1>",
      html-two:"<h1>hello world</h1>"
    };
  }
});

• v-cloak : 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。一般在网速较慢的时候会显示未经渲染的页面

//可以用这个方法测试体验一下
setTimeout(() => {
  new Vue({
    el: "#app-text",
    data() {
      return {
        msg: "hello world",
        html: "hello world html",
        users: ["小猪佩奇", "汪汪战队", "皮卡丘"]
      };
    },
    methods: {
      sayHello() {
        alert("say hello");
      },
      sayHi() {
        alert("say hello");
      }
    }
  });
}, 2000);

• v-once : 这个指令只渲染一次组件和元素，后面再次渲染就会变成被视为静态而忽略掉