目前,前端主要有jquery、react、Angular、Vue等主流框架,各有其特点,可以进行对比
今天我们看一下Vue.js的魅力所在。
Vue.js是什么?
Vue(读音 /vjuː/,类似于 view)是一套构建用户界面的渐进式框架。与其他重量级别框架不同的是,Vue采用自底向上的增量开发的设计。Vue的核心只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue也完全能够为复杂的单页面应用程序提供驱动。
学习Vue.js,首先我们可以通过下面方式引进Vue,和引进jquery一样。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
1.声明式渲染
Vue.js核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM。
<div id="app">
{{message}}
</div>
var app = new Vue({
el: "#app",
data: {
message: 'hello world!'
}
})
就是这么简单,好像渲染一个字符串一样,其实Vue在后面已经帮我们搞定,将数据和DOM绑定在一起了,所有的元素都是响应式的。
打开浏览器的控制台,当我们修改app.message,视图层将会更新。
除了文本插值,我们还可以通过这样的方式绑定DOM元素属性:
<div id="app">
<span v-bind:title="message">鼠标停几秒钟就会发生改变</span>
</div>
var app = new Vue({
el: '#app',
data: {
message: '页面加载于' + new Date()
}
})
v-bind属性被称为指令,指令带有前缀 v-,以表示Vue提供的特殊属性,它们会在渲染的DOM上应用特殊的响应式行为,简言之,简言之,该指令的作用是:”将这个元素节点的title属性和Vue实例的message保持一致”
2.条件与循环
v-if指令控制切换一个元素的显示
<div id="app">
<p v-if="seen">显示</p>
</div>
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
继续在控制台上输出 app.seen = false,我们发现里面的显示消失了。
v-for指令 可以绑定数组中的数据,渲染每一个项目列表。
<div id="app">
<ul>
<li v-for="item in arr">
{{item.text}}
</li>
</ul>
</div>
var app = new Vue({
el: "#app",
data: {
arr: [
{ text: 'apple' },
{ text: 'banana' },
{ text: 'orange' }
]
}
})
3.处理用户输入
为了让用户和你的应用进行互动,我们可以用v-on指令绑定一个事件监听器,通过它调用我们Vue实例中定义的方法。
<div id="app">
<p>{{message}}</p>
<button v-on:click="reseverMessage">逆转消息</button>
</div>
var app = ({
el: "#app",
data: {
message: 'Hello World'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reveser.join('');
}
}
})
在reverse方法中,我们更新了数据,但没有触碰到DOM–所有的DOM都有Vue来处理,你编写的代码不需要关注底层逻辑。
Vue还提供了V-model指令,它能轻松实现表单输入和应用状态机之间的双向绑定。
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
var app = new Vue({
el: "#app",
data: {
message: "Hello World"
}
})
组件化引用构建
Vue系统是vue的另一个重要概念,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型引用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树。
在Vue里,一个组件本质上是一个拥有预定义选项的Vue实例,在Vue中注册组件很简单:
//定义名为todo-item的新组件
Vue.componnet('todo-item',{
template: '<li>这是个待办项</li>'
})
现在你可以用它构建另一个组件模板:
<ul>
<!-- 创建一个todo-item组件的实例 -->
<todo-item></todo-item>
</ul>
但是这样会为每个待办项渲染同样的文本,这看起来并不炫酷,我们应该将数组从父作用域中传到子组件。让我们来修改一下组件的定义,使之能够接受一个属性:
Vue.component('todo-item',{
//todo-item 组件现在接收一个"props",类似一个自定义的属性,这个属性名为todo.
props: ['todo'],
template: '<li>{{todo.text}}</li>'
})
现在我们可以使用v-bind指令将待办项传到每一个重复的组件中:
<div id="app">
<ul>
<!-- 现在我们为每个todo-item提供待办项对象 -->
<!-- 待办项对象是变量,即其内容是可以动态的 -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ul>
</div>
var app = new Vue({
el: "#app",
data: {
groceryList: [
{ text: '黄瓜菜' },
{ text: '青椒菜' },
{ text: '其他的菜' }
]
}
})
运行结果如下:
- 黄瓜菜
- 青椒菜
- 其他的菜
在一个大型应用中,有必要将整个应用程序划分为组件,以使开发可管理。这里有一个(假想的)使用了组件的应用模板是什么样的例子
<div id="app">
<app-nav></app-nav>
<app-view>
<app-slidebar></app-slidebar>
<app-content></app-content>
</app-view>
</div>
与自定义元素的关系
你可能会注意到Vue组件非常类似于自定义元素–它是Web组件规范的一部分,这是因为Vue的组件语法部分参考了该部分。例如,Vue组件实现了Slot API与is特性。但还是有几个区别:
1.Web组件规范仍然处理草案阶段,并且尚无浏览器原生实现,相比之下,Vue不需要任何补丁,并且在所有支持的浏览器(IE及更高版本)之下表现一致。必要时,Vue组件也可以包装于原生自定义元素之内。
2.Vue组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流,自定义事件通信以及构建工具集成。