Vue学习(1)：基础学习

狄鸠
52 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

基础概念

一，安装

  1. 直接引用

    下载开发版本和生产版 （开发班有完整警告和调试模式，生产版本经过压缩后的）

  2. CDN引用

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

二，简介

vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

渐进式开发：

在这里插入图片描述

声明式渲染开发

以往的编程范式：

  • 命令式编程（获取标签，添加事件等等。。。）

    1. 先获取标签，设置属性

    2. 对标签添加事件，注册对应的回调函数

    3. 将数据添加到标签里面

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

var app = document.querySelector('#app');
app.children[0].innerHTML = 'hello1';
app.children[1].innerHTML = 'hello2';

vue.js编程范式：

  • 声明式开发（所有DOM操作都由Vue来处理，把更大的精力放在业务逻辑上）

    1. 声明要管理的元素

    2. 在 Vue 实例里面定义数据，vue会帮你绚烂页面数据

    3. 数据都是响应式

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

var app = new Vue({
  el: '#app',			// 申明要管理的元素
  data: {
    message: 'Hello Vue!'
  }
})

// 所有的东西都是响应式的
// 在浏览器控制台中 app.message = 20，标签中的数据会相对应的变化

条件和循环

v-if ：条件判断

把数据绑到DOM结构

<div id="app">
    <p v-if='see'> {{ message1 }}</p>
    <p> {{ message2 }}</p>
</div>

<script>
    const app = new Vue({
        el: '#app', // 用于挂载要申明的元素
        data: { // 定义数据
            message1: '我是一个p标签1',
            message2: '我是一个p标签2',
            see: true, // 相当于display:none;
        }
    })
</script>

在这里插入图片描述

v-for ：绑定数组的数据来渲染一个项目列表

<div id="app">
    <ol>
    <li v-for="info in infos">
        {{ info.text }}
	</li>
    </ol>
</div>

const app = new Vue({
    el: '#app', // 用于挂载要申明的元素
    data: { // 定义数据
        infos: [{
            text: '信息1'
        }, {
            text: '信息2'
        }, {
            text: '信息3'
        }]
    }
})

// 在浏览器控制台中 app.infos.push({text: '信息4'})，标签中的数据会相对应的变化

在这里插入图片描述

绑定事件

v-on ：绑定事件监听器

    <div class="app">
        <button v-on:click='sayHi'>{{ message }}</button>
    </div>

const app = new Vue({
    el: '.app',
    data: {
        message: '按钮'
    },
    methods: {
        sayHi: function() {
            this.message = this.message.split('').reverse().join('')
            setInterval(() => {
                this.message = this.message + 6
            }, 1000)
        }
    }
})

v-model ：它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app">
    <div>{{ message }}</div>
    <input type="text" v-model="message">
</div>

var app1 = new Vue({
    el: '#app',
    data: {
        message: 'hello Vue!'
    }
})

在这里插入图片描述

-vue小案例1：循环数组

 <div id="app">
     <ol>
     	<li v-for="item in items">{{ item }}</li>
     </ol>
</div>

var app1 = new Vue({
    el: '#app',
    data: {
        items: [
            '老大',
            '老二',
            '老三',
            '老四',
        ]
    }
})

// 执行 app1.items.push('老五')  DOM页面会响应式渲染

在这里插入图片描述

-vue小案例1：按钮计数

<div id="app">
    <div> 现在的数字式 {{ num }} </div>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>


var app1 = new Vue({
    el: '#app',
    data: {
        num: 0
    },
    methods: {
        add: function() {
            this.num++
        },

        sub: function() {
            this.num--
        }
    }
})

在这里插入图片描述

三，MVVM架构

Vue 采用的是 MVVM 架构（Model-view-ViewModel）

