Vue指令使用(v-once、v-cloak、v-pre、v-slot与v-on)（二）

vue中指令的使用

1、v-once

• 只会渲染元素或组件一次，即使后续的数据修改了，也不会渲染到页面上；
• 它后面不需要跟任何表达式,比如
  {{dvText}}

 <div id="app">
        
        <h1>{{passage}}h1>
        
        <h2 v-once>{{txt}}h2>
        
        <h3 v-once="onceTest">h3>
 div> 

    <script>
        let app = new Vue({
            el:"#app",
            data:{
               passage:"后面的小朋友们跟上啊",
               txt:"来了来了",
               onceTest:"hello"
            }
        });
    </script>

2、v-cloak
需要配合css使用
可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，
从绑定的 HTML 元素上被移除。
当网络缓慢，此时网页还在加载 Vue代码，页面来不及渲染，页面上就会闪现vue源代码。
我们可以使用 v-cloak 指令来解决这一问题。

 <div id="app" v-cloak>
     <div v-cloak>{{dvTxt}}div>
 div>

 <script>
        let app = new Vue({
            el: "#app",
            data: {
               dvTxt:"学习vue指令",
            }
        });
 </script>

3、v-pre
编译时，直接忽略这个元素和它子元素内容

<div id="app">
    
   <h1 v-pre :title="txt">{{txt}}h1>
   
   <p>{{txt}}p>
div>

   let app = new Vue({
      el:'#app',
      data:{
          txt:"学习v-pre指令"
      }
   });

控制台修改txt，对于v-pre对应的元素，数据修改后也不会渲染页面
如下：

4、v-slot
v-slot在组件中使用slot进行占位时，在slot标签内slot插槽定义一个name属性名。
在html内使用时需要使用template模板标签，在template标签内，
使用v-slot指令绑定插槽名，标签内写入需要添加的内容

<div id="app">
        
        <Study>
            
            <template v-slot:header>
                <h2>slot头部内容h2>
            template>

            <template v-slot:footer>
                <h2>slot尾部内容h2>
            template>
        Study>
    div>
    <template id='test'>
        <div class="container">
            <header>
                
                <slot name="header">slot>
            header>
            <section>
                主体内容部分
            section>
            <footer>
                
                <slot name='footer'>slot>
            footer>
        div>
    template>

    <script>
        // vue实例化在这里，放到定义组件前会报错
        // new Vue({
        //     el: "#app"
        // });

        // Vue.component()用来定义组件
        Vue.component('Study', {
            // template 组件内容
            template: "#test"
        });

        // 先定义组件，再实例化vue，表明挂载点
        new Vue({
            el: "#app"
        });
        
        // 不能使用vue的实例化对象来调用conmponent()
        // 报错:  app.component is not a function
  
    </script>

v-slot小结：

• 先定义组件，再实例化vue，表明挂载点
• 组件可以自定义
• 直接使用Vue.conmponent()来定义新组件

5、v-on
在vue中，通过v-on绑定事件，可以缩写为@
绑定事件的写法：
（1）<组件 v-on:事件名称='表达式'/>
（2）<组件 @事件名称='表达式'/>

v-on指令对几种事件绑定：

• 直接绑定事件：
  @事件名=“方法” ----- @click=“onClick”
• 绑定事件类
  v-on="{事件:方法}" ------- v-on="{mouseenter:onEnter,mouseout:onOut}"
• 阻止默认形为（提交时刷新）
  v-on:事件=“方法(event)” ------- @submit=“onSubmit(event)”
• 阻止默认形为二（提交时刷新）
  v-on:事件.行为=“方法” --------- @submit.prevent=“onSubmit2” 或者 @submit.stop=“onSubmit2”
• 键盘事件（最好配合阻止默认行为一起使用）
  v-on:事件.键值=“方法” ------- @keyup.enter=“onEnter”

组件的 methods 选项
在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，
且存放在 methods 中的函数方法可以通过组件实例（this）进行访问

   <div id="app">
        <div>
            
            <button v-on="{mouseenter:onEnter,mouseout:onOut}" @click="onClick">点击button>
           
            
            <form @submit="onSubmit($event)" action="">
                <input type="text">
                <button type="submit">提交button>
            form>
            
            
            <form @submit.prevent="onSubmit2" action="">
                <input type="text">
                <button type="submit">提交button>
            form>

            
            <form v-on:keyup="onKeyup" v-on:submit.prevent="onSubmit2">
                <input type="text">
                <button type="submit">提交button>
            form>

            
            <form @keyup.enter="onEnter" v-on:submit.prevent="onSubmit2">
                <input type="text">
                <button type="submit">提交button>
            form>
        div>
    div> 

   let app = new Vue({
      el: '#app',
      methods: {
      onClick: function () {
            console.log('onClick')
      },
     onEnter: function () {
            console.log("onEnter")
     },
     onOut: function () {
            console.log("onOut")
     },
     onSubmit: function (e) {
          e.preventDefault();
          console.log("onSubmit")
    },
    onSubmit2: function () {
          console.log("onSubmit2")
     },
    onKeyup: function () {
          console.log("onKeyup")
    }
  }
});