初识VUE
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
作者: 尤雨溪(华裔前Google工程师,目前再阿里巴巴上班)
在我们正式踏入VUE大门之前 先搞个简单Demo看下Vue的基础操作
HelloWorld
新建html 然后将Vue的js库引入
说明
按普通页面开发思维 要想使用vue的js库 肯定先引入
vue的语法 两个大括号进行赋值 这也是vue中最基本的文本赋值方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message"/>
<p>{{message}}</p>
</div>
// Vue的js库
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
new Vue({ // vue语法
el:'#app', // 给id=app的块元素进行渲染操作
data:{// 定义数据值 可有多个 ,多个之间使用逗号隔开
message:'HelloWorld-vue' // key=message value=HelloWorld
}
});
</script>
</body>
</html>