vue常见用法（二）

1、计算属性

需要用到computed函数

<!-- 计算属性 -->
<template>
  <div>
    <p>{{ getMsg }}</p>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg:'hello'
      }
    },
    //计算属性值
    computed:{
      getMsg(){
        return this.msg.split('').reverse().join("")
      }
    }
  }
</script>

2、Class与Style绑定

<!-- Class与Style绑定 -->
<template>
  <div>
    <!--  1、对象语法  -->
    <div>
      <p :class="{active:isActive}">当幸福来敲门</p>
      <button @click="changeActive">切换</button>
    </div>

    <!-- 2、数组语法 -->
    <div>
      <p :class="[c1,c2]">当幸福来敲门</p>
    </div>

    <!-- 3、数组嵌套对象语法 -->
    <div>
      <p :class="[c2,{active:isActive}]">当幸福来敲门</p>
    </div>

    <!-- 4、class静态绑定与动态绑定一起使用 -->
    <div>
      <p class="padding" :class="[c2,{active:isActive}]">当幸福来敲门</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        isActive:true,
        c1:'col',
        c2:'font'
      }
    },
    //计算属性值
    methods:{
      changeActive:function () {
        this.isActive = !this.isActive;
      }
    }
  }
</script>
<style scoped>
  .active{
    color: orange;
  }
  .col{
    color:red;
  }
  .font{
    font-size: 20px;
  }
  .padding{
    padding-left: 100px;
  }
</style>

3、表单输入绑定

<!-- 表单输入绑定 -->
<template>
  <div>
    <!--  1、双向数据绑定 v-model -->
    <div>
      <!--  input输入框    -->
      <input type="text" v-model="msg" />
      <p>{{ msg }}</p>

      <!--  复选框    -->
      <input type="checkbox" v-model="checked"/>
      <P>{{ checked }}</P>
    </div>

    <!--  2、修饰符 -->
    <div>
      <input type="text" v-model.lazy="lazyMsg" />
      <p>{{ lazyMsg }}</p>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg:'hello',
        checked:true,
        lazyMsg:'hello lazy'
      }
    }
  }
</script>

4、组件

4.1、组件结构

一个vue文件就是一个组件，它由template、script和style三个部分组成，template为必须项

<!-- 组件由一下三个部分组成 template为必须项 -->
<template>
  <div>
    这是一个组件
  </div>
</template>
<script>
  export default {
    name:"MyComp",
    data(){
      return{
        
      }
    }
  }
</script>
<!-- 指定scoped属性，样式只在当前组件中生效 -->
<style scoped>
  
</style>

4.2、组件复用

自定义一个计数组件MyComp.vue

<!-- 组件复用 -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count += 1">点击</button>
  </div>
</template>
<script>
  export default {
    name:"MyComp",
    data(){
      return{
        count:0
      }
    }
  }
</script>

在App.vue中多次引入（复用）

<template>
  <div id="app">
    <MyComp/>
    <MyComp/>
    <MyComp/>
  </div>
</template>

4.3、组件传参

自定义组件MyComp.vue，传参需要使用到props属性

<!-- 组件传参 -->
<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>
<script>
  export default {
    name:"MyComp",
    data(){
      return{
      }
    },
    props:["name"]
  }
</script>

在App.vue加载组件时为其赋值

<template>
  <div id="app">
    <MyComp name="周星驰" />
    <MyComp name="刘德华" />
    <MyComp/>
  </div>
</template>