【前端 Vue】01 - Vue基础 生命周期 + 插值操作 + 动态绑定

1. VueJs 的认识和特点介绍

1.1 Vue 是一个渐进式的框架，什么是渐进式的呢？

  1. 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

  2. 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

  3. 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

1.2 Vue有很多特点和Web开发中常见的高级功能

  1. 解耦视图和数据;

  2. 可复用的组件;

  3. 前端路由技术;

  4. 状态管理;

  5. 虚拟DOM;

2. Vue.js 安装

2.1 方式一：直接CDN引入

  1. 你可以选择引入开发环境版本还是生产环境版本。
<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 方式二：下载和引入

  1. 开发环境下载。

  2. 生产环境下载。

下载方式引入VueJs

2.3 方式三：NPM 安装

  1. 后续通过webpack和CLI的使用，我们使用该方式。

3. 第一个 Vue 程序

  1. HTML
<div id="app"><h1>{{message}}</h1></div>

<div id="dotDiv"></div>

<script src="../js/vue.js"></script>
  1. JavaScript
  /**
   * Vue 构造函数中传递的参数是一个对象
   *  el: 管理 div
   *  此种编程范式叫声明式编程,使数据与界面完全分离
   */
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: {
      // 定义数据类型的区域
      message: '您好!'
    }
  });
  // 原生JS的做法 => 下面的编程范式是命令式编程 一步一步的告诉其怎么做
  let dotDiv = document.querySelector('#dotDiv');
  let message = '<h3>张三</h3>';
  dotDiv.innerHTML = message;
  // 响应式：当数据发生改变的时候界面也会发生相应的改变
  // 创建对象的时候传递进去了一些参数 options

3.1 案例小总结

  1. Vue这种编程范式属于声明式编程，使界面界面完全分离。

  2. 原生JS方式的范式是一种命令式的编程范式，是一步一步的告诉其需要怎么做。

 // 原生JS的做法 => 下面的编程范式是命令式编程 一步一步的告诉其怎么做
  let dotDiv = document.querySelector('#dotDiv');
  let message = '<h3>张三</h3>';
  dotDiv.innerHTML = message;

3.2 创建Vue 对象的时候需要传递进去的一些options{}

  1. {} 中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上。

  2. {} 中包含了data 属性：该属性中通常会存储一些数据，这些数据可以是我们直接定义出来的，比如像上面这样。也可能是来自网络，从服务器加载的。

3.3 浏览器执行代码的流程：

浏览器代码执行流程

  1. 执行到10~13行代码显示出对应的HTML。

  2. 执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。

4. Vue 的列表展示

4.1 使用 v-for命令进行列表展示 :

  1. 这里面包含了使用Vue中的v-for进行列表渲染，和使用传统方式进行列表渲染。
HTML
<div id="app">
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
</div>

<div id="dotDiv">
  <ul>

  </ul>
</div>

<script src="../js/vue.js"></script>
JavaScript
const app = new Vue(
    {
      el: '#app',
      data: {
        message: '您好!',
        movies: ['陆小凤传奇之凤舞九天', '陆小凤传奇之银钩赌坊', '海贼王', '陆小凤传奇之决战前后']
      }
    }
  );

  /**
   * 传统的方式
   */
  let movies = ['陆小凤传奇之凤舞九天', '陆小凤传奇之银钩赌坊', '海贼王', '陆小凤传奇之决战前后'];
  // 获取元素
  let dotDiv = document.querySelector('#dotDiv');
  let ul = dotDiv.querySelector('ul');
  for (let i = 0; i < movies.length; i++) {
    let li = document.createElement('li');
    li.innerHTML = movies[i];
    ul.appendChild(li);
  }

5. Vue 实现简单的计数器功能

  1. 使用 v-on 命令为按钮绑定一个事件。@click是 v-on:click 的语法糖。

  2. 使用options参数methods定义事件方法。

计数器
HTML
<div id="app">

  <h2>当前计数:{{counter}}</h2>
  <!--<button v-on:click="counter++">+</button>
  <button v-on:click="counter&#45;&#45;">-</button>-->

  <!-- 新的指令 v-on  -->
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>

</div>

<div id="dotDiv">
  <h2>当前计数: <span class="number">0</span></h2>
  <button class="increment">+</button>
  <button class="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
