Vue学习：02-Vue简介-优快云博客

一、什么是Vue？

Vue是一款用于构建用户界面的JavaScript框架；它基于标准 HTML、CSS和 JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

前端开发模式经历了3个阶段：模板渲染页面->AJAX前后端分离->MVVM

二、MVVM 工作原理

MVVM 指的是Model、View和ViewModel

● Model：页面渲染用到的数据源

● View：页面所渲染的 DOM 结构

● ViewModel：表示 vue 的实例

● 当数据源发生变化时，会被 VM 监听到，VM 会根据最新的数据源自动更新页面的结构

● 当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

三、Vue 的组件风格书写

Vue 的组件可以按两种不同的风格书写

● 选项式 API

● 组合式 API

1、选项式 API

● 使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data、methods和 mounted

● 选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例

2、组合式 API

● 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑

● 在单文件组件中，组合式 API 通常会与<script setup>搭配使用

● 这个setup属性是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API

● <script setup>中的导入和顶层变量/函数都能够在模板中直接使用

四、理解组件

（一）模块和模块化

理解：向外提供特定功能的 js 程序, 一般就是一个 js 文件

为什么： js 文件很多很复杂

作用：复用 js, 简化 js 的编写, 提高 js 运行效率

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

（二）组件和组件化

理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)

为什么：一个界面的功能很复杂

作用：复用编码, 简化项目编码, 提高运行效率

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

五、应用实践

教材P10案例：本案例的语法规则使用的是选项式API。

<!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>第一章 应用实践</title>    
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>
    <body>
        <div id="app" class="jianjie">              
            <div class="wrap">                
                <div class="jianjiebody">  
                    <h3>{{cityTitle}}</h3>
					<p>{{cityInfo}}</p>
                    <button v-on:click="clickButton" class="cBtn">喜欢我就为我点赞吧</button><span>点赞数：{{count}}</span>
                        
                    <div class="clear"></div>                    
                </div>
            </div>
        </div>        
    </body>
    <script>
        const RootComp = {//创建根组件
            data:function(){
				return {
						count:0,
						cityName:"洛阳",
						cityTitle:'洛阳简介',
						cityInfo:"洛阳市有5000多年文明史、4000多年城市史、1500多年建都史。洛阳是华夏文明的发祥地之一、丝绸之路的东方起点，隋唐大运河的中心。历史上先后有13个王朝在洛阳建都 。"
				}
			},
			methods:{
					clickButton(){
						this.count=this.count+1;
					}
			}
        }            
        const appObj = Vue.createApp(RootComp)//创建一个Vue应用
        appObj.mount("#app")
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;            
        }
        .clear {
            clear: both;
        }
        .wrap {
            width: 800px;
            margin: 0 auto;
        }
        .jianjie{
            width: 100%;
            margin: 20px auto;
            padding: 20px 0;            
        }
        .jianjiehead{	    
            border-bottom: #A58241 1px solid;
        }
      
        .jianjiebody {
            width: 796px;
            margin: 20px 0;
            padding: 20px 0 20px 20px; 
            box-shadow: 0 0 3px #6a3b3b;
        }    
        .cBtn{
				width: 200px;
				height:30px;
				line-height:30px;
		}
        p{
            padding: 20px;
        }	   
    </style>
</html>

程序剖析：

1、导入Vue库文件

2、选择挂载点

3、声明渲染数据的HTML代码结构

4、利用Javascript定义数据和操作数据

5、创建Vue应用实例和进行挂载处理