01-VUE入门

超、凢脫俗 2024-05-03 14:33 95阅读 0赞

![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]

#### 文章目录 ####

*  前言
 *  Vue介绍
 *  入门示例
 *   *  Vue代码和MVVM模型对应关系：

## 前言 ##

> ?前言?  
> ?博客：【无聊大侠hello word】?  
> ✍有一点思考，有一点想法，有一点理性！✍  
> ✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍

## Vue介绍 ##

*  VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
 *  MVVM：MVVM是 model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。
 *  MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
 *  Vue.js是一个提供了MVVM风格的双向绑定的javascript库，专注于view层。它的核心是MVVM中的VM，也即是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性。
 *  虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发，因此会经常使用vm（ViewModel的缩写）这个变量名表示Vue实例。

**Vue特点：**

1 . 采用组件化模式，提高代码复用率，且让代码更好维护

2 . 声明式编码，让编码人员无需直接操作DOM，提高开发效率

3 . 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

## 入门示例 ##

1 .创建一个html页面，引入vue的库（vue官方提供了两种方式的库：开发模式库会提示警告和报错信息，生产模式库是压缩后的比较小）。

2 . 创建一个带有id的`<div>`，作为容器

3 . 在js中编写vue代码，使用构造函数`new Vue()`创建一个Vue的VM

4 .使用`el`属性，让vue接管该id的区域

5 .在`data`属性中加入需要绑定的变量和变量的值

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>快速入门</title>
            
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			
    			{
       {message}}
    		</div>
    	</body>
    	<script>
    		//view model
    
    		// 创建VUE对象
    		new Vue({
          
    			el: "#app", // 由vue接管id为app的区域
    			data: {
           // data中的数据供el管理的容器内部使用
    				message: "hello vue!" // 变量名可以自定义，和页面中的变量名对应即可
    			}
    		});
    	</script>
    </html>

其中`el`表示`element`，值通常为一个css选择器，例如`el:"#app"`、`el:".app"`，也可以是直接找到的element对象`el: document.getElementById('app')`。

**运行之后，在浏览器控制台可以看到两个提示：**

1 .提示在浏览器安装vue的开发工具

解决方式：根据提示，在浏览器安装vue工具devtools

2 . 提示当前使用的是vue开发模式库，不要在生产模式使用

在页面将vue.config的生产模式提示配置为false：Vue.config.productionTip=false;，该属性在Vue 2.2.0之后才有

浏览器还会出现一个报错信息，找不到小图标`favicon.ico`，加入该图标即可。

提示：浏览器的报错信息在按F5刷新后可能就看不到了，这是因为浏览器并没有全部刷新，可以按住 shift + F5 强制刷新浏览器。
    
    VS Code可以安装一个Live Server插件，使当前工作空间的静态资源以WebServer形式运行

**容器和Vue对象是一对一的关系：**

1 .当两个Vue对象接管同一个容器时，只有第一个生效

<body>
        <div id="app">
            {
       {message}}
        </div>
    </body>
    <script>
        // 两个Vue对象接管同一个容器时，只有第一个生效。
        new Vue({
          
            el: "#app", 
            data: {
           
                message: "hello vue!" 
            }
        });
        
        new Vue({
          
            el: "#app", 
            data: {
           
                message: "vue" 
            }
        });
    </script>

2 .当一个Vue对象对应多个容器时，只对第一个容器接管

<body>
        
        <div class="app">
            {
       {message}}
        </div>
        
        <div class="app">
            {
       {message}}
        </div>
    </body>
    <script>
        new Vue({
          
            el: ".app", 
            data: {
           
                message: "hello vue!" 
            }
        });
    </script>

3 .多个Vue对象和多个容器，一一对应，可以正常的一对一接管

<body>
        <div id="app1">
            {
       {message}}
        </div>
        
        <div id="app2">
            {
       {message}}
        </div>
    </body>
    <script>
        // 可以正常接管app1容器
        const vm1 = new Vue({
          
            el: "#app1", 
            data: {
           
                message: "hello vue!" 
            }
        });
        
        // 可以正常接管app2容器
        const vm2 = new Vue({
          
            el: "#app2", 
            data: {
           
                message: "VUE" 
            }
        });
    </script>

### Vue代码和MVVM模型对应关系： ###

M：模型（Model），对应data中的数据

V：视图（View），页面模板

VM：视图模型（ViewModel），Vue实例对象  
  
**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

[e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/887ea713b64e41f494738831ddf452e1.gif