Vue简介
过去用原生JS开发,但兼容性出现问题,出现了JQuery,但JQuery没有对数据、业务逻辑进行抽离分层,使得项目维护,管理成本越来越高。所以有了框架的出现,维护项目更加方便。
Vue-轻量级MVVM 框架
基于MVVM模式实现的一套框架
V:View表示视图:人眼可读性强的数据
M:Model表示模型:机器可读性强的数据
VM:表示视图模型对象:将人眼可读性强的数据,转化为机器可读性强的数据;将机器可读性强的数据转化为人眼可读性强的数据。
1.初步了解Vuejs框架
2.介绍Vuejs开发环境的搭建和脚手架工具的使用
3.Vue.js具体的指令和项目实践
Vue是一个构建数据驱动的web界面的库
Vue.js是什么:一套构建用户界面的渐进式框架
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。与angular.js类似的是声明式开发,但性能高于angular,体积又小很多.
vue包含一系列的扩展插件:
* vue-router
* vue-resource
* vue-cli
* vuex
学习Vue
1). Vue.js官网:
http://cn.vuejs.org/
2). 尤雨溪知乎主页
https://www.zhihu.com/people/evanyou/answers
3). vue的github主页
https://github.com/vuejs
4). 掘金专题:
http://gold.xitu.io/tag/Vue.js
5). 安装Chrome插件:
Vue.js devtools
6). 安装Webstorm提示插件:
settings ==> plugin ==> browser repositories ==> 搜索vue.js ==>下载并重启
基本语法:
* 数据绑定语法
* 计算属性
* class和style绑定
* 条件渲染
* 列表渲染
* 方法与事件处理器
* 表单控件绑定
* 过渡
* 生命周期
Vue组件化、工程化
使用vue-cli :理解脚手架,使用Vue脚手架
Vue-插件:vue-ressource vue-router
页面指令
* v-text/v-html: 指定标签体
* v-text : 当作纯文本
* v-html : 将value作为html标签来解析
* v-if v-else v-show
* v-if : 如果vlaue为true, 当前标签会输出在页面中
* v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
* v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
* v-for : 遍历
* 遍历数组 : v-for="person in persons" $index
* 遍历对象 : v-for="value in person" $key
* v-on : 绑定事件监听
* v-on:事件名, 可以缩写为: @事件名
* 监视具体的按键: @keyup.keyCode @keyup.enter
* 阻止事件的冒泡和事件默认行为: @click.stop @click.prevent
* 隐含对象: $event
* v-bind : 强制绑定解析表达式
* 很多属性值是不支持表达式的, 就可以使用v-bind
* 可以缩写为: :id='name'
* :class
* :class="a"
* :class="{classA : isA, classB : isB}"
* :class="[classA, classB]"
* :style
:style="{color : color}"
* v-model
* 双向数据绑定
* v-el : 标识某个标签
* v-el:xxx
* 读取得到标签对象: this.$els.xxx