快速学习掌握【Vue】

1.Vue官网    https://cn.vuejs.org

2.引入

通过script标签引入vue时最好放在head里，避免抖屏的情况。

3.实例

元素通过id 和new Vue对象的 el 进行绑定，该id对应一个挂载点，Vue实例只会处理挂载点的内容；模板是指可以将挂载点的内容写入template标签中，同样会生效。

{{msg}} 这样的语法叫做差值表达式，表示将某元素插入到页面中

<div id="root"><h1>luhao {{msg}}<h1></div>
<script>
        new Vue({        
              el: "#root",  
              // template:'<h1>luhao {{msg}}<h1>',
              data:{            
                        msg:"hello world" ，
                        number:123
                     }    
                  })
</script>

1.v-text：直接在页面上显示

2.v-html：以html在页面上显示

3.点击触发事件 v-on:click

4. v-bind: 属性绑定

5.双向数据绑定 v-model

.计算属性 computed

7.侦听器 watch

当需要对某个对象的改变进行侦听时，可以通过watch来完成。例如：要计算姓和名改变的次数。（代码见6：计算属性）

当需要对多个值进行计算时，可以使用computed获取最终结果。例如：要获得全名，将姓和名拼接起来。

8.条件判断 v-if

当需要通过点击按钮对div内的对象进行判断时，如果对象为显示状态就隐藏起来，如果对象是隐藏状态就显示它，可以通过v-if来处理。

9.显示和隐藏 v-show

当需要对元素进行显示和隐藏时，可以通过v-show来实现，基本功能和v-if类似，但是不会销毁dom上的对象，只是将其隐藏起来，相当于加了一个display:none的属性，和v-if相比性能较高，如果是需要频繁切换隐藏显示状态的元素，使用v-show比较好。

<div v-show="show">hello world</div>

10.遍历 v-for

当需要遍历一个列表里的值时，可以用v-for。index为每个元素的编号，可以作为key值，::key可以提升数据加载的效率。

 

4.实现简易TodoList

TodoList：相当于一个任务列表，要实现的功能是通过页面添加删除任务列表。具体实现可以查看代码以及注释，主要原理是通过发布订阅模式实现父组件和子组件的属性传值来对数组进行。