JavaScript
/**
   * 这是一个 Vue 对象
   */
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    /* 新的属性 methods */
    methods: {
      /**
       * 递增
       * */
      increment() {
        this.counter++;
      },

      /**
       * 递减
       */
      decrement() {
        this.counter--;
      }
    }
  });

  /**
   * 传统方法方式
   */
  let dotDiv = document.querySelector('#dotDiv');
  let span = document.querySelector('.number');
  let increment = document.querySelector('.increment');
  let decrement = document.querySelector('.decrement');
  let number = 10; // 设置默认值
  span.innerHTML = number;
  console.log(span);

  increment.addEventListener('click', () => {
    number++;
    span.innerHTML = number;
  });

  decrement.addEventListener('click', () => {
    number--;
    span.innerHTML = number;
  });

6. Vue中的MVVM

6.1 什么是MVVM呢？

  1. 通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)。

  2. 维基百科关于MVVM的解释。

  3. 维基百科的官方解释，我们这里不再赘述。

MVVM解释
View层：
  1. 视图层；
  2. 在我们前端开发中，通常就是DOM层；
  3. 主要的作用是给用户展示各种信息。
Model层：
  1. 数据层；
  2. 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据；
  3. 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
  1. 视图模型层;
  2. 视图模型层是View和Model沟通的桥梁;
  3. 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中；
  4. 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

6.2 计数器中的MVVM

1. 我们的计数器中就有严格的MVVM思想;

  1. View依然是我们的DOM;

  2. Model 就是我们我们抽离出来的obj;

  3. ViewModel 就是我们创建的Vue对象实例。

2. 它们之间如何工作呢？

  1. 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。

  2. 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。

  3. 有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

7. 创建 Vue 实例传入的 options

  1. 这个options 中可以包含哪些选项呢？ 详细解析
目前掌握这些选项：
【el:】

类型： string | HTMLElement；
作用： 决定之后Vue实例会管理哪一个DOM。

【data:】

类型： Object | Function（组件当中data必须是一个函数）；
作用： Vue实例对应的数据对象。

【methods:】

类型： { [key: string]: Function }；
作用： 定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用。

8. Vue的生命周期

8.1 下载源码的方式

  1. 注意下载已经测试过的版本，避免下载开发版。

  2. 这里我下载的是当前的最新版。

下载源码

8.2 生命周期函数有哪些？

官方Vue的生命周期
官方Vue的生命周期详细版.png
Vue的生命周期函数

9. 前端简单的代码规范

缩进最流行的是2个空格。

10. 插值操作

10.1 Mustache 语法

  1. Mustache 语法是使用两个大括号嵌套在一起的。

  2. Mustache 语法中不仅可以写变量而且还可以写一些简单的表达式。

<div id="app">
  <h2>{{message}} 张三 </h2>
  <h2>{{counter * 10}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
</div>

    /* 1. Mustache 语法中不仅可以写变量而且还可以写一些简单的表达式 */
    const app = new Vue({
        el: '#app',
        data: {
            message: '您好',
            firstName: 'kobe',
            lastName: 'bryant',
            counter: 100
        }
    });

10.2 v-once

  1. 在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个 Vue 的指令 v-once,v-once该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的),该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)。
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>

    const app = new Vue({
        el: '#app',
        data: {
            message: '您好啊!'
        }
    });

10.3 v-html

  1. 在某些时候 从服务器接收到的数据本身就是一段HTML代码。如果使用原来的{{}} Mustache 语法，此时将会将HTML代码一起输出。但是我们 希望按照HTML格式进行解析，并且显示对应的内容。如果我们希望解析出HTML展示,可以使用v-html指令该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染。
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>

    const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      url:'<a href="https://www.baidu.com">百度一下</a>'
    }
  });

10.4 v-text

  1. v-text 作用和Mustache比较相似：都是用于将数据显示在界面中,v-text通常情况下，接受一个string类型。
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>

    const app = new Vue({
        el: '#app',
        data: {
            message:'您好!'
                }
    });

10.5 v-pre

  1. v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache 语法。类似原来的<pre> 标签。
<div id="app">
  <h2>{{message}}</h2>
  <!-- 直接原封不动的显示{{message}} -->
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>

const app = new Vue({
    el:'#app',
    data:{
      message:'您好!'
    }
  });

10.6 v-cloak

  1. 在某些情况下，我们浏览器可能会直接显然出未编译的Mustache 标签。这是一种极其不友好的方式，所以当页面DOM 没有渲染完成时让全部都不显示，使用 v-cloak 指令就可以做到。v-cloak原理： 在 vue 解析之前 div 中有一个属性 v-cloak。在 vue 解析之后 div 没有一个属性 v-cloak。通过该属性为页面设置一个 display:none; 属性。
[v-cloak] {
      display: none;
    }

<div id="app">
  <!-- v-cloak原理 在 vue 解析之前 div 中有一个属性 v-cloak
               在 vue 解析之后 div 没有一个属性 v-cloak -->
  <h2 v-cloak>{{message}}</h2>
