vue从入门到进阶：指令与事件（二）

前端开发作者： 2024-08-20 21:00:01

一.插值 v-once 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定： v-html 双大括号会将数据解释为普通文

v-once

span v-once>这个将不会改变: {{ msg }}</span>

v-html

<p>Using mustaches: {{ rawHtml }}>
>Using v-html directive: span v-html="rawHtml"></>

使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

div v-bind:id="'list-' + id"div>

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

 流控制也不会生效，请使用三元表达式 
{{ if (ok) { return message } }}

v-bind 缩写

 完整语法 -->
a v-bind:href="url"a>

 缩写 :hrefbutton v-bind:disabled="isButtonDisabled">Buttonbutton:disabled>

v-on 缩写

v-on:click="doSomething">...@click>

v-if

h1 v-if="ok">Yesh1>

在 <template> 元素上使用 v-if

template >
  >Title>Paragraph 1>Paragraph 2template>

v-else

="Math.random() > 0.5">
  Now you see me
v-else
  Now you don't
>

v-else-if

="type === 'A'"
  A
v-else-if="type === 'B'"
  B
="type === 'C'"
  C

  Not A/B/C
>

用 key 管理可复用的元素

="loginType === 'username'"label>Usernameinput placeholder="Enter your username">Email="Enter your email address">

="Enter your username" key="username-input"="Enter your email address"="email-input">

v-show

v-show>Hello!>

v-if vs v-show

v-if 与 v-for 一起使用

一个数组的v-for

ul id="example-1"li v-for="item in items"
    {{ item.message }}
  liul

var example1 = new Vue({
  el: '#example-1',data: {
    items: [
      { message: 'Foo' },{ message: 'Bar' }
    ]
  }
})

="example-2"="(item,index) in items"
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  

var example2 = new Vue({
  el: '#example-2',data: {
    parentMessage: 'Parent',items: [
      { message: 'Foo' },{ message: 'Bar' }
    ]
  }
})

Parent - 0 - Foo
Parent - 1 - Bar

="item of items">

一个对象的 v-for

="v-for-object" class="demo"="value in object"
    {{ value }}
  

new Vue({
  el: '#v-for-object',data: {
    object: {
      firstName: 'John',lastName: 'Doe',age: 30
    }
  }
})

John
Doe
30

="(value,key) in object"
  {{ key }}: {{ value }}
>

firstName: John
lastName: Doe
age: 30


  {{ index }}. {{ key }}: {{ value }}
>

key

="item in items" :key="item.id" 内容 >

数组更新检测

变异方法与替换数组

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

注意事项

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

// Vue.set
Vue.set(example1.items,indexOfItem,newValue)

 Array.prototype.splice
example1.items.splice(indexOfItem,1,newValue)

example1.items.splice(newLength)

对象更改检测注意事项

var vm = new Vue({
  data: {
    a: 1
  }
})
 `vm.a` 现在是响应式的

vm.b = 2
 `vm.b` 不是响应式的

ar vm =  Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

Vue.set(vm.userProfile,'age',27)

vm.$set(this.userProfile,27)

Object.assign(this.userProfile,{
  age: 27,favoriteColor: 'Vue Green'
})

this.userProfile = Object.assign({},
})

显示过滤/排序结果

="n in evenNumbers">{{ n }}

data: {
  numbers: [ 1,2,3,4,5 ]
},computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

="n in even(numbers)"值域 v-for

="n in 10">{{ n }} >

template-v-for

>
    >{{ item.msg }}class="divider">

一个组件的 v-for

my-component my-component>




my-component
  
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
>



="todo-list-example"input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  li
      is="todo-item"
      v-for="(todo,index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index,1)"
    >



