vue知识点11

1. Vue.js 是什么   

   Vue是一套用于构建用户界面的渐进式框架

2. vue的环境搭建(Vue2 )

3. 经典的hello world

        new Vue({

          el："挂载的元素"  挂载的元素不能是body或html

          data:{ key:value...}  data是存储数据的地方    (要把这数据渲染/挂载到模板里面)

          template："<div>模板的内容</div>" ，渲染数据的是模板，如果没有指定template,默认的模板就是el挂载的元素，如果el和template同时存在，

            渲染的是template模板的内容

         })

4. 插值表达式  {{ 插值表达式 }}  Mustache

5. jq用的是事件驱动，而vue用的是数据驱动的思路

    数据改变了，视图会“自动”改变，这叫数据驱动

6. 既然数据改变了，做了dom操作，视图才改变的，那么，效率怎么样？？（怎么解决：）

    虚拟dom技术提高dom操作的效率：（本质是js对象,对象里存储的是模板的内容） --> 当数据发生改变时，比对数据变化前后的对象的差异（diff算法）,

    找出变化的部分，对变化的部分做真实的dom操作, 来提高dom操作的效率

7. Vue是一个 MVVM 框架

    M   model        模型       存储数据的     data

    V   view         视图       模板 (template) 

    VM  viewModel    视图模型   vm (对应的是vue实例)

8. 监测的数据的变化的原理： Object.defineProperty  

    （采用 Object.defineProperty 原理来监听data里的数据的变化，观察者模式，观察这个数据什么时候发生变化）

9. vue的五大块：指令  组件  路由  vuex  第三方的插件 

    现在学习指令：

        1) v-bind    把变量的值绑定到标签的属性上       v-bind 可以简写为 :

10. 模板 template 

        1) template和el同时存在 渲染的是template的内容

        2) 模板的内容不能只是文本，必须要有标签/根元素

        3) 根元素只能有一个，若想有多个，要写v-if v-else-if才行(判断最终也只是渲染一个元素)

11. v-on 事件监听的指令  v-on:事件="事件处理函数"  *****

        1）事件处理函数是放在methods里面

        2） 实际处理函数不过调用时不传参数  传递的参数是$event

        3) 阻止冒泡 v-on:事件.stop，阻止默认的行为 v-on:事件.prevent

        4) 简写为 @

        5) 监听键盘事件  v-on:keyup.enter 回车  v-on:keyup.esc esc键

12. v-bind  :

        v-bind:style="{key:value....}"

        v-bind:class="{'类名':布尔值的表达式}"  常用

        v-bind:class="[类名1，类名2...]"

13. v-on   @

14.对差值表达式的深入理解

   1） 不能为 if for 这样的语句

   2) 替代if 

       a.可以使用三目运算符

       b.可以用指令 v-if   *******

       c.函数

15. v-if   是惰性的 条件不满足，不渲染

        例如:

        <p v-if="a>0">1</p>

        <p v-else-if="a===0">0</p>

        <p v-else>-1</p>

16.v-show 满足条件显示，不满足条件的就隐藏

17. v-for 指令

         1） 遍历数组  (item,index) in array 

             一定要指定key值  表示列表中的每一项

         2)  遍历对象 (value,key,index) in obj

         3)遍历 数字 从1开始

         4)遍历字符串

18.v-show vs v-if 的区别