Avatar
😆

Organizations

1 results for 前端
  • Vue 简介与安装

    Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。它被设计为自底向上逐层应用,核心库只关注视图层。

    什么是 Vue

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

    特点

    • 易学易用
    • 渐进式框架
    • 响应式数据绑定
    • 组件化开发
    • 虚拟 DOM
    • 轻量高效

    安装方式

    1. CDN 引入

    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    
    <!-- 生产环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    

    2. NPM 安装

    # 使用 npm
    npm install vue@next
    
    # 使用 yarn
    yarn add vue@next
    
    # 使用 pnpm
    pnpm add vue
    

    3. Vue CLI 创建项目

    # 安装 Vue CLI
    npm install -g @vue/cli
    
    # 创建项目
    vue create my-project
    
    # 启动项目
    cd my-project
    npm run serve
    

    4. Vite 创建项目(推荐)

    # 使用 npm
    npm create vite@latest my-vue-app -- --template vue
    
    # 使用 yarn
    yarn create vite my-vue-app --template vue
    
    # 使用 pnpm
    pnpm create vite my-vue-app --template vue
    
    # 进入项目并安装依赖
    cd my-vue-app
    npm install
    npm run dev
    

    第一个 Vue 应用

    <!DOCTYPE html>
    <html>
    <head>
      <title>Vue App</title>
      <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>
    <body>
      <div id="app">
        <h1>{{ message }}</h1>
        <p>{{ description }}</p>
      </div>
    
      <script>
        const { createApp } = Vue;
        
        createApp({
          data() {
            return {
              message: 'Hello Vue 3!',
              description: '这是我的第一个 Vue 应用'
            }
          }
        }).mount('#app');
      </script>
    </body>
    </html>
    

    Vue 基础语法

    模板语法

    文本插值

    使用双大括号 {{ }} 进行文本插值:

    Vue 前端 JavaScript Created Tue, 05 Nov 2024 00:00:00 +0000