vue基础

Published on in 前端 with 538 views

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 // 不是响应性的
```

Responses