Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
使用方法总结 ：
1.创建Vue实例const app = Vue.createApp({});
2.绑定挂载点app.mount('.class名');
简单理解：用Vue创建数据模板，然后挂载到指定HTML元素上。
也可以使用模块导入实例数据。
2.1 使用全局构建版本
2.2 使用 ES 模块构建版本
<!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>Document</title></head><body><!--使用全局构建版本示例<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app">{{ message }}</div><script>const { createApp } = Vue;createApp({data() {return {message: 'Hello Vue!',};},}).mount('#app');</script>--><!--使用 ES 模块构建版本--><div id="app">{{ message }}</div><script type="module">//这里引入的是 【ES 模块构建版本js vue.esm】import { createApp } from './lib/vue.esm-browser.js';createApp({data() {return {message: 'Hello Vue!',};},}).mount('#app');</script></body></html>
<!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>第一个vue应用</title><!-- jquery --><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><!-- 1. 静态页面 --><!-- <h2>Hello php中文网</h2> --><!-- 2. 模板化--><h2 class="title">{{message}}</h2><script>// //js// document.querySelector('.title').textContent = 'hello world!'// //jquery// $('.title').text('大家好，我是jquery!');</script><!-- vue.js 方式 --><script src="https://unpkg.com/vue@next"></script><script>// // 1. 应用实例,创建vue应用实例// // const app = Vue.createApp({根组件配置项});// const app = Vue.createApp({// // 数据// data(){// return {// //将当前实例中用到的所有数据全部声明在这里// message : 'Vue是一个主流的开发框架，这是Vue返回的message数据',// }// },// //方法// methods:[],// });// // 2. 根组件实例，挂载根组件// // const vm = app.mount(document.querySelector('.title'));// const vm = app.mount('.title');//-------以下为简化版本 --------------// 创建vue应用实例,并挂载到相关元素位置// const app = Vue.createApp({// // 数据// data() {// return {// //将当前实例中用到的所有数据全部声明在这里// message: 'Vue是一个主流的开发框架，这是Vue返回的message数据',// };// },// //方法// methods: [],// }).mount('.title');//-------第二种写法：将配置项单独拿出来 --------------// 创建vue应用实例,并挂载到相关元素位置// const rootComponent = {// // 数据// data() {// return {// //将当前实例中用到的所有数据全部声明在这里// message: 'Vue是一个主流的开发框架，这是Vue返回的message数据',// };// },// //方法// methods: [],// }// const app = Vue.createApp(rootComponent).mount('.title');</script><script type="module">//-------第三种写法：模块化写法，将配置项单独放到JS中再导入 --------------//导入默认的模块import rootComponent from './root_component.js';// 创建vue应用实例,并挂载到相关元素位置const app = Vue.createApp(rootComponent).mount('.title');</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
