vue 入门到实战一

第1章初始Vue.js

1.1 网站交互方式

1.2 MVVM模式

1.3 Vue.js是什么

1.4 安装Vue.js

1.5 第一个Vue.js程序

1.6 插值与表达式

第1章初始Vue.js

1.1 网站交互方式

Web网站有单页应用程序（SPA，Single-page Application）和多页应用程序（MPA，Multi-page Application）两种交互方式。

多页应用程序，顾名思义是由多个页面组成的站点。在多页应用程序中，每个网页在每次收到相应的请求时都会重新加载。多页应用程序很大，由于不同页面的数量和层数，有时甚至可以认为很麻烦，我们可以在大多数电子商务网站上找到MPA的示例。

多页应用程序以服务端为主导，前后端混合开发，例如：.php、.aspx、.jsp。技术堆栈包括HTML、CSS、JavaScript、jQuery，有时还包括AJAX。

单页应用程序，就是只有一张Web页面的应用。单页应用程序是加载单个HTML页面并在用户与应用程序交互时，动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。单页应用开发技术复杂，所以诞生了许多前端开发框架：Angular.js、React.js、Vue.js等。

选择单页应用程序开发时，软件工程师通常采用以下技术堆栈：HTML5、Angular.js、React.js、Vue.js、Ember.js、AJAX等。

1.2 MVVM模式

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。

在MVVM架构下，View和Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

1.2.1、Model

模型（Model）：对应data中的数据，一般JS对象

data: {
	a: '',
	address: '',
	name: ''
}

data中书写的Key：Value都会出现在Vue实例VM身上

1.2.2、View

视图（View）：对应模板（DOM）

<div id="root">
	<h2>{
  
  { a }}</h2>
	<h2>{
  
  { address }}</h2>
	<h2>{
  
  { name }}</h2>
</div>

1.2.3、ViewModel

视图模型（ViewModel）：对应Vue实例对象（VM）

3、ViewModel
视图模型（ViewModel）：对应Vue实例对象（VM）

<script type="text/javascript">
	// ViewModel
	new Vue({.   
		// View
		el: '#root', 
		// Model
		data: {  
			a: '',
			address: '',
			 name: ''
		}
	)
</script>

1.3 Vue.js是什么

Vue（读音/vjuː/，类似于view）是一套构建用户界面的渐进式框架。与其它重量级框架不同的是，Vue.js采用自底向上增量开发的设计。

Vue.js本身只是一个JS库，它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js可以轻松构建SPA（Single Web Application）应用程序，通过指令扩展HTML，通过表达式将数据绑定到HTML，最大程度解放DOM操作。

1.4 安装Vue.js

将Vue.js添加到项目中有4种主要方法：本地独立版本方法、CDN方法、NPM方法以及命令行工具（CLI）方法。

本地独立版本方法

可通过地址“https://unpkg.com/vue@next”将最新版本的Vue.js库（vue.global.js）下载到本地。然后，在界面文件中引入Vue.js库，示例代码如下：

首先安装一个live server插件，在helllovue.html代码上点击右键出现一个名为Open with Live Server的选项，自动打开浏览器，默认端口号是5500。

CDN方法

可通过CDN（Content Delivery Network，内容分发网络）引入最新版本的Vue.js库。

NPM方法

在使用Vue.js构建大型应用时推荐使用NPM安装最新稳定版的Vue.js，因为NPM能很好地和webpack模块打包器配合使用。示例如下：

npm install vue@next

命令行工具（CLI）方法

Vue.js提供一个官方命令行工具（Vue CLI），为单页面应用快速搭建繁杂的脚手架。对于初学者不建议使用NPM和Vue CLI方法安装Vue.js。

具体步骤可以参考下面的链接;

本地惠生活,惠生活,好店铺,好内容,好服务,全方位生活服务平台,家具装修-生活服务-休闲娱乐-丽人美容-婚庆摄影-宠物服务-月子中心-养老服务-健康咨询-心理服务https://aistudy.baidu.com/okam/pages/article/index?articleId=100361427&ucid=n1D4rHDvrjm&categoryLv1=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD&ch=54&srcid=10007&contentFrom=3

1.5 第一个Vue.js程序

可通过“https://code.visualstudio.com”地址下载VSCode，本书使用的安装文件是VSCodeUserSetup-x64-1.52.1.exe（双击即可安装）。

 const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                title: "Vue3.0 使用 Vue.createApp() 创建一个应用程序 ",
                userInfo: {} //定义用户对象
            }
        },
        //初始化的入口
        created: function () {
            //调用方法：获取用户信息
            this.getUserInfo();
        },
        //方法
        methods: {
            //获取用户信息
            getUserInfo: function () {
                this.userInfo = {
                    userId: 1,
                    userName: "vivi的博客",
                    blogName: "您好，欢迎访问 vivi的博客",
                    blogUrl: "https://blog.csdn.net/vivi"
                }
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app');

每个Vue.js应用都是通过用createApp函数创建一个新实例开始，具体语法如下：

const app = Vue.createApp({ /* 选项 */ }) 通过上面那个图片，可以看出这个选项可以定义一个参数，也可以包裹一个data数据，所以选项是选择。

传递给createApp的选项用于配置根组件（渲染的起点）。Vue.js应用创建后，调用mount方法将Vue.js应用挂载到一个DOM元素（HTML元素或CSS选择器）中，例如，如果把一个Vue.js应用挂载到<div id="hello-vue"></div>上，应传递#app。示例代码如下：