今天我们来给大家讲一下Vue,以下纯干货~。
什么是Vue?
Vue是一套构建建用户界面的渐进式框架。
那么什么是渐进式框架呢?我在知乎上看到了一个比较好的答案,上面是这么说的:渐进式代表的含义是-主张最少。
每个框架都会自己的一些特点,在使用时会给使用者一些限制。比如说angular,他的两个版本都是强主张。如果你使用它,那么你必须要接受以下东西:-必须使用它的模块化机制-必须使用它们的依赖注入-必须使用它们的特殊形式定义组件(每个框架都会有,难以避免)。
但是Vue是渐进式的,他没有强主张,用起来很灵活,它只关注与视图层,只做该做的事情。
渐进式的含义:没有做职责之外的事情。
好了,接下来介绍一些基本的东西。
Vue起步
创建vue实例
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:
var vm = new Vue({
}) //这里vm(ViewModel的缩写)这个变量名就是vue实例
插值
#文本
数据绑定最常见的形式就是使用“Mustache”双大括号“{{ }}”的形式。
Mustache标签将会被替代为对应数据对象上的message属性的值。无论何时,绑定数据上的属性发生了改变,插值处的值也会发生改变。
<span>{{ message }}</span>
数据与方法
当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图也会发生改变。
var data = { a:1 }
<div class="active">
v-bind:class="{ active:isActive, text-danger:hasError}"
</div>
//data
data: {
isActive:true,
hasError:false
}
var vm = new Vue ({ data: data})vm.a === data.a //turevm.a=2data.a=2
当这些数据改变时,视图才会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的
比如:vm.b = 'hello'; 这里b的值将不会改变。如果有些属性在一开始并不需要而你之后会用到的话,那就可以想在data属性中
设置一些初始值:
data: {
message = ' ',
count = 0 ,
todos: [],
}
这里唯一例外的就是使用object.freeze();这会阻止修改现有属性,意味着响应式系统无法再追踪变化。
除了数据属性,Vue实例还暴露了一些有用的实例属性和方法。它们都有前缀$,以便和用户自定义的属性区分开来,例如:
<div id="app">
<span>{{ message }}</span>
</div>
var data = { message:1 }
var vm = new Vue ({
el: '#app',
data: data
})
那么这里vm.$el ===document.getElementById("app");
vm.$data ===data;
实例生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程,例如需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时跟新DOM,这过程中运行了一些叫做生命周期钩子函数,这给了用户在不同阶段添加代码的机会。(上一篇文章关于Vue生命周期和钩子函数的小理解这里就不多说啦)
Vue基本指令
v-bind
对象语法:
我们可以传给 v-bind:class一个对象,以动态的切换class
<div v-bind:class="{ active:isActive }"></div>
上面的语法表示active这个class的存在与否取决于isActive真实与否(truthy或falsy)。
Truthy(真值)指的是在Boolean上下文转换后的值为真的值,所有值都为真值,除非被定义为
falsy(false、0、”“、null、NaN、undefined)。
你也可以在对象中传入更多的属性来动态切换多个class。class和v-bind:class指令可以共存。
<div class="move"
v-bind:class="{active:isActive,'text-danger':hasError}"></div>
data: {
isActive: true,
hasError: false
}
结果渲染为:
<div class="move active"></div>
数组语法:
我们也可以把一个数组传给v-bind:class
<div v-bind:class="[activeClass, errorClass]"></div>
绑定内联样式 (v-bind:style)可以传入一个对象,也可以使用数组形式,与上面给用法是一样的。
缩写方式 v-bind:class 与:class是相等的。