介绍一下Vue:
Vue.js是一套构建用户界面的渐进式JavaScript框架,它是以数据驱动和组件化的思想构建的,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue的特点:
- vue.js属于轻量级的框架;
- vue.js的数据时双向绑定的;
- vue.js中指令和组件分得更清晰;
- vue.js能够异步批量DOM更新;
- vue.js具有可扩展性,让用户可以在多个组件中复用共同的特性。
搭建步骤
# 全局安装 vue-cli
$ npm install --global vue-cli 安装脚手架
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project 项目名称
# 安装依赖,走你
$ cd my-project 进入项目
$ npm install 安装依赖
$ npm run dev 运行项目
用法如下:
首先把Vue.js用<script>标签引入 官网下载地址:https://vuejs.org/js/vue.min.js
每一个Vue都需要通过实例化来实现,语法如下:
<script src="https://npmcdn.com/vue/dist/vue.js">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
<div id="app">
<h1>message: : {{message:}}</h1>
</div>
在Vue构造器中有一个el参数,它是DOM中的id,我的理解是把数据绑定到模型上
data 是用来定义属性的 这里的message就是属性
也可以这样写 多个属性用 ,隔开
<script src="https://npmcdn.com/vue/dist/vue.js">
data = {message :"Hello Vue.js"}
var vm = new Vue({
el: '#app',
data: data
})
</script>
在页面中可以看到Hello Vue.js 效果如下:
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。