初学vue（全家桶）-第1天（vue2）：环境配置、基本语法、MVVM模型

持久的棒棒君

已于 2022-09-27 09:51:20 修改

阅读量711

点赞数 1

分类专栏：大杂烩文章标签： vue.js 前端 javascript

于 2022-05-19 15:15:00 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/124823961

版权

大杂烩专栏收录该内容

259 篇文章 3 订阅

订阅专栏

文章目录

1、vue简介
1.1 什么是vue
1.2 vue特点
1.3 基本环境配置

2、vue基本语法
2.1 小案例演示vue的基本使用
使用注意项

2.2 模板语法的详细介绍
插值语法
指令语法

2.3 数据绑定
单向绑定
双向绑定

2.4 el和data的两种写法

3、Vue模型（参考了MVVM模型）

1、vue简介

1.1 什么是vue

官网：一套用于构建用户界面¹的渐进式²javascript框架

1.2 vue特点

采用组件化模式，提高代码复用率，让代码更好维护。
【例如一个.vue文件中可以涵盖html，css，js。如果别人要使用这个页面，就可以直接将这个.vue文件引入进来，好比封装】
声明式编码，无需直接操作DOM，提高开发效率。
【通常使用js时是使用的命令式编码，就是每一步都不能少，并且每一步的顺序也是固定的，如先通过dom获取元素，才能再对这个元素进行操作；而声明式编码就是简单声明后自动的对元素进行操作】
【或者这么理解：
命令式编码：我对你说：我口渴了，你先去餐厅，拿杯子，倒水，然后端给我。
声明式编码：我咳嗽了两下，然后你主动的去倒水给我喝（中间过程省略）】

1.3 基本环境配置

标签引入vue.js或者vue.min.js文件

本地引入

<script type="text/javascript" src="../JS/vue.js"></script>

CDN引入

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

2、下载dev开发工具
原因：引入vue.js文件后，浏览器控制台总是报下面的提示：
在这里插入图片描述
安装这个开发工具就是让这个提示消失

国外可以直接下载：
在这里插入图片描述

国内谷歌应用商店用不了，按下面步骤做：
打开浏览器扩展应用程序，在这里下载【提取码：5988】扩展程序，下载后拖至扩展程序那个页面。

3、修改全局配置文件Vue.config，
用于关闭下面这个提示
在这里插入图片描述
具体步骤，使用js写个脚本，修改config中的属性productionTip

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

在这里插入图片描述

2、vue基本语法

2.1 小案例演示vue的基本使用

步骤：
（1）准备一个容器，也就是HTML代码段
（2）创建一个Vue实例，new Vue()，并且在实例中传入配置对象（el属性，通过这个属性绑定容器；数据data属性，要传递的数据；methods属性，方法）

容器里的代码被称为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">
    <script type="text/javascript" src="../JS/vue.js"></script>
    <title>初始vue</title>
</head>
<body>
    <!-- 这是一个容器 -->
    <div id="root">
        <!-- 让name用双花括号包裹，表示插值，它是可以改变的值 -->
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; // 组织vue在启动时生成生产提示

        // 创建Vue实例
        const x = new Vue({
            // el用于指定当前vue实例为那个容器(标签)服务，值通常为css选择器字符串
            el:"#root", 
            // data中用于存储数据，数据供el所指定的容器去使用
            data:{ 
                name:"小明"
            }
			
			// methods中是方法
			methods:{
				// ...
			}
        });
    </script>
</body>
</html>

整个过程如下
在这里插入图片描述

使用注意项

（1）vue和容器是一一对应的，不存在一对多和多对一关系
例如：多个容器对应一个vue实例时
在这里插入图片描述

例如：多个vue实例对应一个容器时

结果就是：第二个实例拿到这个容器发现，已经有实例接管了这个容器，然后报错。

（2）容器中{{}}中的内容是js表达式，不是简简单单的js代码（例如if，switch等）或者实例中data中不存在的变量。

