基础知识->案例实践->todolist->vue-cli->todolist

1-1课程介绍

基础知识 （版本现已在2.5以上）

案例实践

todolist

vuecli项目构建工具的使用

再开始todolist功能

11111111111111

Vue.js

基础知识

案例实践

TodoList

Vue-cli

TodoList

vue.js课程介绍

【1】vue.js基础语法

【2】vue.js案例实践

【3】做一个小功能TodoList

【4】项目构建工具Vue-cli的使用（使用它构建vue.js标准的大型功能的工程目录，并在构建的目录下重新实现TodoList功能）

本次学习过程

1.v-if="" : 控制DOM存在与否；

v-show="" : 控制DOM显示与否；

v-for="（item, index）of list"  ：key="index": 控制循环列表的输出；（ 意为把 list 数组下的每一个元素赋值给变量名 item ,并把每个元素的下标存到对应的 index 中。PS : key 的值不可重复）

v-on（事件）的缩写是@

v-bind（绑定）的缩写是：

v-model（数据双向绑定）

2.通过this调用vue实例的data属性

this.list.push();往列表里添加值

如下this.inputValue=' '让提交后input框清空

3.computed: 计算属性

watch: 侦听器

methods: 定义按钮事件方法

data: 数据，值

template： 内容/模板

props:[''] 接受属性，参数

局部组件：通过components声明（在父组件中）

push()   方法 向对应函数添加值

4.在Vue里 ，每一个Vue组件，都是一个Vue实例  【实例=组件】；

Vue实例有的功能，Vue组件都拥有。

每个组件都是vue的实例；

每个实例的组成部分：

props、template、data、methods...

每一个组件都有一个template模板，如果没有写template，默认为挂载点下面的所有DOM标签作为模板。

5.vue中父组件向子组件传值是通过绑定属性的形式传递的，父组件可以监听子组件的绑定事件，子组件通过$emit 向外触发事件

监听子组件的自定义事件并绑定事件处理函数为handleDelete,即当子组件触发delete事件时，父组件监听到delete事件后，执行handleDelete函数，删除一个下标，模板发现少了一个下标，会把缺少下标的内容

还没学完，后续待更

基础知识>>案例实践>>TodoList>>Vue-cli>>TodoList

课程大纲：

• 基础语法

• 案例：Totolist

• 构建工具Vue-cli的使用

滴滴，美团都在使用vue.js开发

2017年github上vue.js树最多

vue真强大！

这个功能真好！

这个课程的代码我已经打包在 https://github.com/1171843306/Vue.js
大家可以去那里下载或者观看

课程流程图