• 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 的区别      
  • 相关阅读:
    在VMware上安装CentOS-6.5 minimal
    [Android] Gradle 安装
    [WPF] 动画Completed事件里获取执行该动画的UI对象
    Realm数据库的使用(二)数据库的添加、删除、修改、查询
    Realm数据库的使用(一)数据库的简单介绍和模型的创建
    进入JVM的世界:《深入理解JVM虚拟机》-- 思维导图
    图解Disruptor框架(一):初识Ringbuffer
    图解Disruptor框架(二):核心概念
    常用排序算法的总结以及编码(Java实现)
    《Java并发编程实战》读书笔记一 -- 简介
  • 原文地址:https://www.cnblogs.com/wufenfen/p/12740654.html
Copyright © 2020-2023  润新知