初识vue

来源:互联网 发布:新浪微博下载mac 编辑:程序博客网 时间:2024/05/21 09:12

什么是vue.js

vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。

另一方面,Vue 完全有能力驱动采用单文件组件 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

---------------------------------------------------------------引用来自vue.js官网

如何使用vue.js

方法一:直接从官网下载vue.js,再直接使用script标签引入文件

官网链接:vue.js官方下载

开发环境下选择开发版本,生产环境下选择生产版本


方法二:载入CDN

官方推荐载入地址: https://unpkg.com/vue 


方法三: 使用npm安装(对于不了解npm使用方法的,请查阅相关文档,这里不再说明)

npm install vue -g   //全局安装


万场Hello World!

接下来就来编写第一个Demo(请先载入vuejs文件或CDN)
HTML部分
<div id="app">  {{ message }} <!-- 将message渲染进DOM系统 --></div>

JS部分
var app = new Vue({ //创建一个Vue实例  el: '#app', //挂载ID为app的元素  data: {     message: 'Hello World!' //在data中声明一个message属性  }})

在浏览器下访问显示

表示成功渲染页面
----------------------------------------------------------------------------------------------

本章节只是简单的介绍以及如何使用vue.js。vue.js的基础部分,例如: 模版语法,计算属性,条件渲染等请阅读vue.js官方文档。此系列文章不做讲解
下一章将讲解有关webpack的使用
敬请关注,谢谢!


原创粉丝点击