(3k字)入门Vue,看这一篇!

还在死看官方文档学Vue?看这一篇就完事了

基本内容:

  • {{ 属性变量名 }}花括号 大胡子写法
var app = new Vue({
  el: '#app',//选择器
  data: {
    message: 'Hello Vue!'
  }
})

常用指令:

1. v-bind

v-bind:属性名称=“data数据” 

因为相当常用,所以可以省略v-bind

:属性名称="数据"

同时可以使用[]来设置动态的属性名称:

​```hTml
<a v-bind:[attributeName]="url"> ... </a>

用于绑定属性

2. v-if

v-if="布尔类型变量"

   v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truthy值的时候被渲染

   可以添加v-else,v-else-if来进行条件渲染,运用方式与正常逻辑的类似

   类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

   可以在``<template>``元素上使用v-if条件来渲染分组

   通过v-if设置元素是否可见

​      可以用key来管理可复用的元素:

​     如果不加入Key,vue会尽可能地复用已有元素而不是从头渲染

​      但是假如加入了key值,那么会使得相近的元素成为完全独立,不进行复用

​     key的指定方式:

​```html

3.v-for

v-for="单项 in 数组"

用于遍历数组数据,设置渲染html

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

其中item是被迭代的数组元素的别名,items就是源数据的数组

也可以用 of 替代 in 作为分隔符

<div v-for="item of items"></div>

v-for 块中,我们可以访问所有父作用域的属性。

v-for 还支持一个可选的第二个参数,即当前项的索引。

使用方式:

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

也可以用 v-for 来遍历一个对象的属性。

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

这将会对该对象的内容进行遍历打印:

也可以提供第二个的参数为 property 名称 (也就是键名):

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

这样则类似于给定了对象数组中例举属性的名称(value只是属性的具体的值):

还可以用第三个参数index作为索引:

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

这将会打印具体的打印的索引值

变异:更改了原数组的具体内容

Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

对于非变异方法:

例如 filter()concat()slice() 。它们不会改变原始数组,而总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

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

建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

在遍历对象时,会按 Object.keys() 的结果遍历

v-for 也可以接受整数。在这种情况下,它会把模板重复对应次数。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
  • 当在组件上使用 v-for 时,key 现在是必须的。
<my-component v-for="item in items" :key="item.id"></my-component>

然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。(也就是必须手动bind:item,index以及key)

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

注意:

  • 不推荐同时使用 v-ifv-for

v-ifv-for 一起使用时,v-for 具有比 v-if 更高的优先级。

  • 由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
  1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题,你可以使用 splice

vm.items.splice(newLength)
  • 还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

可以添加一个新的 age 属性到嵌套的 userProfile 对象:

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

你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

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

4.v-on

v-on:事件类型="属性名(通常为函数)"

用于添加事件的绑定(注意方法要写在methods属性中)

比较常用,可以使用

@事件类型="属性名"

也可以使用动态参数[]的形式

v-on后接入的属性名可以加入不长的JavaScript代码

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

如:

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

还可以在之后调用JavaScript函数

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 阻止单击事件继续传播 -->
<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>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

5.v-model

v-model="属性名"

用于绑定表单输入内容和应用状态之间的双向绑定

可以将属性的值修改为输入内容

可以用 v-model 指令在表单 <input>``<textarea> ``<select> 元素上创建双向数据绑定。

本质上是语法糖,负责监听用户的输入事件来更新数据

v-model 会忽略所有表单元素的 valuecheckedselected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

6.v-once

用于禁止插值的改变(但是会影响到节点其他的数据绑定)

7.v-show

类似于v-if,但仅仅进行css中的display:none类型的样式切换

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

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

注意,v-show 不支持 元素,也不支持 v-else`。

与v-if的开销区别:

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

组件化应用构建:

  • 组件注册方法:
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

//进行实例化
var app = new Vue({
    el:'选择器'
})
  • 为组件添加属性:(props属性用于指定key值)
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop",类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

创建Vue实例:

  • 通过Vue()函数创建一个Vue实例,从而实现Vue框架的使用
var vm = new Vue({
  // 选项
})
  • 创建好Vue实例后,可以用已经有的属性添加进入Vue实例对象中,且在进行更新时能做到同步进行(双向更新)(但在调用Object.freeze(对象)方法之后将停止响应式交互)

  • 可以通过Vue实例,通过前缀$符号可以调用:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.data === data // => true
vm.el === document.getElementById('example') // => true

生命周期钩子:

  • 生命周期图示:

https://cn.vuejs.org/images/lifecycle.png?_sw-precache=b3251a15e5779fcfec925b78a149f5c8

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

​ ——Vue官网文档

模板语法:

  • 对于文本,应当使用“Mustache"语法,也就是双大括号{{}}

  • 修饰符:通过半角句号.来指明的特殊后缀

如:.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

计算属性与侦听器:

  • 计算属性是用来处理复杂逻辑求值的方法

通过computed:来定义计算属性(与data平级)

和methods方法的区别:

计算属性会留下缓存,

而方法则会随着调用而多次重复计算

计算属性是基于它们的响应式依赖来进行缓存的。

写法:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

还可以通过设置计算属性的getter和setter来实现计算属性的新设置(默认只有getter,如上所示):

这会同时影响到计算属性的数据基础

写法:

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
  • 侦听器watch

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

侦听器就是用来监控数据变化的,比计算属性更具有相应性,并且更加适合异步的操作

(给定官方文档中采用的是Ajax样例,用于设置异步的数据交换)

Class与Style绑定:

  • 可以通过数据绑定来操作元素的class列表和内联样式,因为class和style都是属性(attribute),可以用v-bind来处理它们:通过表达式计算出字符串的结果即可

Vue在将v-bind作用于class和style时做了增强,除了可以使用字符串以外,还支持使用对象或者数组

  • 对象语法:

我们可以传给 v-bind:class 一个对象,以动态地切换 class:

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActivetruthiness。(真值情况)

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

和如下 data:

data: {
  isActive: true,
  hasError: false
}

结果渲染为:

<div class="static active"></div>
  • 数组语法:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>
  • 用于组件:

当在一个自定义组件上使用 class 属性时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class:

<my-component class="baz boo"></my-component>

HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p>

对于带数据绑定 class 也同样适用:

<my-component v-bind:class="{ active: isActive }"></my-component>

isActive 为 truthy[1] 时,HTML 将被渲染成为:

<p class="foo bar active">Hi</p>
  • 绑定内联样式:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  • 对象语法:
data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好,这会让模板更清晰:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
  • 数组语法:

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

组件基础:

这里有一个 Vue 组件的示例:

// 定义一个名为 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' })

进行组件的复用时

data必须使用函数回调,否则多组件会公用一个data

组件:

通常情况下,一个应用会一课嵌套的组件数的形式来组织:

Component Tree

组件的两种注册类型:

全局注册和局部注册

全局注册:

Vue.component('my-component-name', {
  // ... options ...
})

评论

  1. .
    iPhone Safari
    3月前
    2021-3-17 15:01:48

    真不错👍

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