陈悦玲 2020.10.12

vue 官网:https://cn.vuejs.org/

什么是vue? vue是第三方开发的、渐进式、基于MVVM设计模式的、纯前端的js框架

  1. 第三方:别人写好了的,我们直接下载
  2. 渐进式:可以逐步在项目中引入vue的各项功能,同时可以与其他技术混用,但是不推荐混用。(只要不是使用框架,一律使用es5,不能使用es6)
  3. MVVM设计模式:

    • 传统前端三大部分:html(结构层)、css(表现层)、JavaScript(行为层)
      html 和 css 的功能都太弱了,对于页面发生的一切变化都需要JavaScript来编写,导致需要JavaScript编写大量重复的增删改查操作。
    • 现代前端三大部分:(MVVM)-->
      M:数据模型model
      集中保存界面中所需要的所有变量和变量值。模型,指程序中创建的,或者是从远程(node等后台)获取的数据,一般使用js中的一个对象data来保存,内容就会直接显示到view中
      V:界面/视图 view
      指网页中的元素和样式,一般指的是html和css。view是.html网页中的一个需要动态加载内容的父元素。html中的视图也被称为模板template,如果发生template错误,那么就在HTML中查找即可
      VM:视图模型/控制 viewModel
      用于代替之前的DOM/JQuery操作,封装了重复的增删改查操作,把模型中的数据和视图中的html元素“绑定”到一起。vue类型提供的就是一种强大的viewModel对象,可以自动同步数据和页面元素,专门自动将模型中的变量值自动同步到界面中所需要的位置,实现实时同步。
      ViewModel核心原理:(响应系统/虚拟DOM树)
  4. 纯前端:不需要任何后端技术就能够独立运行

对比原生DOM、JQuery、Vue框架

  1. 原生DOM: 使用原生DOM,必须一步一步来,而且每一步都不能少,步骤十分复杂
    好处:原生DOM 兼容性好
    开发中我们应该养成独立自主的学习习惯
  2. jQuery:
    问题: jQuery中有多少种查找方法?(查找id的元素、class的元素、name的元素)
    $("")
    jQuery对dom的每一步都进行了简化,并没有从根本上改变程序的流程
  3. Vue:
    优点:已经包含了核心功能,而且封装了很多重复的功能,编写时我们就不必要再编写重复的功能,比如:增删改查,算是在开发中彻底简化了的开发步骤。
    缺点:不兼容旧浏览器,同时开发人员需要彻底改变编程习惯和思维
  4. 为什么使用vue?什么时候使用vue?
    vue适用于以数据操作为主的项目(web、app),使用vue框架可以提高项目开发效率
  5. 如何在项目中使用vue?

    • 下载vue.js,并通过script引入

      <script src="vue.js"></script>
      
    • 通过Vue-Cli脚手架工具(开发项目使用的都是脚手架工具)

Vue下载安装

  1. vue中文官网:https://cn.vuejs.org/
  2. 下载vue
    提示:下载独立的vue.js文件:打开官网,点击页面中的起步按钮,之后再在页面左侧选择安装,在安装下选择要下载的vue.js版本
    开发版:未经压缩的,拥有完备注释和错误提示的版本,可读性高
    生产版:已经压缩过的,而且去掉了错误提示,可读性低
  3. 在网页中引入vue.js
    html
    <script src="vue.js"></script>

    在这里插入图片描述

问题:new Vue()的绑定原理:

new Vue() 其实就是创建一个viewModel对象,自动的绑定界面和数据,new Vue会自动将data中的初始值,替换到界面中所有的{{变量}}的位置,只要data中的变量值发生改变,new Vue就会自动将新的变量值,更新到页面中{{变量}}的位置

new vue()中包含两大子系统(响应系统、虚拟DOM树)

