欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuejs的使用-指令

程序员文章站 2024-01-14 09:24:34
...

vue指令的使用


<div id="app">
    <p>
        {{ this.$data.msg }}//使用vm上的$data属性
        //{{ }}的语法叫mustache语法
        //在DOM结构中使用js语法,这个类型称之为jsx语法糖
    </p>
    <p>
        {{ this._data.msg }}//使用vm上的私有属性_data
    </p>
    <p>
        {{ this.msg }}//使用vm上拥有的msg
    </p>
    <p>
        {{ msg }}//this可以省略
    </p>
</div>


mustache语法

  • mustache语法是一种模板语法,它又叫双大括号语法

vue在使用时有两部分:指令组件

指令

  • 指令需要模板语法的支持,即mustache语法的支持,但不能使用{{ }} ,只使用jsx语法糖(标签内直接显示需要双大括号).
  • 模板语法不支持输出语法(console.log alert prompt)
  • 作用:是用来操作DOM的,指令就是绑定在DOM身上的一个属性,这个属性具备一定的功能,这个功能用来操作DOM

指令的使用

  • 格式:v-xxx = “mustache语法”//格式参考angular(ng-xxx)
  • 指令
指令名称 作用 缩写
v-html = “data” 将数据展示在一个DOM内容中,可对html标签进行转义
v-text = “data” 将数据展示在一个DOM内容中,原样输出
v-bind:attr = “data” 将数据绑定在DOM属性上,数据改变DOM改变 :attr
v-if=boolean 操作的是元素是否存在,初始化时为false时不会创建,节约资源
v-show=boolean 操作的是元素的display属性一个属性经常切换显示效果时使用
v-for=“函数表达式” 用来循环渲染数据
v-on:事件类型 = “函数表达式” 用来绑定事件 @事件类型
v-model = “函数表达式” 双向数据绑定

v-bind:attr 扩展:

  • :src = “img”//img为data属性

  • :class 类名指令

    • 有两种形式:推荐使用数组
    1. :class={ [类名]:bool…}//等于一个对象,不加[]会被识别为一般的属性名,加了[]则为data中的属性名,不然单向数据绑定时无法识别
      • :class = “{[类名]: boolean表达式?true:false}”
        //可以通过三元运算来实现boolean值得判断
    2. :class = “[类名1,类名2,类名3]”//数据中的类名为data中的属性
      • :class = “[flag?size:’’]”
  • :style 样式指令

    • 有两种形式:
    1. :style = “{width:‘100px’}”//直接以对象的形式写要设置的样式
      • :style = “style”//或者把要设置的样式写成对象放到data中,再用data的属性名使用
    2. :style = “[style,border]”//以数组的形式使用data中的样式对象的属性名

v-if指令(指的是该DOM结构是否存在)

  1. v-if = boolean
  2. 初始化为假时不渲染,节约开销
  • 单路分支
    • v-if = “flag”//当为真时,渲染;假时删除或不渲染,
  • 双路分支
    • v-if = “flag”//当为真时,渲染,不然渲染v-else
    • v-else //v-if渲染时不渲染
  • 多路分支//就像switch-case
    • v-if = “flag1”//等价于case flag1
    • v-else-if = “flag2”//等价于case flag2
    • v-else //等价于default

v-show指令(指的是该DOM结构是否显示->display=none/block)

  1. v-show = boolean
  • v-show 操作的是一个DOM的display样式属性
  • 不管v-show的初始值是true或false,DOM结构都会渲染出来,true时可见,false是不可见

v-if vs v-show

v-if 有更高的切换开销,
v-show 有更高的初始渲染开销。

需要非常频繁地切换,则使用 v-show 较好;
如果在运行时条件很少改变,则使用 v-if 较好。

v-for(列表渲染)

  • 有两种列表渲染 for in 和 for of
  • for in 列表渲染
  1. 带一个参数
<li v-for = " item in num "> {{ item }} </li>
num 可以是数组,对象,字符串
item表示为值
  1. 带两个参数
<li v-for = "( item , key) in arr ">
    <p> item -- {{ item }} </p>
    <p> key ---{{ key }} </p>
</li>
//key 表示为索引值
  1. 带三个参数
<li v-for = " (item,key,index) in obj ">
    <p> item -- {{ item }} </p>
    <p> key -- {{ key }} </p>
    <p> index -- {{ index }} </p>
</li>
//index表示obj的下标

事件指令 v-on:事件类型

需要触发的事件都写在methods中
  • 事件传参

    • e :事件对象
    • 当事件传参时只有一个事件对象,则在指令的函数表达式中可以把事件对象省略。
    • 事件传参时如果同时存在 事件对象 和 一般的参数,则在指令的函数表达式中一定要把事件对象写出来,用$event表示
  • 事件的修饰符

    • 格式:v-on:事件类型.修饰符 = ‘函数表达式’
      @事件类型.修饰符 = ‘函数表达式’
    • 修饰符
      • .stop --> event.stopPropagation() 阻止事件冒泡
      • .prevent --> event.preventDefault() 阻止事件的默认行为
      • .once --> 只触发一次回调
  • 按键的修饰符

    • @keyup.修饰符 = 函数表达式
      • enter 按上 enter键时 触发
      • 13 按上 enter键时 触发 (keyCode)
      • 能使用按键修饰符的缘由
        • 原因:我们发现当我们需要书写很多下面类似按键判断代码的时候,发现代码在重复,我们希望代码能复用或是简写
        • 解决: 它将这部分代码封装在自己的 Vue.js中,然后我们来调用这个功能,我们通过按键修饰符来使用
    • 自定义按键修饰符键盘码
      • Vue.config.keyCodes.按键名 = code码

v-model 双向数据绑定

  • vue中通过 v-model 来进行双向数据绑定

  • v-model只用于表单元素

  • v-model默认绑定 value属性

  • v-model修饰符

    • .trim:去除首尾空格
    • .number:格式化数字
    • .jazy:失去焦点同步一次
    • 如果修饰符失效则通过事件绑定在methods种书写逻辑实现修饰符效果

Vue实例化


var vm = new Vue({
    el: '#app', // 将id为app的一部分DOM结构当做模板传入配置项,然后挂载在页面中
    data: {
        msg: 'hello Vue.js',
        arr: [ 1,2,3,4 ],
        obj: {
            id: 1,
            name: 'yyb',
            age: 18
        },
        json: [
            'aa',
            {
                id: 1,
                text: '睡觉'
            },
            {
                id: 2,
                text: '敲代码'
            }
        ]
    }//数据的定义
})