Vue基础[指令][组件]

一 vue基础

1 模板

    <div id="app">
        {{name}}
    </div>

    var app = new Vue({
        'el': '#app',
        'data':{
            'name':5662
        }
    })

2 指令

2.1 v-text

解释：同普通模板使用类似，不会渲染html
格式：<div id="app"><div v-text='message'>{{message}}</div></div>

2.2 v-html

解释：可渲染html，会把标签内容全覆盖
格式：<div id="app"><div v-html='message'>{{message}}</div></div>

2.3 v-show

解释：其实就是display，使用时引入data函数里面写入的true或者false，前者表显示，后者不显示
格式：<div v-show='zai'>
特点：只是隐藏或者露出，都会提前加载出来

2.4 v-if

解释：与show类似，区别在于是否加载，如果传入的值为false，根本就不会加载那段代码
格式：<span v-if='ak47'>{{kl}}</span>
特别：

1. 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

        <span v-if='ak47==0'>1</span>
        <span v-else-if='ak47==1'>2</span>
        <span v-else-if='ak47==2'>3</span>
        <span v-else='ak47'>4</span>

2.5 v-for

解释：用来循环
格式：<div v-for="item in items" :key="item.id">{{ item.text }}</div>

        <span v-for='(kl,bl) in route'>
            {{kl}}:{{bl}}
            <br>
        </span>
        #说明当‘route’为json时，‘kl’和‘bl’是键和值,'index'为索引；当‘route’为数组时‘kl’和‘bl’是值与索引

特别：
1.特别需要注意的是。使用key为每个数据指定上，能大大提高渲染效率
2. 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

2.6 v-on

解释：可用于绑定事件，简化用法：@
格式：<button @click='a'>or <button v-on:click='a'>
特殊：如果绑定多个函数，需要每个函数都写上括号<button v-on:click='a(), b()'
事件对象：大全

2.6.1 参数传递

1. 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

2.6.2 修饰符

2.6.2.1 事件修饰符

1. 阻止冒泡：@click.stop=''
2. 阻止默认行为：@click.prevent=''
3. 自身元素触发生效：@click.self=''

2.6.2.2 按键修饰符

1. 默认：@keyup.enter=''
2. 自定义：
   2.1 @keyup.95=''
   2.2 Vue.config.keyCodes.a=95;@keyup.a='' #数字代表键盘里面的某个键，通过event .keyCode查看

2.7 v-bind

解释：用于绑定添加属性，简化用法:
格式：<div v-bind:class='kl'></div> #kl即data里面提前写入的内容

2.7.1 json

解释：需要true或者flase判断
<div :class='n' :style='nn'></div> #其中n需要布尔值传递

				data:{
					'n':{
                        "se":true,
                        'chang':true
                    },
                    'nn':{
                        'height':'600px'
                    }
				}

2.7.2 数组

解释：填入即展示
<div :class='abc'></div> #其中abc是写在data里面的

		data:{
				'abc':['jl','mn','lj']
				}

2.8 v-model

解释：vue默认基本都是动态显示，但是获取表单就需要该属性动态显示
格式：<input v-model='data'>#引号里面的内容来自data

2.8.1表单域修饰符

1. 转换为数字：v-model.number=''
2. 去掉开头和结尾的空格：v-model.trim=''
3. 失去焦点才获取值：v-model.lazy=''

2.8 v-pre

解释：表示不需要vue加载的标签
格式：<div v-pre>{{a}}</div>#显示{{a}}

2.8 v-cloak

解释：表示等vue编译完再显示，这样就看不见花括号了，需要自行添加style
格式：
1 .

    <style>
        [v-cloak] {
            display: none;
        }
    </style>

2 .<div v-cloak>{{a}}</div>

2.9 v-once

解释：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过；这可以用于优化更新性能。
格式：<div v-once>{{a}}</div>

3 计算属性

解释：计算属性的函数名可以当成data里面的数据一般调用到模板里面，此和data的区别就是数据在加入前是否经过计算

同方法的区别：computed和methods有区别：计算属性是基于缓存进行的，方法属性则不基于此，也就是计算属性在调用同一完全相同值时，直接从缓存中读取，更节约资源

格式：

	 computed: {
                lengt(a) {
                    return this.value.length
                }
            }
#默认参数为this

4 侦听器

