06 vue中is属性的使用及jquery的使用

一、is属性可以解决固定搭配问题
is.vue

<template>
  <div>
    <h4>this is isComponents</h4>
    <!-- is可以解决固定搭配问题 -->
    <ul>
      <li is='vone'>111</li>
    </ul>
</div>
</template>
 <script>
	const vone = () => import('./one.vue')
	 components: {
	    vone
	  },
</script>
// 只在当前组件内有效
<style src='./style/is.css'></style>

one.vue组件

<template>
  <div>
    <h4>this is oneComponent</h4>
  </div>
</template>

二、is可以动态绑定组件(实现动画切换效果：此处用到了动画和ainmate.css)
is.vue

<template>
  <div>
    <h4>this is isComponents</h4>
    <!-- 动态组件 is前面要加: -->
    <button @click="name='vone'">one</button>
    <button @click="name='vtwo'">two</button>
    <transition enter-active-class="animate__animated animate__flipInY">
      <div :is='name'></div>
    </transition>
</div>
</template>
 <script>
	const vone = () => import('./one.vue')
	const vtwo = () => import('./two.vue')
export default {
	  data() {
	    return {
	      name: 'vone'
	    }
	  },
	 components: {
	    vone,
	    vtwo 
	  },
}
</script>
// 只在当前组件内有效
<style src='./style/is.css'></style>

三、vue 中使用jquery

npm i jquery --save

main.js中全局引入并挂载到原型上 （也可以在组价中引入）

import $ from 'jquery'
Vue.prototype.$=$

is.vue

<template>
  <div>
    <h4>this is isComponents</h4>
    <!-- jquery的使用 -->
    <button class="btn1">出现</button>
    <button class="btn2">消失</button>
    <div class="red"></div>
</div>
</template>
 <script>
	const vone = () => import('./one.vue')
	const vtwo = () => import('./two.vue')
export default {
	  data() {
	    return {
	      name: 'vone'
	    }
	  },
	   mounted() {
	    // jquery的逻辑代码写在mounted内
	    this.$('.btn1').click(() => {
	      this.name = 'vtwo'
	      this.$('.red').slideDown(400)
	    })
	    this.$('.btn2').click(() => {
	      this.name = 'vone'
	      this.$('.red').slideUp(400)
	    })
  },
	 components: {
	    vone,
	    vtwo 
	  },
}
</script>
// 只在当前组件内有效
<style src='./style/is.css'></style>