1、简介
这里从官网摘录
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2、引入Vue.js
【通过script标签引入】
有2种版本,开发版(vue.js)和压缩版(vue.min.js)
如果使用开发环境版本,可以在浏览器控制台中查看帮助用的命令行警告
注意:要在head标签中去引用vue.js,如果在body标签中引用,则有可能出现页面抖屏的情况出现。
3、Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
解释:
⑴ el【挂载点】指的是Vue实例和哪个DOM节点做绑定(接管页面上的id='app'的元素里面的内容)
⑵ Vue里的数据,放到data里面
4、Vue和传统JavaScript的不同
原生的JS或jQuery是操作DOM元素;而Vue则是操作数据(着重数据的编写)