Vue指令语法详解

Vue基础语法

一.Vue是什么

二.Vue实例成员

三.Vue指令(标红属性说明有简写语法)

1.v-text

2.v-html

3.v-on

4.v-bind

5.v-for

6.v-model

7.v-if

8.v-show

9.v-slot

四.计算属性computed

五.侦听器watch

---

一.Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

vue是一个框架 ： 很多个库的组合

vue作用：用于构建用户页面,把数据渲染到页面DOM上

vue特点： 渐进式(你不需要一开始就导入所有的功能，而是随着开发的进度，使用什么就导入什么)

二.Vue实例成员

el挂载点
        告诉vue要把数据渲染到哪一个盒子上
        挂载点只能是唯一的
data数据
        响应式： data数据发生变化，vue会自动更新视图
methods 事件方法
computed 计算属性
watch 侦听器

三.Vue指令(标红属性说明有简写语法)

指令本质： html自定义属性

指令的作用是让HTML标签拥有更多的功能

指令语法:     <标签名  v-指令名="指令值" >  {{ 插值 }}   </标签名>

1.v-text

设置元素的  innerText

2.v-html

设置元素的 innerHTML

3.v-on

作用：绑定事件

语法:   v-on:事件名="事件方法"

简写语法:   @事件名="事件方法"

修饰符：阻止默认事件
              @事件名.prevent="事件方法"
              键盘enter事件
              @keydown.enter="事件方法"
              阻止冒泡
              @事件名.stop="事件方法"

事件传参：行内事件
                  @事件名=" js代码 "
                  没有参数事件
                  @事件名=" 事件名 "
                  有参数事件
                  @事件名=" 事件名(实参,$event) "

4.v-bind

作用： 设置html属性的值

语法：v-bind:属性名="属性值"

简写语法:   :属性名 = “属性值”

样式绑定    :class="{ 类名:布尔值 }"
                  :style="{ 样式名:样式值 }"
                  类名和样式名有-, 就要使用 引号包起来

5.v-for

作用： 遍历数组，重复生成元素

语法:   v-for="(item,index) in 数组名"

6.v-model

作用 ： 表单的值 和 data数据   建立双向绑定

表单的值变化， data数据自动变化
data数据变化， 表单值自动变化

语法:   v-model="data属性"

修饰符：

 .lazy : 只在输入框 失去焦点 或 enter键才会绑定数据(降低数据更新频率)
.number : 把输入框字符串类型 转 数字类型 (能转就转，不能转就不转)
.trim : 去除字符串首尾空格

7.v-if

作用： 根据条件渲染元素

语法： v-if="布尔值"

8.v-show

作用： 修改元素的css样式display

语法： v-show="布尔值"

9.v-slot

(1)匿名插槽
    匿名作用:父组件传递html结构给子组件
    匿名插槽语法:
        父传:<子组件> html结构 </子组件>
        子传:<slot> 插槽默认内容 </slot>

(2)具名插槽
    具名插槽作用:父组件传递多个位置的html结构给子组件  
    具名插槽语法:
        v-slot指令可以简写为  #插槽名
        父传: 
                <子组件>
                     <template v-slot:插槽名>html结构</template>
                </子组件>
        子收:<slot name="插槽名"></slot>

(3)作用域插槽
    作用域插槽作用:
        子组件传递数据给父组件插槽
    作用域插槽语法:
        子传: <slot  属性名="属性名"></slot>
        父收: <template v-slot="对象名">html结构</template>

四.计算属性computed

作用： 解决模板语法的冗余问题

语法：只有get   

计算属性名(){
    return 计算属性值
}

            get + set 

计算属性名:{
    get(){
        return 计算属性值
     },
    set(value){

    }
}

五.侦听器watch

作用： 侦听data中某一个数据变化

语法:   

侦听值类型:   

data属性(newVal,oldVal){     }

侦听引用类型:   

data属性:{
   deep : true,
   handler(newVal,oldVal){
 
   }
}