VUE学习2——vue2.X入门+简单实例

一、 挂载点、模板与实例之间的关系
example:

挂载点： 上图中的div 标签，就是vue实例的挂载点，因为下面的el关联的元素就是 div的id。vue只会处理挂载点下的内容
模板: 在挂载点内部的内容叫做模板内容，也可在vue实例中编写模板内容

实例： 实例中指定挂载点，写上模板，vue会结合挂载点和模板生成对应的内容，将其放在挂载点中

二、 VUE实例中的数据，事件与方法

1. 数据
   example:
   

插值表达式： 将data中的message对应的值，插入到标签的{{message}}中；也可使用v-text或v-html指令来进行插值（v-text会将内容进行转义，v-html不会转义）

2. 事件、方法
   下图中给div标签中的div标签绑定了一个点击事件（使用了模板指令），当点击这个div时，触发handleClick方法，将message 对应的值转变为 world

ps:当想让页面显示发生变化时，不需要直接操作dom，只需要用this.message 去改变实例中的数据，vue实例会监听到数据的改变，会让页面改变

其中指令v-on:click  可以简写为@click

三、 VUE中属性绑定和双向数据绑定

1. 属性绑定
   下图中v-bind指的是当前这个标签的title属性值和 title这个数据项进行绑定。其中title="title"是一个js表达式，等号后的title表达的是 实例data中的title
   其中 指令 v-bind可以简写为冒号
   
2. 双向数据绑定

单向绑定： 数据决定页面的显示，但页面无法决定数据中的内容
双向绑定： 指令v-model，如下图，当input框中的内容发生变化时，content对应数据也会发生变化

四、计算属性和侦听器

1. 计算属性
   只有依赖的属性发生变化后，才会改变，如果没有发生变化，就会利用之前产生结果的缓存来返回结果
   

2. 侦听器

侦听器： 侦听器去监听某个数据的变化，一旦这个数据发生变化，就在侦听器（图中watch选项）中做业务逻辑

五、 v-if ，v-show，v-for

1. v-if or v-show

ps: v-show 和 v-if 的区别：使用v-show，并没有将元素删除，而是将元素标签的display属性设置为none；使用v-if是将元素标签删除
ps: 如果频繁的对一个元素进行隐藏或显示操作，使用v-show比较好

2. v-for : 可循环展示数据

ps: 当使用v-for时，可以将上一个key的属性，可以增加渲染时的性能，要求每一项key值不能相同

这时，可以加一个index(在没有对列表进行频繁变更的情况下，使用index做key是可以的)

六、TodoList功能开发

七、TodoList中组件的拆分

1. 创建组件的方法： Vue.component('组件名')

2. 全局组件：
   

3. 局部组件：如下图，定义一个局部组件时，需要在实例中注册这个组件，利用components来进行注册

4. 将li 标签单独拆分为一个组件
   ps:外层向组件传递接收数据
   外层利用content属性向组件传递数据，组件利用props接收数据

八、 组件与实例的关系

1. 分析结构：下图中，定义了一个实例，实例的模板是外层整个div的内容，然后又定义了一个组件。
   在外层大的vue实例的模板中定义了一个组件（即一个小的vue实例）
   examle:

ps: 每一个vue的组件都是一个vue实例，任何一个vue的项目都是由千千万万个vue实例组成的。
证明： 可以给组件的模板中的标签绑定一个事件
结论： 每一个组件都可以定义methods，data，计算属性等，因此每个组件都是一个vue实例

2. 每一个实例若没有定义template,会去找挂载点，将挂载点的所有内容当作整个实例的模板

九、 实现TodoList的删除功能

1. vue中父组件向子组件传值是通过属性的方式来进行的
2. 如果想删除子组件数据，那么就要先删除父组件中渲染的这条数据删除掉
3. 子组件和父组件进行通信【发布——订阅模式】（子组件通过这个模式向父组件传值）