Vue-简介

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

posted @ 2018-08-21 10:23  淡然微笑_Steven  阅读(281)  评论(0编辑  收藏  举报