vue学习进度记录

时间:2022-12-17 00:19:45

HTML是大小写不敏感的,HTML中的属性@addList会被解析为@addlist,js再用@addList去找,是找不到的。

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
非父子组件通信