vue

vue的特点

1）遵循 MVVM 模式

2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

Vue 扩展插件

1）vue-cli: vue 脚手架

2）vue-resource(axios): ajax 请求

3）vue-router: 路由

4）vuex: 状态管理

5）vue-lazyload: 图片懒加载

6）vue-scroller: 页面滑动相关

7）mint-ui: 基于 vue 的 UI 组件库(移动端)

8）element-ui: 基于 vue 的 UI 组件库(PC 端)

9）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

vue的基本使用

<div  id="app">
    <input  type="text"  v-model="username">
    <p>Hello,  {{username}}</p>
</div>

<script  type="text/javascript"  src="../js/vue.js"></script>
<script  type="text/javascript"> 
    new  Vue({
        el:  '#app', 
        data:  {
            username:  'vue'
        }
    })
</script>

模板语法

模板的理解

1）动态的 html 页面

2）包含了一些 JS 语法代码

     a.双大括号表达式

     b.指令(以 v-开头的自定义标签属性)

双大括号表达式

1）语法:   {{exp}}

2）功能: 向页面输出数据

3）可以调用对象的方法

强制数据绑定

1）功能: 指定变化的属性值

2）完整写法:

       v-bind:xxx='yyy' //yyy 会作为表达式解析执行
3）简洁写法:

      :xxx='yyy'

绑定事件监听

1）功能: 绑定指定事件名的回调函数

2）完整写法:

      v-on:keyup='xxx'
      v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
3）简洁写法:

      @keyup='xxx' @keyup.enter='xxx'

计算属性和监视

计算属性

1）在 computed 属性对象中定义计算属性的方法

2）在页面中使用{{方法名}}来显示计算的结果

监视属性

1）通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

2）当属性变化时, 回调函数自动调用, 在函数内部进行计算

计算属性高级

1）通过 getter/setter 实现对属性数据的显示和监视

2）计算属性存在缓存, 多次读取只执行一次 getter 计算

class 与 style 绑定

1）在应用界面中, 某个(些)元素的样式是变化的

2）class/style 绑定就是专门用来实现动态样式效果的技术

class 绑定

1）:class='xxx'

2）表达式是字符串: 'classA'

3）表达式是对象: {classA:isA, classB: isB}

4）表达式是数组: ['classA', 'classB']

style 绑定

1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"

2）其中 activeColor/fontSize 是 data 属性

列表渲染

列表显示指令

数组: v-for / index

对象: v-for / key

列表的更新显示

删除 item

替换 item

列表的高级处理

列表过滤

列表排序

事件处理

绑定监听:

1）v-on:xxx="fun"

2）@xxx="fun"

3）@xxx="fun(参数)"

4）默认事件形参: event

5）隐含属性对象: $event

事件修饰符

1）.prevent : 阻止事件的默认行为 event.preventDefault()

2）.stop : 停止事件冒泡 event.stopPropagation()

按键修饰符

1）.keycode : 操作的是某个 keycode 值的键

2）.keyName : 操作的某个按键名的键(少部分)

表单输入绑定

使用 v-model 对表单数据自动收集

1）text/textarea

2）checkbox

3）radio

4）select