Vue.js 入门
Posted shi_zi_183
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 入门相关的知识，希望对你有一定的参考价值。
Vue.js入门
Vue.js是什么
Vue.js不是一个框架——它只聚焦视图层，是一个构建数据驱动的Web界面的库。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。
特性
确实轻量
除了以MVP模式代表的Riot.js外，Vue.js已经算是前端库里面体积非常小的，但不依赖其他库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
类似于AngularJS，可以用一些内置的简单指令(v-*)，也可以自定义指令，通过对应表达式值的变化就可以修改对应的DOM
插件化
Vue.js核心库不包含Router、AJAX、表单验证等功能，但是可以非常方便地加载对应地插件。
如何使用Vue.js
安装
1）script
如果项目直接通过script加载CDN文件
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2）npm
如果项目基于npm管理依赖，则可以使用npm来安装Vue，执行如下命令
npm i vue --save-dev
3）bower
如果项目基于bower管理依赖，则可以使用bower来安装Vue，执行如下命令：
bower i vue --save-dev
第一个Hello World程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="didi-navigator">
<ul>
<li v-for="tab in tabs">
tab.text
</li>
</ul>
</div>
<script type="text/javascript">
new Vue(
el: '#didi-navigator',
data:
tabs:[
text: '巴士',
text: '快车',
text: '专车',
text: '顺风车',
text: '出租车',
text: '代驾'
]
)
</script>
</body>
</html>
以上是关于Vue.js 入门的主要内容，如果未能解决你的问题，请参考以下文章