【Vue】Vue简介/引入方式及示例

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 模块构建版本

<!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>

3. 第一个vue应用

<!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>

Vue简介/引入方式及示例

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

2.Vue引入方式

3. 第一个vue应用

相关文章