Vue: 简介

1.介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

 

2.Vue安装

方式一：直接CDN引入

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

方式二：下载和引入

开发环境：https://cn.vuejs.org/js/vue.js
生产环境：https://cn.vuejs.org/js/vue.min.js
View Code

方式三：NPM安装（推荐）

$ npm install vue
View Code

  

3.第一个Vue项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    // let(变量)/const (常量)
    // 编程范式：声明式编程
    const app = new Vue({
        el: '#app',     // 要管理的标签
        data: {
            message:'hello Vue'
        }
    })
</script>
</body>
</html>
hello Vue

 

4.Vue列表的展示（v-for的使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="movie in movies">{{movie}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      movies:['星际穿越','大话西游','少年派','盗梦空间']
    }
  })
</script>
</body>
</html>
View Code

 

vue是响应式的，当我们数组中的数据发生改变时，界面会自动改变。

打开浏览器的开发者模式的console,输入

app.movies.push('泰坦尼克号')

可以直接在浏览器响应

 

5.案例：计数器（v-on:click 的使用）

写法一：标签内直接完成逻辑运算，适用于简单逻辑，例如自增自减等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <button v-on:click="counter++">+</button>
  <button @click="counter--">-</button>
</div>-->

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
  })
</script>
</body>
</html>
View Code

 

写法二：methods中定义方法完成逻辑运算，适用于高逻辑要求，例如数据处理等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <button v-on:click="add">+</button>
  <button @click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods:{
      add: function () {
        console.log('add被执行');
        this.counter++
      },
      sub: function (){
        console.log(('sub被执行'));
        this.counter--
      }
    },
  })
</script>
</body>
</html>
View Code

 

 

6.Vue中的MVVM

介绍：MVVM(Model-view-viewmodel)是一种软件架构模式。

组成部分：View层+Model层+ViewModel层

视图层

在前端开发中，通常是DOM层

主要是给用户展示各种信息
view层
数据层

数据可能是我们固定的静态数据，更多的是来自于服务器，也就是我们从网络上请求下来的数据
Model层
视图模型层

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


作用：

实现data bingdings,也就是数据绑定，将Model的改变实时地反应到View中

实现DOM Listener，也就是DOM监听，当DOM发生一些事件（例如点击、滚动、touch等）时，可以监听到，并执行对应的methods。
ViewModel层

View ==> body中的div标签,用户看到的界面

Model ==> vue对象中的data

ViewModel ==> new vue对象

 

7.Vue实例中的options

1. el：

   * 类型：string | HTMLElement
   * 作用：决定vue实例会管理哪一个DOM


2. data：

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


3. methods：

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

 

问：开发中什么时候称之为方法，什么时候称之为函数？

* 方法：method
* 函数： function
* 类中的function称之为方法，独立的function称之为函数
View Code

 

 

。。

posted @ 2021-08-02 19:16  麟灬  阅读(109)  评论(0)    收藏  举报