解释：使用场景主要在数据变化时开销大，或者异步的场景
格式：

            watch: {
                aaa: function (a) {
                    const v = this.value.some(function (l) {
                        return l.data == a
                    })
                    if (v) {
                        this.de = '已经存在'
                    }
                    else {
                        this.de = '可以使用'
                    }
                }
#函数名必须是要监听的data里面的数据
#默认参数就是监听值本身

5 组合

5.1自定义指令

格式A：

Vue.directive('focus', {
            // inserted:当被绑定的元素插入到 DOM 中时……
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })
# 注意directive 和 inserted都是固定的
# 参数就是放置的元素
使用：放置于元素上<div v-focus>

格式B：

 directives:{
                focus:{
                    inserted(i){
                        i.focus()
                    }
                }
            }
#注意单词加‘s’
使用：放置于元素上<div v-focus>

5.2过滤器

解释：通过{{date | 过滤器名字}}来进行，能够有效处理数据，使用场景比较小，Vue3已经去除
格式A：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
使用：放置于元素上<div v-focus>

格式B：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
# 参数就是放置的元素
使用：放置于元素上<div v-focus>

6 组件

注意点：

1. 模板传入标签如果超过两个就不能并列写，而写为其外面添加一个标签：<div class="blog-post"><h3>{{ title }}</h3><div v-html="content"></div></div>这样写就是错误的

6.1 组件注册

6.1.1 全局变量

# 起名字最好按这个格式，不然容易出错
Vue.component('button-counter', {
  data(){
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
#data需要要函数调用，以此来因此每个实例可以维护一份被返回对象的独立的拷贝

6.1.2 局部变量

	 components:{
                'button-counter':{
                    data(){
                        return {
                            a :55
                        }
                    },
                    template:`
                    <div>{{a}}</div>
                    `
                }

嵌套使用：
解释：你希望 ComponentA 在 ComponentB 中可用

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

6.2 父传数字给子

1. 子组件在于data并列的地位上写入props: ['title']
2. template可以写入:`<div>{{title}}</div>`
3. 标签上写上<button-counter :title='data里面的数据'></button-counter>

6.3 子被父监听

解释：子组件根据用户要求需要父组件内容进行操作

基础：
$emit：触发事件（其能很方便的跨组件传递）;附加参数都会传给监听器回调定义的名字后面跟上参数 $emit('enlarge-text',5),父元素调用的函数默认参数就是该值

A:子组件

1. template写入:`<button v-on:click="$emit('enlarge-text')"> Enlarge text</button>`
2. this.$emit('ak',5)也可用来传递值

B:父组件

1. 标签上写上<button-counter @enlarge-text='go'></button-counter>
2. 在methods写入go函数

6.4 兄弟组件数据交互

解释：平行组件间的数据交互

基础：
$on: 监听事件；监听器 $on 监听到$emit函数后，会马上执行监听器里的函数，然后再执行 $emit 自定义事件里面的动作

1. 事件中心：var hub = new Vue(); #这个是空的它是专门来当傀儡的
2. methods里写入触发事件

	 methods: {
                goo: function () {
                    ak.$emit('a1', 2);
                }
            }

3. 写入在组件中写入：生命周期函数中mounted（其在html渲染完后触发）[它不属于methods，反而与其是并列关系]

#这里来监听，监听$emit的事件名称和带来的参数
	 mounted() {
                ak.$on('a2', (val) => {
                    this.num += val;
                })
            }

6.5 动态组件

解释：格式中的标签为固定，通过is绑定，等于号里面写的是模板的名称，通过动态改变模板名字就能展示出不同的内容
格式：<component :is="currentTabComponent"></component>
官方地址：地址

6.6 插槽

解释：产生的原因就是因为需要向自定义的组件里面写入内容

6.4.1 基础

# 插槽内容填充的位置就是自定义模板里面写入的东西
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

6.4.2 后备内容

解释：当自定义标签里面，若没有填入任何内容的时候slot里面内容自动写入；若填入则以填入的为主

<button type="submit">
  <slot>Submit</slot>
</button>

6.4.3 具名插槽

解释：定义多个插槽，通过name区分

1. 模板：

 template: `
        <div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer'></slot>
          </footer>
        </div>
      `

2. 标签

# 通过slot属性对应的名字就能对号入座，没有该的属性的默认去最初的插槽中去
    <base-la>
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-la>

6.4.4 作用域插槽

解释：目得是让html里面写的自定义标签能够访问到模板中的数据

1. template里面写入

            template: `
            <div>        
            <li v-for='i in ak' :key='i.id'> 
                <slot :go='i'></slot>#先给插槽绑定个属性，其中i指向循环的名字
            </li>   
            </div>
            `

2. html操控插槽的数据，固定写入slot-scope属性用于承接传入的go，再通过判断操控里面内容的显示

        <write-go :ak="ak" >
            <template slot-scope='bb'>
            
                 <strong v-if="bb.go.id == 2">{{bb.go.name}}</strong>
                <span v-else>{{bb.go.name}}</span>
                
            </template>
        </write-go>