在这里插入图片描述

  • View(视图层) 就是我们的文档对象模型（DOM），Html代码，展示给用户看的各种信息

  • Model(数据层) 就是我们的数据，从网络上或者服务器请求过来的数据，也可能是固定好的死数据

  • VuemModel(视图模型层)

    1. Vue.js 的核心，是一个 Vue 实例，沟通视图层和数据层的桥梁实，实现了双向绑定
    2. 一方面实现了 Data Bindings 也就是数据绑定，将 Model层的改变时反应到 View 中
    3. 另一方面实现了 DOM Listener 也就是 DOM 监听，当DOM发生一些事件(点击,滚动,触摸等)，可以监听到，并且在需要的情况下改变Model的数据
    <!-- view视图层 -->
<div id="app">
    <div class="content">{{message}}</div>
</div>

<script>
    // Model数据层(专门用来保存每个页面的数据)
    var obj = {
        message: 'a'
    }

    // ViewModel层，new出来的这个对象就是VM链接试图层和数据层的调度者
    var app = new Vue({
        el: '#app',	// 挂载要管理的DOM元素，Vue帮我们操作DOM，不用再手动获取DOM元素
        data: obj
    })
</script>

  • 前端页面中使用 MVVM 的思想，主要是为了开发效率更高，VM提供了数据的双向绑定

  • 双向绑定原理：

    1. 当Model里面的数据发生改变的时候，通过 Object.defineProperty() 方法中的 set 方法进行监听，并且调用定义好 model 和 view 关系的回调函数，来通知view改变数据

    2. 当 view 发生变化的时候则通过事件来进行model里面数据的相应变化

三，Vue实例option参数

选项 / DOM

-el

  • 类型：

    string | Element

  • 限制：

    只在用 new Vue 创建实例时生效

  • 作用：

    挂载要被管理的DOM元素 可以是一个选择器 #app 也可以是 document.querySelector()

  • 注意：

    提供的元素只能作为挂载点。所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。

-data

  • 类型：

    Object | Function

  • 限制：

    组件的定义只接受 function

  • 作用：

    Vue 将会递归将 data 的属性转换为 getter/sette，实现数据的双向绑定

  • 注意：

    数据如果是 Object 模式，必须是存粹的对象，原型对象上的属性会被忽略

    实例创建之后，可以通过 vm.$data 访问原始数据对象。

    Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a

-methods

  • 类型：

    { [key: string]: Function }

  • 限制：

    methods 将会融汇到 Vue 中，方法中的 this 自动绑定为 Vue 实例。

  • 作用：

    Vue 将会递归将 data 的属性转换为 getter/sette，实现数据的双向绑定

  • 注意：

    不能用箭头函数定义 method 里面的函数 (例如 add: () => this.num++)。因为箭头函数的this默认绑定父级作用域的上下文，所以 this 将不会指向 Vue 实例，this.num 的值是 undefined。

四，Vue的生命周期

生命周期：事物从诞生到消亡的过程中的各个阶段

在 new Vue 的时候，Vue的内部帮我做了很多很多的事情

生命周期有什么用？能够让我们在 **Vue ** 生命周期进行中的每一个阶段都能做事情，生命周期的每一个阶段内都会回调一个函数，有点类似中间件，比如在发送数据前，会执行一个函数，接收数据后可以执行一个函数

比如我的 Vue 里面的虚拟 DOM 没有渲染之前，会调用生命周期函数，我们可以用这个函数来请求一些数据渲染到DOM中去

当他生命周期执行到某一阶段就会告诉我们执行到哪一步了，回调某个特定的生命周期函数，我们就可以再那个函数里卖做一些有意义的操作，就像人到中年了，父母知道你到一定年纪了，不小了，就会让你执行结婚这个回调函数，这样的每一步才是有意义的

var app = new Vue({
    el: '#app',
    data: {
        message: 'data'
    },
    beforeCreate: function() {
        console.log('beforeCreate');
    },
    created: function() {
        console.log('created');
    },
    beforeMount: function() {
        console.log('created');
    },
    mounted: function() {
        console.log('mounted');
    },
    beforeUpdate: function() {
        console.log('data数据被修改，我被调用了！');
    },
    updated: function() {
        console.log('data数据修改完毕，我被调用了！');
    },
    beforeDestroy: function() {
        console.log('beforeDestroy');
    }
})

Vue 的生命周期生命周期：

在这里插入图片描述

avatar
文章
阅读
粉丝