简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 【Vue】Vue简介/引入方式及示例
Blogger Information
Blog 94
fans 0
comment 0
visits 92416
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【Vue】Vue简介/引入方式及示例
可乐随笔
Original
1502 people have browsed it

Vue简介/引入方式及示例

1.Vue是什么：前端框架。

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

使用方法总结 ：
1.创建Vue实例
const app = Vue.createApp({});
2.绑定挂载点
app.mount('.class名');
简单理解：用Vue创建数据模板，然后挂载到指定HTML元素上。
也可以使用模块导入实例数据。

2.Vue引入方式

2.1 使用全局构建版本
2.2 使用 ES 模块构建版本

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  11.     <!--使用全局构建版本示例
  12.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  13.     <div id="app">{{ message }}</div>
  14.     <script>
  15.       const { createApp } = Vue;
  17.       createApp({
  18.         data() {
  19.           return {
  20.             message: 'Hello Vue!',
  21.           };
  22.         },
  23.       }).mount('#app');
  24.     </script>
  25.     -->
  27.      <!--使用 ES 模块构建版本-->
  28.     <div id="app">{{ message }}</div>
  29.     <script type="module">
  30.       //这里引入的是 【ES 模块构建版本js vue.esm】
  31.       import { createApp } from './lib/vue.esm-browser.js';
  33.       createApp({
  34.         data() {
  35.           return {
  36.             message: 'Hello Vue!',
  37.           };
  38.         },
  39.       }).mount('#app');
  40.     </script>
  41.   </body>
  42. </html>

3. 第一个vue应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>第一个vue应用</title>
  8.     <!-- jquery -->
  9.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  10.   </head>
  11.   <body>
  12.     <!-- 1. 静态页面 -->
  13.     <!-- <h2>Hello php中文网</h2> -->
  15.     <!-- 2. 模板化-->
  16.     <h2 class="title">{{message}}</h2>
  18.     <script>
  19.       // //js
  20.       // document.querySelector('.title').textContent = 'hello world!'
  21.       // //jquery
  22.       // $('.title').text('大家好，我是jquery!');
  23.     </script>
  25.     <!-- vue.js 方式 -->
  26.     <script src="https://unpkg.com/vue@next"></script>
  27.     <script>
  28.       // // 1. 应用实例,创建vue应用实例
  29.       // // const app = Vue.createApp({根组件配置项});
  30.       // const app = Vue.createApp({
  31.       //     // 数据
  32.       //     data(){
  33.       //         return {
  34.       //             //将当前实例中用到的所有数据全部声明在这里
  35.       //             message : 'Vue是一个主流的开发框架，这是Vue返回的message数据',
  36.       //         }
  37.       //     },
  38.       //     //方法
  39.       //     methods:[],
  40.       // });
  42.       // // 2. 根组件实例，挂载根组件
  43.       // // const vm = app.mount(document.querySelector('.title'));
  44.       // const vm = app.mount('.title');
  46.       //-------以下为简化版本 --------------
  48.       // 创建vue应用实例,并挂载到相关元素位置
  49.       //   const app = Vue.createApp({
  50.       //     // 数据
  51.       //     data() {
  52.       //       return {
  53.       //         //将当前实例中用到的所有数据全部声明在这里
  54.       //         message: 'Vue是一个主流的开发框架，这是Vue返回的message数据',
  55.       //       };
  56.       //     },
  57.       //     //方法
  58.       //     methods: [],
  59.       //   }).mount('.title');
  61.       //-------第二种写法：将配置项单独拿出来 --------------
  63.       // 创建vue应用实例,并挂载到相关元素位置
  64.       //   const rootComponent = {
  65.       //      // 数据
  66.       //      data() {
  67.       //       return {
  68.       //         //将当前实例中用到的所有数据全部声明在这里
  69.       //         message: 'Vue是一个主流的开发框架，这是Vue返回的message数据',
  70.       //       };
  71.       //     },
  72.       //     //方法
  73.       //     methods: [],
  74.       //   }
  75.       //   const app = Vue.createApp(rootComponent).mount('.title');
  76.     </script>
  78.     <script type="module">
  79.       //-------第三种写法：模块化写法，将配置项单独放到JS中再导入 --------------
  81.       //导入默认的模块
  82.       import rootComponent from './root_component.js';
  83.       // 创建vue应用实例,并挂载到相关元素位置
  84.       const app = Vue.createApp(rootComponent).mount('.title');
  85.     </script>
  86.   </body>
  87. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！