jck28 - 小柒 - 前端开发 - Vue基础语法

一,Vue基本介绍

1.1 定义

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

  • 官方文档介绍:简介 | Vue.js

1.2 开发工具安装使用

  • VS Code下载:https://code.visualstudio.com/
  • VS Code安装
    • (1)VS Code安装教程:VScode 教程 | 菜鸟教程
    • (2)安装完成后,推荐下载对应的插件
      • Chinese:汉化包,支持中文
      • “open in browser” :在vscode中支持浏览器打开HTML
      • Live Preview :实时预览编写的代码
        image

二,Vue语法结构

  • 响应式开发是Vue的最大特色,基于“依赖追踪”的方式来实现响应式。

  • createApp函数用来创建Vue实例。

  • setUp函数是组合式api的入口

  • ref函数用来定义响应式变量

  • mount函数用来挂载实例

  • 代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>

<script>
  //导入createApp函数
  const {createApp,ref}= Vue
  //页面加载完成后再来回调执行的代码
  window.onload = function(){
     //创建Vue实例
    const app = createApp({
      //程序入口
      setup(){
        const msg = "Hello Vue !!!!!"
        const num = ref(99)
        function addNum(){
          num.value +=1;
        }
        //返回一个对象,用来暴露数据
        return {
          msg,
          num,
          addNum
        }

      }
    })
    //挂载实例
    app.mount("#app")

  }
 
</script>
</head>
<body>
  <div id="app">
    <p>{{msg}}</p>
    <p>{{num}}</p>
    <button @click="addNum">点我</button>
  </div>
</body>
</html>

二,Vue