前端基础-VUE入门教程(一)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、VUE简介
    • 1.1 搭建Vue开发环境
    • 1.2 初始Vue
    • 1.3 Vue模板语法
    • 1.4 数据绑定
    • 1.5 el和data的两种写法
    • 1.6 MVVM模型
    • 1.7 数据代理
      • Object.defineProperty方法
      • Vue中的数据代理
  • 总结


前言

学习背景

由于作者之前虽然上手了Vue项目,但实际上并没有系统学习过Vue相关基础知识,对其中的原理理解得不够深刻,因此作者目前在看尚硅谷有关Vue的系列教程,并通过博客的形式将所学习的知识点进行记录,便于他人快速上手学习和自身复习~


一、VUE简介

vue:一套用于构建用户界面的渐进式框架。

特点:

  1. 采用组件化模式,提高代码复用率,且让代码更好维护;
  2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率;
  3. 使用虚拟DOM+Diff算法,尽量复用DOM节点

1.1 搭建Vue开发环境

打开Vue官网,安装部分我们可以看到有开发版本和生产版本两种:开发版本适合在开发过程中使用,包含完整的警告和调试模式;生产版本适合在项目完成上线时使用,较为轻量级。
前端基础-VUE入门教程(一)_第1张图片
下载下来,分别是vue.js和vue.min.js文件:
前端基础-VUE入门教程(一)_第2张图片
可以通过下面代码使用vue:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vuetitle>
    <script src="vuejs/vue.js">script>
head>

<body>

body>

html>

但通常会出现以上报错:
前端基础-VUE入门教程(一)_第3张图片

  • 错误一是因为没有下载Vue Devtools拓展工具,可以去谷歌商店下载安装拓展程序;
  • 错误二是因为提醒你使用的是开发版本,当项目上线时使用生产版本。

输入vue.config可以看到以下全局配置信息:
前端基础-VUE入门教程(一)_第4张图片

productionTip属性为boolean类型,设置为false以阻止vue在启动时生成生产提示
添加以下代码,错误二提示即可消失:

    <script>
        Vue.config.productionTip = false;
    </script>

1.2 初始Vue

以下是一个使用vue的简单示例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="js/vue.js">script>
head>
<body>
    <div id="root">
        <h1> Hello {{name}}h1>
    div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
            el: '#root', // 指定当前Vue示例为哪个容器服务,值通常为CSS选择器字符串
            data: {     // data中用于存储数据
                name:'lalala'
            }
        })
    script>
body>
html>

注意事项:

  1. 想让vue工作,就必须先创建一个实例,且要传入一个配置对象
  2. root容器中的代码依然复合html规范,只不过混入特殊的Vue语法
  3. root容器中的代码称为vue模板;
  4. Vue实例和容器是一一对应的;
  5. 真实开发中只有一个Vue实例,并且配合着组件一起使用
  6. {{XXX}}里面的XXX要写js表达式,且XXX可以自动读取到data中所有属性
  7. 一旦data中的数据发生改变,那么页面中用到数据的地方会自动更新

效果图如下:
在这里插入图片描述

1.3 Vue模板语法

Vue模板语法有2大类:

  1. 插值语法
    功能:用于解析标签体内容
    写法:{{XXX}},XXX是js表达式,且可以直接读取到data中的所有属性
  2. 指令语法
    功能:用于解析标签(包括:标签属性、标签体内容、绑定事件。。。)
    举例:v-bind:herf=“XXX” 或简写为 :herf=“XXX”,XXX同样要写js表达式,且可以直接读取到data中的所有属性

1.4 数据绑定

使用v-bind和v-model指令如下所示:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="js/vue.js">script>
head>
<body>
    <div id="root">
        <h1> Hello {{name}}h1>
        单向数据绑定:<input type="text" name="" id="" v-bind:value="name">
        双向数据绑定:<input type="text" name="" id="" v-model:value="name">
    div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
            el: '#root', // 指定当前Vue示例为哪个容器服务,值通常为CSS选择器字符串
            data: {     // data中用于存储数据
                name:'lalala'
            }
        })
    script>
body>
html>

