vue笔记

1.v-once

2.v-html

插入html内容时直接使用{{}}将会被渲染成普通文本，使用v-html才会被渲染为html元素

<h1>{{htmlTxt}}</h1>

<h1  v-html>{{htmlTxt}}</h1>

data:{ htmlTxt:"<span>hello</span>" }

3.计算属性

<div>{{firstname+lastname}}</div>
data:{
   firstname:"张",
   lastname:"三"        
}

在HTML中使用js表达式时每次渲染都会计算一次，无论值有没有改变。

使用计算属性会提高渲染效率；

   <div>{{fullname}} </div>
 data(){
    return {
      firstname:'张',
      lastname:'三'
    }
  },
  computed:{
      fullname:function(){
          return  this.firstname + this.lastname
      }
  },

computed属性在变量值多次修改时会提高效率，它会将上次计算结果缓存下来，只有在变量内容改变时才会重新计算，而第一种表达式写法在每次都会重新计算。

//字符串逆序显示
<div>{{word.split("").reverse().join("")}}</div>
 data(){
    return {
      firstname:'张',
      lastname:'三',
          word:'music'
    }
  },

//数组过滤
<ul>
       <li v-for="item,index in oddnums" :key="index">
          <h3>{{item.num}}</h3>
      </li>
 </ul>
 data(){
    return {
    nums:[
      {
        id:1,
        num:1
      },
      {
        id:2,
        num:2
      },
      {
        id:3,
        num:3
      },
      {
        id:4,
        num:4
      }
    ]
    }
  },
  computed:{
    oddnums:function(){
      return this.nums.filter((item)=>{
        return item.num%2 == 0
      })
    }
  },

4. class绑定

//通过对象的方式决定是否存在某个类  对象里面可以放多个变量
 <div :class="{active:isActive}"></div>
//也可以和固定class同时使用
 <div class="page" :class="{active:isActive}"></div>
//直接放对象

 <div :class="styleObj"></div>
//直接放数组
<div :class="styleArr"></div>
//数组和对象混合使用
<div :class="styleObjArr"></div>
data(){
    return {
        isActive:true,
　　　　　styleObj:{active:false,test1:true,"test-1":false}
　　　　　styleArr:['red-bg','color'],
　　　　　styleObjArr:['red-bg',{active:true}]

     } 
} 

<style> .active{ width: 200px; height: 200px; background-color: skyblue; } </style>

5.事件修饰符

   <!-- .stop阻止事件冒泡，否则 clickparent  clickevent 都会触发 -->
   <div class="btnparent"  @click="clickParent">
     <button @click.stop="clickEvent">按钮</button>  //不加stop  输出clickparent  clickevent    加stop只输出clickevent
   </div>

 clickParent(){
      console.log('clickParent')
    },
    clickEvent(){
      console.log('clickEvent')
    },

6.表单输入绑定

   <!-- 表单输入绑定 双向绑定-->
   <div id="app">

     <!-- 输入框绑定 -->
     <input type="text" v-model="username">
     <h3>{{username}}</h3>

    <!-- 复选框绑定 -->
    <span v-for="(item,index) in fruits" :key="index" >
      {{item}}
      <input type="checkbox" v-model="checked" :value="item">
    </span>
    <h2>{{checked}}</h2>

     <!-- 单选框绑定 -->
    <span v-for="(item,index) in fruits" :key="index" >
      {{item}}
      <input type="radio" v-model="radiochecked" :value="item">
    </span>
    <h2>{{radiochecked}}</h2>

    <!-- 下拉选择框 -->
    <select name="select" id="" v-model="selected" >
      <option value="" disabled>请选择</option>
      <option v-for="(item,index) in fruits" :key="index"  :value="item">{{item}}</option>
    </select>
    <h2>{{selected}}</h2>

    <!-- 下拉复选框 按住ctrl复选 -->
    <select name="select" id="" v-model="mutiselected" multiple="multiple">
      <option v-for="(item,index) in fruits" :key="index"  :value="item">{{item}}</option>
    </select>
    <h2>{{mutiselected}}</h2>

    <!-- 绑定值一般返回字符串  使用number修饰符修改 -->
    <h2>未转换</h2>
    <input type="text" name="age" v-model="age" >
    <h3>{{age}}----{{typeof age}}</h3>

    <h2>转换后</h2>
    <input type="text" name="age" v-model.number="age" >
    <h3>{{age}}----{{typeof age}}</h3>

   </div>

