春风得意马蹄疾
一日看尽长安花

Vue基础知识

概述

Vue.js是一套构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计,核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统的库结合是,Vue也完全能够为复杂的单页应用程序提供驱动

由于Vue使用getter/setter等ES5特性,所以兼容到IE9

什么是渐进式框架

如上图所示

  • 如果只是用Vue最基础的生命式渲染的功能,则完全可以把Vue当作一个模板引擎来使用
  • 如果想以组件化开发方式进行开发,则可以进一步使用Vue里面的组件系统
  • 如果要制作SPA(单页面应用),则使用Vue里面的客户端路由功能
  • 如果组件越来越多,需要共享一些数据,则可以使用Vue里的状态管理
  • 如果想在团队里知行统一的开发流程或规范,则可以使用构建工具
  • 所以,可以根据项目的复杂程度来自主选择使用Vue里面的功能

模板插值

前面介绍过,对于Vue最简单的应用就是将其当作一个模板引擎,也就是采用模板语法把数据渲染到DOM。Vue使用双大括号语法来进行文本插值,下面的message相当于一个变量或者占位符,最终会表示为真正的文本内容

<div id='app'>
     {{message}}
</div>

构造器

每个Vue.js应用都是通过构造函数Vue创建一个Vue的实例启动的,经常使用vm(ViewModel的简称)这个变量名表示Vue实例

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

在实例化Vue时,需要传入一个选项对象,它可以包括数据、挂载元素、方法、生命周期钩子等选项

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

上面为Vue()构造函数传入了一个对象,对象中包括el和data这两个参数

【el】

参数el,是element的缩写,用于提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标

参数值有两种类型,包括string或者HTMLElement

上例中,el:'#app'表示挂载目标为id为'app'的元素,也可以写为el:document.getElementById('app')

【data】

参数data表示Vue实例的数据对象

上例中,data:{message:'Hello Vue'}表示变量message所代表的真实值为'Hello Vue'

简单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<script src="vue.js"></script>    
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>
</html>

 得到如下所示的结果

Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » Vue基础知识
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x