vuejs是一门轻量级的MVVM框架，这几年前端开发已经不再是去适配低版本的PC浏览器，对于大部分国内一线的移动互联网公司的前端开发者，移动端的前端项目需求尤其强烈，用户体验也一再被大家提及，页面已经不能简单地通过重新渲染来更新数据的频繁变化，后端的一些MVC模式也在往前端框架迁移。
VUE是MVVM框架，相比于MVP 和 MVC框架，MVVM只是把MVC的Controller和MVP的presenter改成了viewModel,view的变化会自动更新到viewModel,viewModel的变化也会自动同步到view上显示。 这种自动同步是因为viewmodel中属性实现了observer，当属性变更时都能触发对应的操作。
vuejs开发环境搭建及热更新
vue自带cli脚手架工具 vue-cli，运行npm install -g vue-cli 全局安装vue脚手架
安装vue-cli脚手架工具
运行vue init webpack my-project 创建一个基于webpack的模板新项目
初始化一个vue模板
安装完成之后会在我们的文件夹生成一个my-first-vue-project文件夹，我们可以查看package.json文件中查看scripts命令，
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
npm run dev便是启动vue项目的命令。执行成功以后，我们就可以看到Vue的欢迎页面。
在这里我们说一下vue的热更新，在项目的src文件夹中的app.vue文件修改，首页会自动更新，这也是Vue这套脚手架提供的一个功能。
从vue到页面，这种vue文件是怎么生成页面的呢，这种前端开发工具和工程 化的工具非常盛行和便捷，所以vue有这种用于webpack的插件，通过webpack工具，把vue打包打成js文件，其中js就是一个新vue对象，展现层都在html中。
这是vue一个最简单的模板渲染的应用
vue组件的重要选项：实例化一个vue对象
data是数据methods是方法 watch是监听
看完vue对象之后 我们可能会有一个疑问，vue和vue对象 和页面之间是怎么样联系的呢？
vue模板指令 -html和vue对象的粘合剂，数据渲染：v-text v-html {{}} 模版指令是写在html中
v-html 是解析html元素
v-text是直接渲染内容
v-if 和 v-show 都是控制隐藏 v-if是直接不显示该dom元素 v-show是由条件语句来控制元素的display是block or none 在代码中是可以看到dom元素的
v-for循环渲染
v-for
v-on 事件绑定 可以简写成@click
v-bind 是指对dom元素的属性的一些操作 v-bind绑定Src 赋值为imageSrc 最常用的还是class 因为比较常用所以也有简写:class 假如里面是对象，key就是是否有这个class的判断，假如是一个数组，这个classA,和classB在data里面，就是一个字符串，是需要直接展现出来的。
小结：
new一个vue对象的时候，可以设置它的属性，其中最重要的包括三个，分别是Data，methods,watch
其中Data代表Vue的数据，methods代表vue对象的方法，watch设置了对象监听的方法。
vue对象里的设置通过html指令进行关联
重要的指令包括
- v-text 渲染数据
- v-if 控制显示
- v-on绑定事件
- v-for循环渲染等
vue生命周期
vue生命周期
网友评论