vue 自学笔记(1)

从to do list  开始 

　　　　一: 安装 

　　　　　1: 导入cdn

　　　　　　　　　　<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
　　　　二: 建立一个vue实例
　　　　　　　　　　在script中建立vue 对象
　　　　　　　　　　全部的 Vue 应用都是从建立一个实例开始的，它经过函数建立
　　　　　　　　Vue

　　　　　　　　　　从这个实例建立后，Vue 框架就经过这个vm实例管理它能够管理的内容。但它管理的是哪一部分呢？

　　　　　　　　　　

　　　　　　　　　　在 html 中，有一个 id 为 app 的 div 盒子，想必你也知道了，这个 id 为 app 的内容就是被vm实例管理的页面内容。

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　　　

　　　　　　　　咱们将 app 挂载到了vm实例上，如今vm就能够正式接管 app 下全部的内容了。vm中的数据写在 data 中， 这些数据也就是流向页面的数据，页面和数据相互影响。

　　　　　　　　页面的将数据呈如今页面的方式又是什么？Vue提供了不少方式，如今咱们在 demo 中使用最经常使用的小胡子语法。

　　　　　　　　

 

 

　　　　三:建立第一个组件
　　　　　　组件开发是使用框架开发的特点，对于页面能够重复使用的部分，咱们能够将其样式和功能抽离出来，以便之后反复使用。这里的 TodoList 的列表部分咱们能够抽离成独立的组件。


　　　　　　

　　　　组件分为全局组件和局部组件，这里咱们使用哪一种方式均可以。组件的 props 中的内容，是父组件传递进来的值。 这时，父组件就能够作，经过直接在子组件上写属性传值。

　　

　　　　三:实现单机删除todo

　　　　

咱们想实现单击 item 就删除该项，以前在渲染 TodoItem 的时候，咱们就给子组件绑定了一个 handleItemClick 方法。那咱们能直接在这个方法里写一个方法，把父组件的 state.list 中的一项删除掉么？

很显然是不能够的，这个时候咱们须要明确单向数据流的概念。

 

 

　　　　四:单项数据流

　　　　　　　单向数据流目的

 　　　　　　

通俗的来说，父组件能够给子组件传值，但子组件不能够直接去修改父组件的值。React 中也是这种设计思想。

其实这样作是一种安全的作法，在项目较大，子组件层级过多的状况下，层层传递，不少子组件使用一个父组件的传值，如果子组件直接改动父组件的值，就可能会形成其余子组件依赖的值出现问题。

 

　　　　　　五:传递数据

 

例如,咱们但愿把父组件Home.vue的数据传递给子组件，例如Header.vue.

 

能够经过props属性来进行传递.

 

传递数据三个步骤：

 

 

 

　　　　　　传递数据总结