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

作者: itlu | 来源:发表于2021-01-11 15:37 被阅读0次

1. VueJs 的认识和特点介绍

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

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

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

解耦视图和数据;
可复用的组件;
前端路由技术;
状态管理;
虚拟DOM;

2. Vue.js 安装

2.1 方式一：直接CDN引入

你可以选择引入开发环境版本还是生产环境版本。

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

2.2 方式二：下载和引入

开发环境下载。
生产环境下载。

下载方式引入VueJs

2.3 方式三：NPM 安装

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

3. 第一个 Vue 程序

HTML

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

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

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

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 案例小总结

Vue这种编程范式属于声明式编程，使界面界面完全分离。
原生JS方式的范式是一种命令式的编程范式，是一步一步的告诉其需要怎么做。

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

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

{} 中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上。
{} 中包含了data 属性：该属性中通常会存储一些数据，这些数据可以是我们直接定义出来的，比如像上面这样。也可能是来自网络，从服务器加载的。

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

浏览器代码执行流程

执行到10~13行代码显示出对应的HTML。
执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。

4. Vue 的列表展示

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

这里面包含了使用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 实现简单的计数器功能

使用 v-on 命令为按钮绑定一个事件。@click是 v-on:click 的语法糖。
使用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呢？

通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)。
维基百科关于MVVM的解释。
维基百科的官方解释，我们这里不再赘述。

MVVM解释

View层：

视图层；

在我们前端开发中，通常就是DOM层；

主要的作用是给用户展示各种信息。

Model层：

数据层；

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据；

在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

视图模型层;

视图模型层是View和Model沟通的桥梁;

一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中；

另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

6.2 计数器中的MVVM

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

View依然是我们的DOM;
Model 就是我们我们抽离出来的obj;
ViewModel 就是我们创建的Vue对象实例。

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

首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

7. 创建 Vue 实例传入的 options

这个options 中可以包含哪些选项呢？详细解析

目前掌握这些选项：

【el:】

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

【data:】

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

【methods:】

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

8. Vue的生命周期

8.1 下载源码的方式

注意下载已经测试过的版本，避免下载开发版。
这里我下载的是当前的最新版。

下载源码

8.2 生命周期函数有哪些？

官方Vue的生命周期

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

Vue的生命周期函数

9. 前端简单的代码规范

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

10. 插值操作

10.1 Mustache 语法

Mustache 语法是使用两个大括号嵌套在一起的。
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

在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个 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

在某些时候从服务器接收到的数据本身就是一段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

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

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

在某些情况下，我们浏览器可能会直接显然出未编译的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 动态绑定的基本使用

标签中的一些属性可以使用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（对象语法）

很多时候我们希望动态的改变一个元素的样式就可以使用动态绑定 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;
            }
        }
    });

使用方法返回一个class对象。

getClasses() {
          return {active: this.isActive, line: this.isLine};
    }

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

在 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（对象语法）

我们可以使用 v-bind:style 来绑定一些CSS的内联样式。
在写CSS属性名的时候，比如font-size:我们可以使用驼峰式 (camelCase) fontSize 。或短横线分隔 (kebab-case，记得用单引号括起来) 'font-size'。
在写属性值的时候属性值是实际的值不是变量的时候该值需要使用引号引起来，否则将会识别为变量。类似: 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（数组语法）

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: {}
    });

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

1. VueJs 的认识和特点介绍

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

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

2. Vue.js 安装

2.1 方式一：直接CDN引入

2.2 方式二：下载和引入

2.3 方式三：NPM 安装

3. 第一个 Vue 程序

3.1 案例小总结

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

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

4. Vue 的列表展示

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

HTML

JavaScript

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

HTML

JavaScript

6. Vue中的MVVM

6.1 什么是MVVM呢？

View层：

Model层：

VueModel层：

6.2 计数器中的MVVM

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

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

7. 创建 Vue 实例传入的 options

目前掌握这些选项：

【el:】

【data:】

【methods:】

8. Vue的生命周期

8.1 下载源码的方式

8.2 生命周期函数有哪些？

9. 前端简单的代码规范

10. 插值操作

10.1 Mustache 语法

10.2 v-once

10.3 v-html

10.4 v-text

10.5 v-pre

10.6 v-cloak

11 v-bind 动态绑定

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端vue

JavaScript

前端

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

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

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

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