vue学习进度记录

2017-11-27

vue的demo

vue的数据绑定

el属性

v-model与data选项

vue声明周期

created

mounted

beforeDestroy

插值与表达式

最基本的文本插值方法：{{}}

{{}}中，除了最简单的绑定属性外，还可以使用js表达式进行简单的运算，三目运算符等

v-html

过滤器

{{}}插值的尾部添加一个管道符"(|)"对数据进行过滤

通过给vue实例添加选项filters来设置过滤器

过滤器可以串联，也可以接收参数

指令和事件以及语法糖

v-bind:动态更新html元素上的属性，如id，class等，如<img v-bind:src="imgUrl" />

v-on:绑定监听事件，如：<button v-on:click="dealClick"></button>

click事件方法写在methods选项中。

vue代理了data和methods的数据，可以直接通过vue实例访问

语法糖：

v-bind可以直接写个冒号 :href=""

v-on可以直接用@ @click=""

计算属性

2017-11-28

计算属性

计算属性的get和set

计算属性缓存，计算属性与methods的区别

v-bind与class和style的绑定

v-bind指令

绑定class的几种方式：对象语法，数组语法，在组件上使用

绑定内联样式

2017-11-29

内置指令

v-cloak：经常与dispaly:none配合使用

v-once：元素或组件只渲染一次

v-if v-else-if v-else条件渲染

内置<template></template>

vue的key属性

v-show：css的dispaly属性

v-for：<li v-for="book in books">{{book.name}}</li>  v-for可以遍历数组，对象

数组更新

过滤与排序：使用计算属性

事件和方法

修饰符

2017-11-30

v-model与表单

绑定：输入框，单选按钮，互斥单选按钮 ，多选按钮，选择列表，

绑定值：单选按钮，复选框，选择列表

修饰符:.lay   .number   .trim

2017-12-03

组件的用法

props传递数据

单向数据流，父组件向子组件传递数据

组件通信，子组件向父组件传递数据

使用v-model

非父子组件通信