Web前端框架-Vue(初识)

文章目录

    • web前端三大主流框架
    • **1.Angular**
    • **2.React**
    • **3.Vue**
      • 什么是Vue.js
    • 为什么要学习流行框架
    • 框架和库和插件的区别
      • 一.简介
      • 指令
      • v-cloak
      • v-text
      • v-html
      • v-pre
      • **v-once**
      • v-on
      • v-on事件函数中传入参数
      • 事件修饰符
      • 双向数据绑定
        • v-model
      • 按键修饰符
      • 自定义按键修饰符别名
      • v-bind(属性绑定)
        • 绑定对象
        • 绑定class
        • 绑定对象和绑定数组 的区别
        • 绑定style
      • 分支结构
        • v-if 使用场景
        • v-show 和 v-if的区别
      • 循环结构
        • v-for
      • 案例选项卡
        • 1、 HTML 结构
        • 2、 提供的数据

web前端三大主流框架

web前端三大主流框架是Angular、React、Vue。 库 框架

1.Angular

https://angular.io/

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

2.React

https://react.docschina.org/

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

3.Vue

官方网址:https://cn.vuejs.org/ 数据驱动视图

什么是Vue.js

  • Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的)
  • Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
  • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
  • 前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;

为什么要学习流行框架

  • 企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;
  • 企业中,使用框架,能够提高开发的效率;
  • 提高开发效率的发展历程:原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】)
  • 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;
  • 增强自己就业时候的竞争力
  • 人无我有,人有我优

框架和库和插件的区别

  • 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。

  • 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。

一.简介

MVVM是Model-View-ViewModel的简写 即模型-视图-视图模型

M:【模型】指的是后端传递的数据。

V:【视图】指的是所看到的页面。

VM:【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。

二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。

这两个方向都实现的,我们称之为数据的双向绑定。

MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了。

Web前端框架-Vue(初识)_第1张图片

为什么会有MVVM框架?

在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了各式各样的HTML 和CSS文件,但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript框架。比如:angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。综上两方面原因,才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定,极大了提高了开发效率。

指令

  • 本质就是自定义属性
  • Vue中指定都是以 v- 开头

v-cloak

 /*
      v-cloak指令的用法
      1、提供样式
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令

      背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
    */
  • 防止页面加载时出现闪烁问题

    DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Documenttitle>
      <style type="text/css">
      [v-cloak]{
        display: none;
      }
      style>
    head>
    <body>
      <div id="app">
        <div v-cloak>{{msg}}div>
      div>
      <script type="text/javascript" src="js/vue.js">script>
      <script type="text/javascript">
        /*
          v-cloak指令的用法
          1、提供样式
            [v-cloak]{
              display: none;
            }
          2、在插值表达式所在的标签中添加v-cloak指令
    
          背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
        */
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'Hello Vue'
          }
        });
      script>
    body>
    html>
    

v-text

  • v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
<div id="app">
    
    <p v-text="msg">p>
    <p>
        
        {{msg}}
    p>
div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

script>

v-html

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中

  • 可能有安全问题, 一般只在可信任内容上使用 v-html永不用在用户提交的内容上

  • 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。

    <div id="app">
      <p v-html="html">p> 
        
        <p>{{message}}p> 
        
      <p v-text="text">p> 
    div>
    <script>
      let app = new Vue({
      el: "#app",
      data: {
        message: "通过双括号绑定",
        html: "html标签在渲染的时候被解析",
        text: "html标签在渲染的时候被源码输出",
      }
     });
    script>
    

v-pre

  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
    <span v-pre>{{ this will not be compiled }}span>    
	
	<span v-pre>{{msg}}span>  
     
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

script>

v-once

  • 执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
  
     <span v-once>{{ msg}}span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
script>

v-on

  • 形式如:v-on:click 缩写为 @click;

v-on事件函数中传入参数


<body>
    <div id="app">
        <div>{{num}}div>
        <div>
            
            <button v-on:click='handle1'>点击1button>
            
            <button v-on:click='handle2(123, 456, $event)'>点击2button>
        div>
    div>
    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    script>

事件修饰符

  • 在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。

  • Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符

  • 修饰符是由点开头的指令后缀来表示的

    • .stop 阻止冒泡

    • .prevent 阻止默认事件

    • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调

    • .once 事件只触发一次

<body>
  <div id="app">
    <div>{{num}}div>
    <div class="div1" v-on:click='handle1'>
      <button v-on:click='handle0'>点击button>
    div>
    <div>
      <a href="http://www.baidu.com" v-on:click.self.prevent='handle2'>百度
        <p>我是一个p标签p>
      a>
    div>
  div>
  <script type="text/javascript" src="js/vue.js">script>
  <script type="text/javascript">
    /*
      事件绑定-事件修饰符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        handle0: function (event) {
          this.num++;
          console.log("我是点击子元素");
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle1: function (event) {
          this.num++
          console.log("我是点击父元素");

        },
        handle2: function (event) {
          alert("我弹")
          // 阻止默认行为
          // event.preventDefault();
        }
      }
    });
  script>
body>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

@click.prevent.self =“c”  总是先执行prevent,无论是内部元素还是本身元素触发,他都会prevent默认事件。只不过只有当你点击a元素的时候,才会触发c事件,因此会阻止所有的点击的默认行为 

@click.self.prevent =“c” 当你点击的元素是a的时候,才会prevent默认事件,而且执行c事件,因此只会阻止对元素自身的点击。


双向数据绑定

  • 当数据发生变化的时候,视图也就发生变化
  • 当视图发生变化的时候,数据也会跟着同步变化
v-model
  • v-model是一个指令,限制在