初识Vue

最新推荐文章于 2024-05-16 16:37:09 发布

茶老翁

最新推荐文章于 2024-05-16 16:37:09 发布

阅读量1k

点赞数 39

分类专栏： Vue框架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_72671719/article/details/137418015

版权

Vue框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.1-网站交互方式

Web网站交互方式：
1、单页应用程序（SPA,Signal-page Application）
2、多页应用程序（MPA,Multi-page Application）

1.1.1-单页应用程序

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

1.1.2-多页应用程序

多页应用程序，由多个页面组成的站点。
在多页应用程序中，每个网页在每次收到相应的请求时都会重新加载
多页应用程序很大，由于不同页面的数量和层数，有时甚至可以认为很麻烦，在大多数电子商务网站上找到MPA的示例。
多页应用程序以服务端为主导，前后端混合开发，例如：.php、.aspx、.jsp
技术堆栈包括HTML、CSS、JavaScript、jQuery，有时还包括AJAX

1.2-MVVM模式

MVVM是Model-View-ViewModel的缩写，是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定
MVVM架构下，View和Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上

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种主要方法
1、本地独立版本方法
2、CDN方法
3、NPM方法
4、命令行工具（CLI）方法

1.4.1-本地独立版本方法

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

1.4.2-CDN方法

可通过CDN（Content Delivery Network，内容分发网络）引入最新版本的Vue.js库
示例代码如下：

对于生产环境，建议使用固定版本，以免因版本不同带来兼容性问题，示例代码如下：

1.4.3-NPM方法

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

1.4.4-命令行工具(CLI)方法

Vue.js提供一个官方命令行工具（Vue CLI），为单页面应用快速搭建繁杂的脚手架

1.5-第一个Vue.js程序

前端开发工具，大多数程序员使用JetBrains WebStorm和Visual Studio Code（VSCode）
JetBrains WebStorm是收费的，推荐使用VSCode

1.5.1安装开发工具及插件

可通过“https://code.visualstudio.com”地址下载VSCode
下载安装vetur插件

1.5.2-创建第一个Vue.js程序

每个Vue.js应用都是通过用createApp函数创建一个新实例开始
具体语法如下：
const app = Vue.createApp({ /* 选项 */ })
传递给createApp的选项用于配置根组件（渲染的起点）
Vue.js应用创建后，调用mount方法将Vue.js应用挂载到一个DOM元素（HTML元素或CSS选择器）中
例如，如果把一个Vue.js应用挂载到

上，应传递#app。示例代码如下：
const HelloVueApp = {} //配置根组件
const vueApp = Vue.createApp(HelloVueApp) //创建Vue实例
const vm = vueApp.mount(‘#app’) //将Vue实例挂载到#app

1.5.3-声明式渲染

Vue.js的核心是采用简洁的模板将数据渲染到DOM中，通过模板

声明将属性变量message的值“Hello Vue!!”渲染到页面显示。

1.5.4-Vue.js生命周期

每个Vue.js实例在被创建时都要经过一系列的初始化过程
例如，数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等
同时在这个过程中也会调用一些叫生命周期钩子的函数，在适当的时机执行业务逻辑
例如，created钩子函数可用来在一个Vue.js实例被创建后执行代码（Vue.js实例创建后被立即调用即HTML加载完成前）
Vue.js的生命周期共分8个阶段，即对应8个与created类似的钩子函数:
在这里插入图片描述

1.6-插值与表达式

Vue的插值表达式“{{ }}”的作用是读取Vue.js中data数据，显示在视图中，数据更新，视图也随之更新
“{{ }}”里只能放表达式（有返回值），不可放语句
例如，{{ var a = 1 }}与{{ if (ok) { return message } }}都是无效的。

1.6.1-文本插值

数据绑定最常见的形式就是使用“Mustache（小胡子）”语法（双花括号）的文本插值，将绑定的数据实时显示出来
例如，{{ counter }}，无论何时，绑定的Vue.js实例的counter属性值发生改变，插值处的内容都将更新

1.6.2-原始HTML插值

“{{ }}”将数据解释为普通文本，而非HTML代码
当我们需要输出真正的HTML代码时，可使用v-html指令。
假如，Vue.js实例的data为：
data() {
return {
rawHtml: ‘

’
}
}
则“

无法显示HTML元素内容: {{ rawHtml }}

”显示的结果是

；而“

可正常显示HTML元素内容:

”显示的结果是一条水平线。

1.6.3-JavaScript表达式

对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。示例如下：
{{ number + 1 }}
{{ isLogin? ‘True’ : ‘False’ }}
{{ message.split(‘’).reverse().join(‘’)}}

Hello vue.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>
</body>
<script>
    const { createApp, ref } = Vue
  
    createApp({
      setup() {
        const message = ref('Hello vue!')
        return {
          message
        }
      }
    }).mount('#app')
  </script>
</html>