1.响应系统:new Vue()刚创建的时候,需要先引入data对象,并自动为data中每个变量添加访问器属性保护起来,所有访问器属性都直接隶属于 new Vue 对象,如果想要修改data中的变量,可以通过“this.变量名”的方式进行访问。
但是,其实都是访问的变量的 set 访问器,而且,new Vue() 在每个set访问器中都添加了通知机制,只要修改变量,就会自动调用访问器,只要调用了访问器,就会触发通知

2.虚拟DOM树:new Vue()通过扫描真实的DOM树,形成一个简化版的DOM树模型,仅包含可能变化的属性,那些固定不变的变量和属性,一点都不包含。因为真实的DOM树太大了,包含很多无关的元素和属性,不便于快速的查找,所以我们需要使用虚拟DOM树

虚拟DOM树优点

优点:1.小,遍历极快。而且只修改变化的元素,影响的范围小
2.封装了重复的增删改查操作,极大地减少了代码量
3.效率高,仅修改个人可能受影响的元素和坑你受影响的元素

Vue语法

  1. 绑定语法就是专门为HTML添加变量,html本身并不支持变量,html中的个别内容又需要根据程序中的变量自动变化,当html中的任何一个位置的内容,需要根据程序中的变量值自动变化的时候么就需要使用绑定语法
    语法:{{变量/js表达式}}
    用于特定的Model数据绑定到视图中,当model数据发生了变化,所有用到现实数据的{{}},里面的数据都会自动更新,首次加载时,new Vue()会自动找到{{}},用程序中的变量值,替换{{变量}},当程序中的变量被修改的时候,再次扫描虚拟DOM树,找到这里,用新值自动替换

    • Model变量名
      {{message}}
      data:{
      message:“hello”
      }
    • 算数/比较/逻辑/三目运算
      {{10+20}}/{{10>20}}/{{true&&false}}/{{sex == 0?男:女}}
  2. 方法调用
    {{getString}} -> 好好学习天天向上
    methods:{
    getString(){
    return "好好学习天天向上"
    }
    }

  3. 对象属性的访问 obj.name

    <h3>书名:{{obj.name}}</h3>
     data:{
    obj:{
    name:"陈小玲玲",
    age:20
    }
  4. 数组也可以通过下标访问 arr[0]

  5. 可以进行字符串拼接

  6. 创建对象:{{new Date().toLocaleString()}}
    注意:{{}}内只要有返回值,合法的js变量和表达式都行,但是{{}}不能出现逻辑结构(if、for这种),以及没有返回值的表达式

Vue指令

指令就是为html添加新功能的自定义属性,HTML本身是静态的,不具有任何的动态生成能力,所以当我们想要在html中使用程序的一些特征的时候,例如:‘分枝’、‘循环’ 等,就需要指令

  1. v-bind : 元素的属性不能使用{{}}进行绑定,必须使用“v-bind:” 或者 “:”

    • 普通绑定 <img v-bind:src=" " :class="img"></img> data:{img:"Img"}(其中Img是我们css样式里面的类名)
    • 动态绑定``
  2. v-show、v-if

    • 它的原理是<-- -->的意思 直接把这个标签给删除了
    • v-show="条件表达式" (当条件为true则显示数据,否则影藏该元素、使用的其实是css的display来控制隐藏,并且只能控制一个)、
    • v-if=“判断条件” v-elif 如果if条件成立显示第一个元素,反之显示另一个
  3. 多个元素,多选一显示

    • v-if
    • v-else-if
    • v-else
    • 提示: 如果v-if的条件成立,就显示v-if的元素,之后的元素不再显示,如果v-if的条件不成立,则按照顺序判断每个v-else-if的条件,哪个成立就选哪个显示,其他元素不再显示,如果所有的条件都不满足,就显示v-else的条件
    • 他们之间必须是紧邻的兄弟元素,不能有其他间隔
  4. v-for : 自动遍历数组、对象、字符串中的每个元素,每遍历一个元素,就会自动创建一个新的元素对象(HTML标签)

    • <table>
        <tr>
      <td>书名</td>
      <td>价格</td>
      </tr>
      <tr v-for="(elem,i) in book" :key="i">
      <td>{{elem.bname}}</td>
      <td>{{elem.price}}</td>
      </tr>
      </table>
      book:[
      {bname:"一点蒂娜"},
      {price:123}
      ]
      },
    • 面试题:v-for为什么一定要加key?

    • 注意:v-for一定要卸载重复生成的元素上,而不是父元素身上

    • 如果我们不关心下标,只关心元素,可以不加key

    • of 和 in 是可以互相代替的,用法完全一样,vue中 v-for统一了js中for of 和 for in,既可以遍历索引,也可以遍历对象

    • of 会自动取出数组/集合中的每个元素的值和下标,保存到右边的变量中,如果 of 后是数字,那么 of 会从1开始迭代,递增到目标数字

  5. v-on :也分普通绑定+动态绑定

    • 动态绑定
      html
      <any v-on:[变量名]="函数">
    • 普通绑定(用的多)
      html
      <any v-on:click="函数">
    • 注意: 无论是data中的变量,还是methods中的函数,只要进入new Vue()以后,都直接隶属于 new Vue() ,所以在new Vue() 的直属方法中,使用 this 可以直接调用变量
    • 问题:如果将button换成a标签,href默认会改变我们地址栏或跳转到其他页面(阻止默认行为)<a v-on:click="xxx($event)"
      解决:

      • 在js中
        实参:event
        function(e){
        e.preventDefault()
        }
      • 在vue中
        实参:\( event
        fn(e){
        e.preventDefault()
        }
        **提示:\) event是vue对象的内置变量,是将DOM事件对象封装后得到的产物,是现成的内置变量,可以直接使用,只要想要vue的处理函数中使用事件对象,就必须在html绑定的调用方法中传入 $ event**
      • 使用事件修饰符
        事件修饰符会自动实现原DOM时间对象操作的特殊属性,当需要修改事件的行为时,就要使用事件修饰符
        .prevent
        使用.prevent代替内置变量$event 下的e.preventDefault(),阻止默认行为
      • stop
        使用stop代替 e.stopPropagation(),取消冒泡
  6. v-html : 绑定HTML片段

    • v-html专门用于加载一段HTML的代码片段,功能类似于js中的innerhtml()
      (也就是不会管标签,只拿到文本内容)
  7. v-cloak :(网速太慢可能会发生)防止用户短暂可以看到{{}}的语法
    v-cloak让元素进行默认隐藏,直至内容准备就绪的时候,才会自定的显示出来,可以防止用户短暂看到{{}}的语法
    <h1 v-cloak></h1>
    手动添加一个属性选择器,隐藏所有加v-cloak的元素,原理:在程序开始的时候,需要由我们手动添加display:none,准备就绪后,vue会自动将v-cloak属性删除,这个时候就删除了display:none 属性,也就能显示出来了

  8. v-text : 是{{}}的等效指令,只不过v-text是写在属性中的,{{}}是写在内容中的

    <any v-text="info"><any>
    data:{
    info:"你是猪头"
    }
  9. 保护{{}}中的内容不被编译

    • v-pre:保护当前元素中的{{}}语法,不会被绑定渲染

      <any v-pre>{{info}}</any>
      data:{
      info:"你是猪"
      }
    1. v-once : 唯一不变元素
      • 当前元素的{{}}语法对应的数据只能绑定一次,以后即使模型数据发生改变,也不会改变了
      • 原理: 只在首次加载的时候,一次性的将数据模型数据显示在当前元素中,不会将元素注册到监听队列中。正常情况下,watch中,有一个队列,维护着每个数据变量和页面之间的对应关系,每次数据模型发生改变后,都会通过watch,watch会遍历受到该数据变量影响的元素,并逐个的修改他们,通过减少监听的元素个数,可以优化页面绑定的效率

标签

评论

this is is footer