Vue指令

镜底之余

于 2019-05-24 22:25:27 发布

阅读量104

点赞数 1

模板语法 mustache语法双大括号语法

模板语法支持性还是很高的，数据类型都是支持的，但是不支持输出语法（console.log alert）

Vue 指令

作用：是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM
这个指令需要模板语法的支持，所以我们采用jsx语法糖

格式：
v-xxx = “mustache语法”
v-xxx = “msg”
v-xxx = “{{msg}}” ×
v-html 将一个数据展示在一个DOM内容中， innerHTML( html属性 )

防止脚本攻击 xss CSRF

v-bind 单项数据绑定

使用技巧：凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
格式： v-bind:DOMattr = “data”
简写： :DOMattr = “data”

v-text 非转义输出
不会解析标签
class vs style

class

object

  <div :class = "{[size]:true,[color]: true,[box]: true}"></div>
  <div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div>
  size样式写在style标签里

arr

  <div :class = "[size,box,color]"></div>
  <div :class = "[class_flag?size:'',box,color]"></div>

style

object

  <div :style = "{width:'100px',height: '100px',background: 'blue'}"></div>
  <div :style = "style"></div>

arr

  <div :style = "[style,border]"></div>

条件渲染 v-if && v-show

两个指令，一个是 v-if , 另外一个是 v-show
- v-if 有三种使用形式
  - 单路分支
  - 双路分支
  - 多路分支
```
     <div id="app">
         <h3> v-if 单路</h3>
         <p v-if = "flag"> 单路分支 </p>
         <h3> v-if 双路 </h3>
         <p v-if = "flag"> 双路1 </p>
         <p v-else> 双路2 </p>
         <h3> v-if 多路 </h3>
         <p v-if = "type === 'A' "> A </p>
         <p v-else-if = " type === 'B'"> B </p>
         <p v-else> C </p>
     </div>
```
```
     new Vue({
        el: '#app',
        data: {
        msg: 'hello  下午到了',
        flag: false,
        type: 'A'
        }
    })
```
    - 1. v-if 如果值为false，那么绑定的DOM就会被销毁
    - 1. v-if 操作的是一个DOM的生成和销毁
    - 1. 如果v-if的初始值时false,那么这个DOM元素是不会渲染的
- v-show
  1. v-show 操作的是一个DOM的dispay样式属性
  2. 如果v-show的初始值是false,那么这个绑定的DOM元素是否会渲染呢？
    v-show不管值是什么，它都会渲染出来
- v-if vs v-show
  一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
- template
  template标签如果放在模板的范围内使用，那么将来不会被解析渲染

列表渲染
v-for 是用来做列表渲染的
- 格式
  v-for = " xxx in(of) data "
  举例：
  v-for = " item in(of) todos "
- 带参数的格式
  v-for = " (item,index) in todos "
- key( 留一部分 )
- 每次列表循环的后面都要绑定一个key,是为了进行DOM的唯一标识，这样就不会让vue因为惰性而影响列表的正常渲染
- 理想的key是使用数据中的id

数据的更新检测
- a 使用以下方法操作数组，可以检测变动
     push() pop() shift() unshift() splice() sort() reverse()
  - b filter(), concat() 和 slice() ,map(),新数组替换旧数组
  - c 不能检测以下变动的数组
      vm.items[indexOfItem] = newValue
      解决  (1)Vue.set(example1.items, indexOfItem, newValue)
vm.items.length = 0
      解决   (1)splice
methods 方法

事件的添加使用的是 v-on:eventType = ‘事件处理程序’

事件处理程序往options里面的methods配置项中书写

  <button v-on:click = "add"> + </button>

  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4]
    },
    methods: {
      add () {
        this.arr.push(5)
      }
    }
  })

computed 计算属性
- 1. 计算属性中存放的也是方法
- 1. 计算属性的方法中必须要有返回值
- 1. 计算属性的方法名(并且方法名还可以当做一个变量)可以像data选项中定义的数据一样使用

事件

指令v-on
格式 v-on:eventType = “事件处理程序名称”
简写 @eventType = ‘事件处理程序名称’
参数

<div id="app">
    <h3> 普通事件 </h3>
    <button v-on:click = 'normalHandler'> 普通事件 </button>
    <button @click = 'normalHandler'> 普通事件-简写 </button>
    <hr>
    <h3> 事件对象 </h3>
    <button @click = "eventHandler"> 事件对象 </button>
    <hr>
    <h3> 事件传参 </h3>
    <button @click = "arguHandler( 10,20 )"> 事件传参 </button>
    <button @click = "arguHandler( a,b )"> 事件传参 </button>
    <button @click = "argu_event_handler( a,b,$event )"> 事件传参 - 事件对象 </button>
</div>

     new Vue({
    el: '#app',
    data: {
      a: 10,
      b: 20
    },
    methods: {
      normalHandler () {
        alert('普通事件')
      },
      eventHandler ( e ) {
        console.log( e )
      },
      arguHandler ( a, b ) {
        alert( a + b )
      },
      argu_event_handler ( a,b,e) {
        console.log( e )
        console.log( a + b )
      }
    }
  })

 如果参数中需要事件对象
 解决： 在方法调用的时候，使用一个叫做 $event的作为实际参数

事件修饰符
格式： v-on:click.xxx = ‘handler’
xxx指的是修饰符的名称
修饰符使用有什么好处？
举例：事件冒泡案例
分析：发现 e.stopPropagation() 在每一个方法中都要使用，这个时候发现代码很冗余
通过@click.stop,@click.self可以解决代码冗余问题
按键修饰符
案例：敲击键盘的enter键，将用户输入的数据拿到手？
事件的书写：先写方法，然后在绑定DOM元素身上
原因：我们发现当我们需要书写很多下面类似代码的时候，发现代码在重复，我们希望代码能复用或是简写
解决：它将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用

 <div id="app">
    <input type="text" v-model.trim = "msg">
    <input type="text" v-model.number = "num">
    <h3> {{ msg }} </h3>
    <h3> {{num}} </h3>

    <hr>
    <h3> 购物车加减 </h3>
    <div>
      <button @click = "decrement"> - </button>
      <input type="text" v-model = 'number'>
      <button @click = "increment"> + </button>
    </div>
  </div>

     new Vue({
    el: '#app',
    data: {
      msg: '  hello 1902   ',
      num: 0.898098908,
      number: 1
    },
    methods: {
      increment () { //加
        this.number ++ 
      },
      decrement () { // 减
        this.number --
      }
    }
  })

使用单项数据绑定实现双向数据绑定

单项数据绑定： v-bind
VM -》 V
V -> VM ?
分析：键盘一输入内容就要获取input的值，然后修改vm数据

<div id="app">
    <input type="text" :value = "msg" @input = "getValue">
    <h3> {{ msg }} </h3>  
  </div>

    new Vue({
    el: '#app',
    data: {
      msg: '请输入'
    },
    methods: {
      getValue ( e ) {
        var val = e.target.value 
        this.msg = val
      }
    }
  })

镜底之余

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令

模板语法 mustache语法双大括号语法模板语法支持性还是很高的，数据类型都是支持的，但是不支持输出语法（console.log alert）Vue 指令作用：是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖格式：v-xxx = “mustache语法...
复制链接

扫一扫