vue 指令复习

1.“Mustache”语法插值：

<div id="app">
    <p>{{ msg }}</p>
</div>

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

2.v-text

<div id="app">
    <p v-text="msg"></p>
</div>

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

使用“Mustache”语法和v-text指令，会对数据原格式输出，即使数据为html标签，也会照样显示标签本身，不会进行解析，要让html解析，则需要使用v-html指令

3.v-html

<div id="app">
    <p v-html="msg"></p>
</div>

new Vue({
    el: '#app',
    data: {
        msg: '<b>Hello Vue.js</b>'
    }
});

4.v-cloak

<div id="app">
    <p v-cloak>苹果的价格为{{ msg }}元</p>
</div>

[v-cloak]: {
    display: none;
}

// 只显示msg，不显示其余文字内容（用于网速加载缓慢的情况下）

5.v-slot

先说一下插槽的分类：
匿名插槽(或默认插槽): 只能有一个
具名插槽: slot使用name命名
作用域插槽: 父组件用于接收子组件内数据

①具名插槽
有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场

//组件调用时
<MyFooter v-red :age.sync="age">
  <template v-slot:footer>
  //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
      <div>list</div>
  </template>
</MyFooter>
//书写组件时
<template>
    <div>
        {{age}}
        <div>
            <slot name='footer' />
            //这里name的值就是这个插槽的名称。
        </div>
    </div>
</template>

最后我们会在我们想要的位置将我们的元素放置。

②作用域插槽
作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值

//组件调用
 <ul>
   <myli :title="val.title">
   <template v-slot:footer="message">
       <div>{{message.aa}}</div>
   </template>
   </myli>
 </ul>
 //书写组件时
 <template>
    <li>
        <slot name='footer' :aa="title">
        </slot>
    </li>
</template>

// 注意事项
// 这里需要注意的是message是所有你绑定属性的集合，也就是你写的：aa=“title”会当做message的属性来实现
// 当然这里message可以换做其它的名称。

// 总结
// v-slot的出现是为了代替原有的slot和slot-scope
// 简化了一些复杂的语法。
// 一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。 

demo
父组件app.vue

<template>
    <div id="app">
        <h1>父子组件与兄弟组件通信</h1>
        <h3>子组件通信为 {{childMsg}}</h3>
        <my-bar :message="parentMsg" @showMsg="getMsg">
            <template #default>
                <ul>
                    <li>匿名插槽内容11</li>
                    <li>匿名插槽内容22</li>
                    <li>匿名插槽内容33</li>
                </ul>
            </template>
        </my-bar>
        <my-baz>
            <template v-slot:header="items">
                <p>具名插槽 header</p>
                <p>作用域插槽： {{items.user111.name}}</p>
            </template>
            <template v-slot:default>
                <p>匿名插槽内容</p>
            </template>
            <template v-slot:footer="haha">
                <p>具名插槽 footer</p>
                <p>作用域插槽： {{haha.test111.school}}</p>
            </template>
        </my-baz>
    </div>
</template>

<script>

import MyBar from '@/components/vueApi2/Bar.vue'
import MyBaz from '@/components/vueApi2/Baz.vue'

export default {
  name: 'App',
  components: {
    MyBar, MyBaz
  },
  data () {
    return {
      parentMsg: 'abc123',
      childMsg: ''
    }
  },
  methods: {
    getMsg(data) {
      this.childMsg = data
    }
  }
}
</script>

<style>
h1 {
  font-weight: normal;
}
</style>

子组件1

<template>
  <div class="tmpl">
    <h1>父组件传值为 {{message}}</h1>
    <input type="text" placeholder="请输入子组件内容" v-model="param">
    <button @click="sendParam">通信父组件</button>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Bar',
  props: {
    message: {
      type: String,
      default: '默认为空'
    }
  },
  data () {
    return {
      param: ''
    }
  },
  methods: {
    sendParam() {
      this.$emit('showMsg', this.param)
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
.tmpl {
  border: 1px solid #333;
  padding: 30px;
}
</style>

子组件2

<template>
  <div class="tmpl">
    <h1>Baz</h1>
    <h1>111111111111</h1>
    <slot name="header" :user111="user">{{ user.name }}</slot>
    <slot>啦啦啦我这里什么都没有写哦</slot>
    <slot name="footer" :test111="test">{{ test.school }}</slot>
  </div>
</template>

<script>
export default {
  name: 'Baz',
  data () {
    return {
      user: {
        name: '李四',
        age: 15
      },
      test: {
        school: '中山大学',
        adress: '海珠区'
      }
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
.tmpl {
  border: 1px solid #333;
  padding: 30px;
  margin-top: 30px;
}
</style>

6.v-pre

未使用v-pre指令之前，data数据保存着message的值hello world,当启动浏览器时，输出Hello World,i am vue…


使用v-pre指令之后，输出纯文本值{{message}}, i am vue

7.v-once

v-once在日常开发中用的很多，

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

常见用法如下：

当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的

<div id="app">
		<p v-once>{{msg}}</p>  //msg不会改变
		<p>{{msg}}</p>
		<p>
			<input type="text" v-model = "msg" name="">
		</p>
	</div>
	<script type="text/javascript">
		let vm = new Vue({
			el : '#app',
			data : {
				msg : "hello"
			}
		});
	</script>