vuejs的使用-指令

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表示为值

2. 带两个参数

<li v-for = "( item , key) in arr ">
    <p> item -- {{ item }} </p>
    <p> key ---{{ key }} </p>
</li>
//key 表示为索引值

3. 带三个参数

<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: '敲代码'
            }
        ]
    }//数据的定义
})