data:{
      age:'',
    fruits:['苹果','香蕉','梨'],
    checked:[],
    selected:'',
    mutiselected:[],
    radiochecked:'',
    username:'姓名',
}

7.过渡动画（有问题，进入动画不生效）

 <!-- 过渡动画 -->
              <button @click="isShow = !isShow">切换按钮</button>
               <transition name="slide">
                   <!-- todo  只有淡出动画，进入动画无效 -->
                <div v-if="isShow" class="changediv"></div>
                </transition>

data:{
isShow:true
}
<style>
.slide-enter-active, .slide-leave-active {
  transition: all 2s ease;
}
.slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
  transform: translateX(500px);
  /* opacity: 0; */
}
.changediv{
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>

8.vue生命周期

beforecreate:数据和事件方法此时还未绑定到创建的vue对象上

created：数据data和事件方法methods已经绑定到vue对象上

beforemount：渲染之前，根据数据生成的dom对象是获取不到的

mounted：渲染之后，可以获取到数据生成的dom对象

beforeupdate：数据内容更新，但还未渲染到页面元素上

updated：数据更新，页面内容也更新

beforedestory：应用销毁之前

destoryed：应用销毁之后

注：页面上使用v-if时，每次true都会触发 beforecreate created beforemount mounted事件，每次false都会触发 beforedestory destoryed事件

v-show只有第一次会触发，其余时候不会，原理（display：none）

9.组件间传值

父组件向子组件传值：使用props

子组件向父组件传值1：使用$emit触发父组件事件，父组件监听该事件

//父组件

<child  @fathermethod="fathermethod"></child>

fathermethod(data){

　　//接收子组件传值数据并处理

}

//子组件

childMethod(){

　　this.$emit('fatherMethod',data)

}

子组件向父组件传值2：父组件直接将函数传递给子组件，子组件调用函数直接修改父组件的值

//父组件页面

<child :event="fathermethod"></child>

methods：{

fathermethod(data){

//console.log(data)

}

}

//子组件页面

props:{

event

}

methods：{

childMethods(){

 this.event(data)

}

}

子组件向父组件传值3：使用$parent直接调用父组件函数或修改父组件数据值

//子组件页面
<button  @click="$parent.fathermethod(data)"></button>

<button  @click="$parent.fatherdata = data"></button>

其他：$root.$children[0]....

10.组件上使用v-model

//子组件
<template>
      <input type="text" @input="$emit('input', $event.target.value)" v-model="username" >
</template>

<script>
export default {
  name: 'modelItem',
  props:{
      username:String
  },
}
</script>

//父组件
<template>
  <div class="home">
   <model-Item  v-model="username"/>
   <h3>{{username}}</h3>
  </div>
</template>

<script>
import modelItem from '@/components/v-model'
export default {
  name: 'Home',
  components: {
    modelItem
  },
  data(){
    return{
      username:''
    }
  }
</script>

11.插槽

//slot.vue
<template>
  <div class='container'>
      <div class="title">标题</div>
      <div class="content">
          <slot></slot>
      </div>
  </div>
</template>

//home.vue
<template>
  <div class="home">
   <!-- slot里面的变量内容只跟父元素有关 -->
   <slot-Item>
     <p>插槽内容,{{username}}</p>
   </slot-Item>
  </div>
</template>

data(){
    return{
      username:'11'
    }
  },

12.动态组件

使用 is attribute 来切换不同的组件

<keep-alive>

</keep-alive>

13.less

声明变量： @main-color:#ccc

混合：

 .default{

    margin:0;

    padding:0;

}

.container{

    .default()

    border:1px  solid  @main-color

}

其他：Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)

14.sass

变量声明：$primary-color: #333;

父选择器标识符：&

.article  a{
    &:hover{  //此处&:hover  等价  a:hover
        ....
    }
}

嵌套：Sass: Sass Basics | Sass 中文网 (bootcss.com)

posted on 2021-03-29 17:04 巍MG 阅读(86) 评论(0) 收藏举报

刷新页面返回顶部

vue笔记

公告