vue学习笔记

2020-05-13  本文已影响0人  史梦辰

Vue实例

数据和方法

实例生命周期钩子

模板语法

插值

指令

<p v-if="seen">现在你看到我了</p>
//v-if指令将根据表达式seen的值的真假来插入/移除<p>元素

//v-bind 用于响应式的更新HTML 属性
<a v-bind:href="url">...</a>
//在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

//v-on指令用于监听DOM事件
<a v-on:click="doSomething">...</a>

<a v-bind:[attributeName]="url"> ... </a>
// 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

<a v-on:[eventName]="doSomething"> ... </a>
//当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

-修饰符
-缩写 v-bind:href缩写 :href :[key] v-on缩写v-on:click @click @[event]

计算属性和监听器

计算属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Class与Style绑定

绑定HTML Class

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data: {
  isActive: true,
  hasError: false
}
//渲染结果为：
<div class="static active"></div>

条件渲染

v-if

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

用key管理可复用元素

\\每次切换时，输入框都将被重新渲染
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

-带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

<h1 v-show="ok">Hello!</h1>

v-if和v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

用v-for把一个数组对应为一组元素

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

//还可以支持第二个参数，即当前项的索引
<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

用v-for遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
   {{value}}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

-还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

事件处理

内联处理中的方法

<button v-on:click="warn('form cannot be submitted yet',$event)"></button>

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

事件修饰符

在vue事件处理程序中，方法只有处理纯粹的数据逻辑，而不是去处理DOM事件细节,vue为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能,不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">

exact修饰符

exact修饰符允许你控制由精确的系统修饰符组合触发的事件。

鼠标按键修饰符

表单输入绑定

修饰符

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

<input v-model.trim="msg" >

组件基础

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

组件复用

通过prop向子组件传递数据

Vue.component('blog-post',{
  props:['title'],
  template:'<h3>{{title}}</h3>'
})

监听子组件事件

通过插槽分发内容

<alert-box>
  Something bad happened.
</alert-box>
// 错误
//通过<slot>元素，早需要的地方加入插槽
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

组件注册

全局注册和局部注册

//通过一个普通的JS对象来定义组件
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
//然后在选项中定义想要使用的组件
new Vue({
  el:'#app',
  components:{
   'component-a':ComponentA,
   'component-b':ComponentB
 }
})

局部注册的组件在其子组件中不可用。

prop

单向数据流

插槽

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。

具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

处理边界情况

依赖注入

provide: function () {
  return {
    getMap: this.getMap
  }
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 property：

inject: ['getMap']
上一篇 下一篇

猜你喜欢

热点阅读