vue 基础

本贴最后更新于 2153 天前,其中的信息可能已经物是人非

Vue.js 是什么?

Vue (读音 /vju ː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

var vm = new Vue({
	//选项
})

数据与方法

当一个 Vue 实例被创建时,它就向 Vue 的相应系统中加入了 data 对象,当 data 对象中的属性值发生改变时,视图也会发生“响应”,匹配更新的 data 对象属性值。

var vm = new Vue({
	el:"#app",
    data:{
    	message:'Hello Vue!',
        title:'this is title'
    }
})

当在浏览器控制台输入 vm.message = "Hello World" 时,视图也会被重新渲染。所以 data 中存在的属性是响应式的。
不过例外的是,如果使用的是 Object.freeze() 这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。

var obj = {
	foo:'bar'
}
Object.freeze(obj)
new Vue({
	el:'#app',
    data:obj
})

Vue 生命周期

  1. 生命周期钩子
    有四个:created,mounted,updateddestroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例
var vm = new Vue({
	data:{
    	a:1
    },
    created:function(){
    	// this指向vm实例
        console.log('a is:'+this.a);
    }
})
  1. 生命周期图示
    生命周期

模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。(当然后期可以直接写渲染函数 render 来代替)

插值

  1. 普通文本插值
    数据绑定最常见的形式就是使用双大括号的文本插值。
<span>Message:{{ msg }}</span>

当然这里的指令是响应式的,你可以用 v-once 来让插值处的内容不被更新。

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

注意:Vue 也支持完全的 javascript 表达式

{{ number+1 }}
{{ ok ? 'YES' : 'NO'}}
<div v-bind:id="'list-' + id"></div>
  1. HTML 插值
    双大括号只会将数据解释为普通文本,而无法解释为 HTML 代码,如果想插入 HTML 代码的值,需要使用 v-html 指令。
<p>用双大括号{{ rawHtml }}</p>
<p>用v-html指令<span v-html="rawHtml"></span></p>
=============
rawHtml => <span style="color:red">这里是红色</span>
  1. 特性
    双大括号语法不能作用在 HTML 的特性上,这是就需要使用 v-bind 指令。
<button v-bind:disabled="isDisabled">Button</button>

这里如果 isDisabled 为 true 则会显示 Button,否则不显示,当 isDisabled=null 时 button 则没有 disabled 特性

指令

指令是带有 v- 前缀的一些特殊特性,指令一般作用于当个 javascript 表达式(除 v-for 例外),指令的职责是当表达式的值改变时,响应式的作用于 DOM。

<p v-if="seen">现在你可以看到我</p>
  1. 参数
    一些指令能够接收一个"参数",在指令 名称后以 : 表示,例如 v-bind 可以用于响应式的更新 HTML 特性.
<a v-bind:href="url">...</a>

这里的 href 是参数,v-bindhref 特性与表达式 url 绑定.

  1. 修饰符
    修饰符是以半角符号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如:.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
  1. 缩写

v-bind 的缩写为 :

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 的缩写为 @

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

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

计算属性与监听器

为什么要有计算属性

模板内的表达式设计初衷是用于简单运算,如果在模板中放入太多的逻辑会让模板过重且难以维护。在这种使用复杂逻辑的情况下都应该使用 计算属性。
如下:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

举个栗子

<div id="app">
	<p>原始Message:"{{message}}"</p>
	<p>反转后的Message:"{{reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性与方法、侦听属性的比较

  1. 计算属性 vs 方法
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

其实两者执行结果是一样的。但是不同的是,method 在每次触发时都会被调用执行。而计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

  1. 计算属性 vs 侦听属性
    ++ 侦听属性 ++:Vue 提供的一种来观察和响应 Vue 实例上数据变动的一种属性。watch
    其实侦听属性相比较于计算属性是重复的,如下栗子:
    侦听属性:
<div id="demo">{{fullName}}</div>
var vm = new Vue({
	el:'#demo',
    data:{
    	firstName:'Foo',
        lastName:'Bar',
        fullName:'Foo Bar'
    },
    watch:{
    	firstName:function(val){
        	this.fullName = val+' '+this.lastName
        },
        lastName:function(val){
        	this.fullName = this.firstName+' '+val
        }
    }
})

计算属性:

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

注:计算属性默认只有 getter,当如果要 setter 时则需要如下操作

// ...
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]
    }
  }
}
// ...

侦听器

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

条件渲染和列表渲染

条件渲染 - v-if

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

列表渲染 - v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。

<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' }
    ]
  }
})

也可以直接使用键值的形式来直接获取属性

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

第三个参数 index 为索引

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

数组更新

  • 变异方法
  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. reverse()
  • 替换数组
    变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})
  • 注意事项
    由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
    1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    2.当你修改数组的长度时,例如:vm.items.length = newLength

    举个栗子:

    var vm = new Vue({
    data: {
    	items: ['a', 'b', 'c']
    }
    

})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
```

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3453 回帖 • 201 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    264 引用 • 665 回帖

相关帖子

回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...