何为Vue
"Vue" 通常指的是 Vue.js，它是一个用于构建用户界面的渐进式JavaScript框架。 Vue.js 是一个渐进式框架，由尤雨溪（Evan You）创建，并由社区支持。Vue.js之所以备受欢迎，不仅在于其灵活性和简洁的语法，更在于它为开发者提供了一套完整而强大的工具，帮助他们更高效地构建出优秀的用户界面。Vue.js已经成为前端开发者们的得力助手，不愧是让人爱不释手的框架之一。
调用Vue的方法:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
点开引用的网址我们就会进入下面的界面中，大家可以进入体验一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template type="x-template" id="my-app">
<div>
<h2>{{title}}</h2>
<h2>{{count}}</h2>
<button @click='add'>+1</button>
<button @click='minus'>-1</button>
</div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
data() { // 数据源 是响应式的
return {
title: '你好世界',
count: '1'
}
},
methods: {
add() {
this.count++
//console.log("click to add");
},
minus() {
this.count--
}
}
}).mount('#app')
</script>
</body>
解释：
- HTML 文档包括必要的元标记和标题。
- 在 内部
<body>，有一个<div>id 为“app”的 Vue 应用程序将安装在其中。 - id 为“my-app”的A
<template>包含 Vue 组件的结构。它有一个标题、一个计数和两个用于递增和递减计数的按钮。 - Vue.js 库包含在 CDN 中。
主
<script>块使用 初始化 Vue 应用程序Vue.createApp。 - 该
template选项指定应使用 id 为“my-app”的模板。 - 该
data函数返回一个包含 Vue 应用程序初始数据的对象，包括标题和计数。 - 该
methods对象包含两个方法add和minus，分别递增和递减计数。 - 最后，该
mount('#app')方法将 Vue 应用程序安装到 id 为“app”的元素。
Vue 应用程序执行：
- Vue.js 编译模板，建立反应系统，并将数据属性连接到模板。
title和 的初始值count显示在渲染的 HTML 中。- 单击“+1”按钮会触发该
add方法，更新count数据属性并导致模板的关联部分重新呈现。 - 单击“-1”按钮会触发该
minus方法，类似地更新count并重新渲染。
当用浏览器打开后我们会得到一个这样的界面：
当我们点击+1或-1时，0会跟着增加或减少，并且浏览器并没有刷新。
而上面展示的却只是Vue的冰山一角罢了。有兴趣的可以点开我给的链接深入了解一下，相信你也会爱上它的。
如果我的文章对你有所帮助，希望帮忙点个赞支持一下，感谢。