</div>
<script src="../../js/vue.js"></script>

setTimeout(() => {
        const app = new Vue({
            el: '#app',
            data: {
                message: '您好!'
            }
        });
    }, 1000);

11 v-bind 动态绑定

11.1 v-bind 动态绑定的基本使用

  1. 标签中的一些属性可以使用v-bind动态绑定属性值，类似v-bind:src 在编写的时候可以使用其语法糖方式进行简写 :src 
<div id="app">
  <img :src="imgUrl" alt="">
  <img v-bind:src="imgUrl" alt="">
  <!-- v-bind 的语法糖（简写） :   -->
</div>
<script src="../../js/vue.js"></script>

const app = new Vue({
        el: '#app',
        data: {
            imgUrl: 'https://cn.vuejs.org/images/logo.png'
        }
    });

11.2 v-bind 动态绑定 class（对象语法）

  1. 很多时候我们希望动态的改变一个元素的样式就可以使用动态绑定 class 的方式。
.active {
      color: #f00;
    }

.line {
      border-bottom: 1px solid #ccc;
    }

<div id="app">
  <!--<h2 :class="{key1:value1,key2:value2}">{{message}}</h2>-->
  <h2>{{message}}</h2>
  <h2 v-bind:class="{active:isActive,line:isLine}" class="title">{{message}}</h2>
  <!-- 按钮用于切换字体颜色  -->
  <button v-on:click="changeColor">点我切换</button>
</div>
<script src="../../js/vue.js"></script>

const app = new Vue({
        el: '#app',
        data: {
            message: '您好!',
            isActive: true,
            isLine: true
        },
        methods: {
            changeColor() {
                this.isActive = !this.isActive;
                this.isLine = !this.isLine;
            }
        }
    });
  1. 使用方法返回一个class对象。
getClasses() {
          return {active: this.isActive, line: this.isLine};
    }

11.3 v-bind 动态绑定 class（数组语法）

  1. 在 class 后面跟上一个数组。在数组中写上样式的类名。
.active {
      color: #f00;
    }

    .line {
      border-bottom: 1px solid #ccc;
    }

<div id="app">

  <h2>{{message}}</h2>
  <h2 v-bind:class="getClasses()" class="title">{{message}}</h2>
</div>

const app = new Vue({
        el: '#app',
        data: {
            message: '您好!',
            active: 'active',
            line: 'line'
        },
        methods: {
            getClasses() {
                return [this.active, this.line];
            }
        }
    });

11.4 v-bind 动态绑定 style（对象语法）

  1. 我们可以使用 v-bind:style 来绑定一些CSS的内联样式。

  2. 在写CSS属性名的时候，比如font-size:我们可以使用驼峰式 (camelCase) fontSize 。或短横线分隔 (kebab-case，记得用单引号括起来) 'font-size'。

  3. 在写属性值的时候属性值是实际的值不是变量的时候该值需要使用引号引起来，否则将会识别为变量。类似: fontSize:'50px'

  .active {
      color: #f00;
    }

    .line {
      border-bottom: 1px solid #ccc;
    }

<div id="app">
  <h2>{{message}}</h2>
  <!--<h2 v-bind:style="{key:value}">{{message}}</h2> 其 key 是属性名 value 是属性值 -->
  <h2 v-bind:style="{fontSize:'50px'}">{{message}}</h2> <!-- 这里的 50px 需要加上引号 否则vue会将其识别为一个变量 -->
  <h2 v-bind:style="{fontSize:finalSize}">{{message}}</h2> <!-- 直接使用变量的方式 -->
  <h2 v-bind:style="{fontSize:customSize + 'px',color:fontColor}">{{message}}</h2>  <!-- 使用数字类型 + 'px' -->
</div>
<script src="../../js/vue.js"></script>

const app = new Vue({
        el: '#app',
        data: {
            message: '您好!',
            finalSize: '88px',
            customSize: 100,
            fontColor: 'red'
        },
        methods: {}
    });

11.5 v-bind 动态绑定 style（数组语法）

  1. v-bind:style后边是一个数组数组中存放的是样式对象。
<div id="app">
  <h2>{{message}}</h2>
  <!-- 在数组中存放对象  -->
  <h2 :style="[baseStyle,font]">{{message}}</h2>
</div>

<script src="../../js/vue.js"></script>

const app = new Vue({
        el: '#app',
        data: {
            message: '您好!',
            baseStyle: {backgroundColor: 'red', color: 'blue'},
            font:{fontSize:'60px', color:'pink'}
        },
        methods: {}
    });
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,607评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,047评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,496评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,405评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,400评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,479评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,883评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,535评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,743评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,309评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,881评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2赞 342

推荐阅读更多精彩内容