vue 基础之基本指令以及使用

Posted 2020-12-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 基础之基本指令以及使用相关的知识，希望对你有一定的参考价值。

组件

组件的定义：为例拆分Vue实例的代码，能够以不同的组件划分出不同的功能，需要什么样的功能就调用什么样的组件。

组件的创建

全局组件

模板的创建

使用vue.extend()创建组件模板

var com=Vue.extend({
 //模板组件中只能有一个根节点
 template:‘<div><h3>这里是组件模板</h3><div>这是一个div</div></div>‘
 })

在html中创建组件

应该放在受控区域外

<template id="tmp1">
    <div id="">
        <div id="">这是组件的创建方式
        </div>
        <p>这是段落</p>
    </div>
<template>

使用`Vue.component()`创建组件

Vue.component(‘myCom1‘,com)
Vue.component(‘myCom2‘,{
    template:‘#tmp1‘
})

在html中使用

注意

在命名时使用驼峰命名法的，在HTML中应该修改为小写并用-连接，如myCom1,在HTML中应该写成<my-com1></my-com1

自定义Vue组件应放在已经实例化的vue组件中才能显示。

<div id=‘app‘>
    <my-com1></my-com1>
    <my-com2></my-com2>
</div>

显示效果如下：
技术图片

局部组件

相比起全局组件，局部组件只能在同一个实例内才能被调用。
局部组件的写法和全局组件差不多。唯一不同就是：局部组件要写在Vue实例里面。
也就是说，组件模板声明相同，只是在调用时有所不用。

例如上面的模板，声明为局部组件的方法如下：

new Vue({

  el: ‘#app‘,
  components: {
    ‘my-com1‘: {
      template: `<button>{{msg}}</button>`,

      // data数据
      data: function() {
        return {
          msg: ‘显示数据‘
        }
      }
    },
    ‘my-com2‘: {
      // 引用 html 里需要用到的组件 id
      template: `#tmp1`,
    }
  }
})

组件中的data和method

method

组件可以声明自己的方法

Vue.component(‘com‘,{
    template:‘<h3 @click="show">h3 title</h3>‘
    methods:{
        show(){
            console.log(‘触发了show方法‘)
        }
    }
})

data

组件可以有自己的数据,但是组件中的数据要求必须是函数形式,返回值是一个对象.

Vue.component(‘com‘,{
    template:‘<h3 @click="show">h3 title---{{msg}}</h3>‘
    data:function(){
        return {
            msg:‘这是组件中的数据‘
        }
    }
})

为什么data必须是一个函数

对于这样一个组件

<template id="tmpl">
    <div>
        <input type="button" value="+1" @click="add" />
        <h3>{{count}}</h3>
    </div>
</template>

当页面中存在多个本组件时，希望每个添加都是独立的。

此时，如果data返回的是一个固定对象

<script type="text/javascript">
var dataObj = {count:0}
//  全局组件
Vue.component(‘count‘,{
    template:‘#tmpl‘,
    data(){
        //返回的是固定对象
        return dataObj},
    methods:{
        add(){
            this.count++}
        }
    })
    var vm = new Vue({
        el:‘#app‘,
    })
</script>

此时的效果为：
技术图片

所有的数据都是同步的。这是因为它们都指向了同一个对象。
为了避免这个问题，我们在函数中返回一个对象，每创建一个组件的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。

修改后的js如下：

<script type="text/javascript">
//  全局组件
Vue.component(‘count‘,{
    template:‘#tmpl‘,
    data(){
        //返回的是固定对象
        return {
            count:0
        }
    },
    methods:{
        add(){
            this.count++}
        }
    })
    var vm = new Vue({
        el:‘#app‘,
    })
</script>

现在的效果如下：
技术图片

组件的切换

通过v-if/v-else 切换

<login v-if="flag"></login>
<register v-else></register>

component元素

Vue中提供了component元素，用来展示组件的。
component相当于一个占位符，通过is：属性来指示要展示的组件。

 <a href="#" @click.prevent="comName=‘login‘">登录</a>
 <a href="#" @click.prevent="comName=‘register‘">注册</a>
 <!--这里是component元素-->
  <component :is="comName"></component>

<script type="text/javascript">
   Vue.component(‘login‘,{
       template:‘<h3>登录组件</h3>‘
   })
   Vue.component(‘register‘,{
       template:‘<h3>注册组件</h3>‘
   })
   var vm = new Vue({
       el:‘#app‘,
       data:{
           flag:false,comName:‘login‘
       }
</script>

效果图如下：
技术图片