前端基础-VUE入门教程(一)_第5张图片

  • 打开开发者工具,选择vue,可以看到Root组件,点击Root即可看到绑定的数据
    前端基础-VUE入门教程(一)_第6张图片
  • 当修改数据时,可以注意到两个数据绑定指令都能成功更新数据;
    前端基础-VUE入门教程(一)_第7张图片
    前端基础-VUE入门教程(一)_第8张图片
  • 当在v-bind对应的输入框中修改数据时,可以看到data绑定的数据没有发生改变;
    前端基础-VUE入门教程(一)_第9张图片
  • 然而当在v-model所对应的的文本输入框中修改数据时,可以看到data绑定的数据相应地发生变化,并且其他使用data数据的地方跟着发生改变。

前端基础-VUE入门教程(一)_第10张图片

总结如下:

Vue有两种数据绑定的方式:

  1. 单向绑定(v-bind):数据只能从data流向页面
  2. 双向绑定(v-model):数据不仅能从data流向页面,还能从页面流向data
    注意:双向绑定一般都应用于表单类元素上(如:input、select等)
    v-model:value=“XXX” 可以简写为v-model=“XXX”,因为v-model默认收集的是value值

1.5 el和data的两种写法

在控制台打印创建的Vue实例,可以看到以下信息:
前端基础-VUE入门教程(一)_第11张图片

  • $符号后面是我们实例所对应的可以使用的属性,找到Vue原型所对应的的属性,如下所示:
    前端基础-VUE入门教程(一)_第12张图片
    除了使用el指定Vue实例为哪个容器服务时,还可以使用如下语句:
    <script type="text/javascript">
        Vue.config.productionTip = false;

        const v = new Vue({
            // el: '#root', // 指定当前Vue实例为哪个容器服务,值通常为CSS选择器字符串
            data: {     // data中用于存储数据
                name:'lalala'
            }
        })
        v.$mount('#root');
    script>
  • data也有以下两种写法:对象式和函数式;
// 第一种:对象式
 data: {    
     name:'lalala'
 }
 // 第二种:函数式
 data: function() {
     return{
         name:'lalala'
     }
 }

注意:采用函数式方法时,data函数可以将:function省略,注意不要使用箭头函数:当前写法this对应的vue实例,如果采用箭头函数的写法,所对应的的this是window。

1.6 MVVM模型

  1. M:模型(Model):对应data中的数据
  2. V:视图(View):模板
  3. VM:视图模型(ViewModel):Vue实例对象

1.7 数据代理

Object.defineProperty方法

  • 如果想给person对象增加age属性,可以使用Object.defineProperty方法,相比于直接添加,需要设置enumerable、writable、configurable属性才能被枚举、修改和删除;
  • 如果想把number与age绑定,当number的值变化时,age所对应的值变化;同时当age所对应的值改变时,number所对应的的值也发生改变,此时需要使用getter和setter方法。
		let number = 19;
        let person = {
            name: '张三',
            sex: '男'
            // age: number
        }

        Object.defineProperty(person, 'age', {
            value: 18,
            enumerable: true,   // 控制属性是否可以被枚举
            writable: true,     // 控制属性是否可以被修改
            configurable: true,    //  控制属性是否可以被删除

            get() {
                return number;
            }, 

            set(value) {
                number = value;
            }
        }) 

- 数据代理:通过一个对象代理对另一对象中属性的操作
简单的示例如下:

        let obj = {x: 100};
        let obj1 = {y: 200};
        Object.defineProperty(obj1, 'x', {
            get() {
                return obj.x;
            },
            set(value) {
                obj.x = value;
            }
        })

Vue中的数据代理

打印vm实例,可以看到也是通过getter和setter来进行数据代理:
前端基础-VUE入门教程(一)_第13张图片
前端基础-VUE入门教程(一)_第14张图片

实际上Vue数据代理的具体原理如下:

前端基础-VUE入门教程(一)_第15张图片
不难找到Vue实例中的_data属性,确实存储了data的相关数据,之后通过在Vue实例中创建相应的属性,通过Object.defineProperty完成数据代理。
前端基础-VUE入门教程(一)_第16张图片


总结

本文主要总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识。

你可能感兴趣的:(Vue基础教程,vue.js,前端,javascript)