Vue.component('todo-item'\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ']
})

 Vue({
  el: '#todo-list-example'123
      }
    ],nextTodoId: 4
  },methods: {
    addNewTodo:  () {
      .todos.push({
        id: this.nextTodoId++.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

v-for 与 v-if


="todo in todos" v-if="!todo.isComplete"
  {{ todo }}
>




="todos.length"="todo in todos"
    {{ todo }}
  p >No todos left!>


事件处理方法

 `greet` 是在下面定义的方法名 -->
  ="greet">Greet>


var example2 =  Vue({
  el: '#example-2' 在 `methods` 对象中定义方法
  methods: {
    greet:  (event) {
       `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
       `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

 也可以用 JavaScript 直接调用方法
example2.greet()  => 'Hello Vue.js!'

内联处理器中的方法

="example-3"="say('hi')">Say hi="say('what')">Say what

new Vue({
  el: '#example-3',methods: {
    say: function (message) {
      alert(message)
    }
  }
})



="warn('Form cannot be submitted yet.',$event)"
  Submit


// ...
methods: {
  warn: function (message,event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

事件修饰符


.stop
.prevent
.capture
.self
.once


 阻止单击事件继续传播 v-on:click.stop="doThis" 提交事件不再重载页面 form v-on:submit.prevent="onSubmit"form 修饰符可以串联 v-on:click.stop.prevent="doThat" 只有修饰符  添加事件监听器时使用事件捕获模式  即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 v-on:click.capture 只当在 event.target 是当前元素自身时触发处理函数  即事件不是从内部元素触发的 v-on:click.self>



 点击事件将只会触发一次 2.1.4 新增v-on:click.once>



 the scroll event will not cancel the default scroll behavior 2.3.0 新增 v-on:scroll.passive="onScroll">



按键修饰符

 只有在 keyCode 是 13 时调用 vm.submit() v-on:keyup.13="submit" 同上 v-on:keyup.enter 缩写语法 @keyup.enter>



.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right



 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自动匹配按键修饰符(2.5.0 新增)


@keyup.page-down="onPageDown">



系统修饰键(2.1.0 新增)


.ctrl
.alt
.shift
.meta



 Alt + C @keyup.alt.67="clear" Ctrl + Click @click.ctrl>Do something>


.exact 修饰符(2.5.0 新增)


 即使 Alt 或 Shift 被一同按下时也会触发 ="onClick">A 有且只有 Ctrl 被按下的时候才触发 @click.ctrl.exact="onCtrlClick" 没有任何系统修饰符被按下的时候才触发 @click.exact>

鼠标按钮修饰符(2.1.0 新增)

.left
.right
.middle






文本

="message" placeholder="edit me">Message is: {{ message }}>

多行文本

>Multiline message is:style="white-space: pre-line;">{{ message }}brtextarea ="add multiple lines"textarea>


复选框


type="checkbox" id v-model="checked"label for="checkbox">{{ checked }}>



='example-3'="jack" value="Jack"="checkedNames"="jack">Jack="john"="John"="john">John="mike"="Mike"="mike">Mike>Checked names: {{ checkedNames }} Vue({
  el: '#example-3'
input
  
  v-model="toggle"
  true-value="yes"
  false-value="no"
 当选中时
vm.toggle === 'yes'
 当没有选中时
vm.toggle === 'no'



单选按钮

="example-4"="radio"="one"="One"="picked"="one">One="two"="Two"="two">Two>Picked: {{ picked }} Vue({
  el: '#example-4'
  }
})

选择框


="example-5"select ="selected"option disabled value="">请选择option>B>Cselect>Selected: {{ selected }} Vue({
  el: '...'
  }
})




="example-6"="selected" multiple style="width: 50px;"

new Vue({
  el: '#example-6',data: {
    selected: []
  }
})



="option in options" v-bind:value="option.value"
    {{ option.text }}
  

new Vue({
  el: '...',data: {
    selected: 'A',options: [
      { text: 'One',value: 'A' },{ text: 'Two',value: 'B' },{ text: 'Three',value: 'C' }
    ]
  }
})

修饰符.lazy,.number,.trim
.lazy


 在“change”时而非“input”时更新 v-model.lazy="msg" >

.number


v-model.number="age" type="number">


.trim

v-model.trim="msg">