<body>
    <!-- 这是一个容器 -->
    <div class="root">
        <h1>hello,{{name}},{{address}},{{3+4}},{{Date.now()}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; // 组织vue在启动时生成生产提示

        // 创建Vue实例
        new Vue({
            // el用于指定当前vue实例为那个容器(标签)服务，值通常为css选择器字符串
            el:".root", 
            // data中用于存储数据，数据供el所指定的容器去使用
            data:{ 
                name:"小明",
                address:"北京",
            }
        });
    </script>
</body>

上面案例中，{{3+4}},{{Date.now()}}虽然并没有在实例中定义，但结果却可以正常显示，这两者均都是表达式，此外还可以是三目表达式，函数调用表达式等

（3）可以通过扩展程序中的vue devtools来对数据进行修改

简单总结：
（1）想让vue工作，就必须创建一个vue实例，且要传入一个配置对象
（2）root容器里的代码依然符合html规范，不过有一些特殊的vue语法
（3）root容器里的代码被称为vue模板
（4）vue实例和容器时一一对应的
（5）开发中只有一个vue实例，且会配合着组件一起使用
（6）{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
（7）一旦data中的数发生改变，那么模板中都用到该数据的地方也会自动更新

2.2 模板语法的详细介绍

插值语法

语法：{{xxx}}
解释：xxx是js表达式，可以直接读取到实例中data中的所有属性
功能：用于解析标签体内容（文本中的内容）

<!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>Document</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
    <!-- <link rel="shortcut icon" href="../bitbug_favicon.ico" /> -->
</head>
<body>
    <div>
        <h1>插值语法</h1>
        <h2 class="root">hello,{{name}}</h2>
    </div>
    <script>
        new Vue({
            el:".root",
            data:{
                name:"小明",
            }
        });
    </script>
</body>
</html>

指令语法

语法：v-bind:标签中属性名="xxx" 或者简写成 :标签中属性名="xxx" 的形式，xxx同样要写成js表达式
功能：用于解析标签（包括标签属性、标签体内容，绑定事件）

v-bind只是vue众多指令中的一个，v-bind是用来解析标签属性的，解析标签体内容、绑定事件的指令就不是这个了

<!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">
    <script type="text/javascript" src="../JS/vue.js"></script>
    <title>初始vue</title>
</head>
<body>
    <!-- 这是一个容器 -->
    <div class="root">
        <h1>指令语法</h1>
        <a v-bind:href="url">百度一下</a>
        <!-- v-bind语法可以简写成冒号":" ，例如-->
        <a :href="url">百度一下</a>
        <!-- 
            v-bind是vue中的语法形式，此时url是一个js表达式。
            v-bind:href="url" 表示将js表达式url中的值绑定给href属性
        -->
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示

        // 创建Vue实例
        new Vue({
            el:".root", 
            data:{ 
                url:"http://www.baidu.com"
            }
        });
    </script>
</body>
</html>

2.3 数据绑定

vue中有两种数据绑定的方式：单项绑定与双向绑定

单向绑定

单向绑定（v-bind）：数据只能从data流向页面
也就是说，只能从data上更改值，从而影响页面上显示的值

双向绑定

双向绑定（v-model）：数据能从data流向页面，也能从页面流向data。
也就是说，当从data上更改值时，会影响到页面上显示的值；当更改页面上显示的值时，也会影响到data上的值。

注意：

双向绑定一般都应用在表单类元素上（如，input，select，这些元素中均有value属性）
v-model:value可以简写成v-model，因为v-model默认收集的就是value值。

例题：

<!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">
    <script src="../JS/vue.js"></script>
    <title>数据绑定</title>
</head>
<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

    <script>
        Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
        new Vue({
            el:"#root",
            data:{
                name:"小明"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.4 el和data的两种写法

el的两种写法

<div id="root">
	<h1>你好,{{name}}</h1>
</div>

第一种：

<script>
const v = new Vue({
	el:"#root",
	data:{
		name:"小明"
	}
});
</script>

第二种：

<script>
const v = new Vue({
	data:{
		name:"小明"
	}
});
v.$mount("#root");
</script>

第二中写法，当查看v对象时，在它的原型对象中有个$mount，代表el。
在这里插入图片描述

data的两种写法

<div id="root">
	<h1>你好,{{name}}</h1>
</div>

第一种：对象式

<script>
const v = new Vue({
	el:"#root",
	data:{
		name:"小明"
	}
});
</script>

第二种：函数式
用于组件中时必须使用函数式，比较好用

<script>
const v = new Vue({
	el:"#root",
	// data写成函数的形式
	data:function(){
		return{
			name:"小明"
		}
	}
});
</script>

3、Vue模型（参考了MVVM模型）

Vue中虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

Vue中MVVM模型拆开理解如下：
M：Model（模型）：对应data中的数据
V：View（视图）：模板
VM：ViewModel（视图模板）：Vue实例对象

图解：
在这里插入图片描述

分析：观察红色箭头路线，如果模型data中的数据被修改了，会通过视图模型将视图中对应的数据也进行更改；如果视图中数据需要更改，那么也会通过视图模型从而将模型中的数据进行更改。

总结：
data中所有的属性最后都会出现在vue实例对象上
实例对象vm上的所有属性以及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>Document</title>
    <script src="../JS/vue.js"></script> </head> <body>
    <div id="root">
        <h1>{{name}}</h1>
        <div>测试1:{{$options}}</div>
        <div>测试2:{{$emit}}</div>
        <div>测试3:{{_c}}</div>
    </div>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                name:"小明"
            }
        });
    </script> 
</body> 
</html>

在这里插入图片描述
$ options，$ emit，_c是Vue实例vm中或者Vue原型对象中存在的，所以可以直接访问。

构建用户界面通俗的讲是指将后台中的数据变成用户能看到的前端界面。 ↩︎
渐进式：官网解释成vue可以自底向上逐层的应用。通俗的讲就是从开始引入一个个的轻量级的核心库到引入各式各样的vue插件，逐层递进。 ↩︎

持久的棒棒君

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
初学vue（全家桶）-第1天（vue2）：环境配置、基本语法、MVVM模型

文章目录vue入门vue简介什么是vuevue特点vue入门vue简介什么是vue官网：一套用于构建用户界面1的渐进式2javascript框架vue特点采用组件化模式，提高代码复用率，让代码更好维护。【例如一个.vue文件中可以涵盖html，css，js。如果别人要使用这个页面，就可以直接将这个.vue文件引入进来，好比封装】声明式编码，无需直接操作DOM，提高开发效率。【通常使用js时是使用的命令式编码，就是每一步都不能少，并且每一步的顺序也是固定的，如先通过dom获取元素，才能.
复制链接

扫一扫