vue常用指令和语法

1，文本渲染 v-text  只能解析文本不能解析标签

<div>{{data里面的变量名}}</div>
<div v-text="变量名"></div>

2，富文本渲染 v-html  可以解析标签

<div v-html="msg"></div>

<script>
   data(){
      return {
        msg:"我爱<Strong>中国</strong>"
    }
   }
</script>

3，插值表达式 利用表达式进行插值，将数据渲染到页面中

<div>{{age>=18? '已成年':'未成年'}}</div>
<div>{{age}}</div>
<script>
   data(){
      return {
         age:19
      }
   }
</script>

4，条件渲染，v-if  v-show

v-if 是从dom节点中移除，v-show是利用css的display:none;方式隐藏 频繁切换显示与隐藏用v-show,反之用v-if

<div v-if="age>18">你好</div>
<div v-else>大家好</div>

<div v-show="age>18">你好</div>
<div v-show="age<18">大家好</div>

5,for遍历 遍历必须要加key值  key必须是唯一值，加key值可以优化vue虚拟dom的diff算法。

<div v-for="(item,index) in list" :key="item">{{item}}</div>
<div v-for="(item,index) in user" :key="item"  >
   <span>{{item.name}}</span>
   <span>{{item.salary}}</span>
</div>
<script>
    data(){
       return {
           list:["vue","react","js"],
           user:[
              {name:'小刘',salary:'50w'},
              {name:'小付',salary:'50w'},
              {name:'小华',salary:'50w'},
            ] 
        } 
   }
</script>

6,属性绑定  v-bind :属性名，可以简写为 :属性名="表达式" 表达式里面可以写成对象的形式 ，也可以直接写一个数组。

<div :class="{active:true}"></div>
 //当为true时，div有这个class
<div :style="{'width':'100px'}"></div>

7，表单双向绑定 v-model绑定的时输入框的value值，如果表单的类型是radio单选框和checkbox复选框，v-model绑定的是checked的值。

v-model常用的三个修饰符，直接v-model.修饰符="绑定的变量" 。 .lazy失去焦点后再收集数据     

.number 输入字符串转为有效的数字。   .trim 输入去两边的空格

<input type="text" v-model="变量名" />
<input type="radio"  v-model="false"/>
<input type="text" v-model.lazy="变量名" />
<input type="text" v-model.number="变量名" />
<input type="text" v-model.trim="变量名" />
//select下拉框
<select v-model="city">
   <option value="北京">北京</option>
   <option value="上海">上海</option>
   <option value="杭州">杭州</option>
</select>
<script>
  data(){
     return {
        city:"北京"
     } 
  }
</script>

8,事件属性 用法有v-on:事件名，简写@事件名。 事件的回调要写在methods对象中，最终会在vm上，@click="demo"和@click="demo($event)"效果一致，后者可以传参。也有常见的事件修饰符，修饰符是由点开头的指令后缀来表示的。

.stop 阻止事件冒泡

//阻止默认事件继续发生
<button @click.stop="demo"></button>

//修饰符可以串联
<button @click.stop.prevent="demo"></button>

.precent 阻止默认事件发生

<a @click.prevent="doit"  href="http://www.baidu.com">阻止默认事件</a>

.once 事件只触发一次

//点击事件将只会触发一次
<button @click.once="demo">只触发一次</button>

按键修饰符 在监听键盘事件时，可以给v-on添加按键修饰符

常见的有.enter,  .delete,   .esc,   .space

//.enter 回车键
<input :@keyup.enter="show()" />
//.delete 删除或者退格键
<input :@keyup.delete ="show()" />
//.esc 退出键
<input :@keyup.esc ="show()" />
//.space 空格键
<input :@keyup.space ="show()" />

9,组件传参 父传子通过props传递参数，通过在父组件中使用属性绑定的方式将数据传递给子组件，在子组件中通过props接收并使用这些参数。子传父通过在子组件中使用$emit("自定义方法",参数)方法触发自定义事件，然后在父组件中通过@自定义事件

//父组件--------

<template>
   <div>
      <!--组件名和注册的名字一样-->
      <step :modelValue="size" @update:modelValue="size=$event"></step>
       <!-- @update:modelValue自定义事件这样写等同于v-model="size"  -->
      <step v-model="size"></step>
  </div>
</template>
<script>
    //引入组件
      import step from "组件的路径"
   export default{
     //注册组件
      components:{
         step
      },
      data(){
        return{
            size:20
           }
       }
    }
</script>

//子组件-----------------
<template>
   <div>
      <button @click="$emit('update:modelValue',modelValue-1)">-</button>
      <span>{{ modelValue}}</span>
      <button @click="$emit('update:modelValue',modelValue+1)">+</button>
  </div>
</template>
<script>
   export default {
      props:{
        modelValue:{
          type:Number,
           default:1
      }
    }
  }
</script>

其他组件传参

refs:  通过'refs'的属性可以在父组件中直接访问子组件的实例，可以通过子组件的方法和属性来进行数据传递 在父组件中给子组件添加ref属性：

<template>
  <child-component ref="childref"></child-component>
</template>
<script>
export default {
  mounted() {
    this.$refs.childref.methodName() // 调用子组件的方法
    this.$refs.childref.propertyName // 访问子组件的属性
  }
}
</script>

Provide/Inject：通过provide和inject选项可以在祖先组件中提供数据，然后在子孙组件中注入并使用这些数据。这种方式可以跨越多层次的组件传递数据。

//父组件----------------------------
<script>
export default {
  provide() {
    return {
      data: '提供的数据'
    }
  }
}
</script>

//子组件-----------------------------------
<script>
export default {
  inject: ['data'],
  mounted() {
    console.log(this.data) // 使用注入的数据
  }
}
</script>