Vue实用操作篇-1-第一个 Vue 程序

安装 Vue 非常的简便,只需下载好 Vue 对应的 .js 文件,在 html 中引入 vue.js 即可使用 Vue

下载好了 vue.js 我们便可以编写我们的第一个 vue 程序了

html 复制代码
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>first-vue</title>
        <!-- 加载vue -->
        <script src = "js/vue.js"></script>
    </head>
    <body>
        <!-- 指定挂载位置 -->
        <div id = "app"></div>
        <!-- Vue 程序 -->
        <script>
            // 创建 Vue 的实例对象
            const myVue = new Vue(
            //可变参数,opting -> 选项,其中可以编写大量的配置项
            {
                // 配置项1:模版语句
                template : '<h1>hello vue!</h1>'
                
            })
            // 将 myVue 这个实例挂在在 app 上
            myVue.$mount('#app')
        </script>
    </body>
</html>

在浏览器运行这个 html 文件

对于第一个程序,我们需要知道以下几点基础知识

1.我们通过 new vue() 这个对象来调用 vue 组件中的内容

2.对于 vue 对象的创建,我们需要对其指定可选项 options

即 :

html 复制代码
let options = {
    template : '<h1>hello vue!</h1>'
}

对于options , 里面是许多的可选项 option ,以键值对的形式存在,当我们需要使用某些特定功能时添加 option,在 new vue() 时指定 options 时,参数名可省略

html 复制代码
const myVue = new Vue({
    template : '<h1>hello vue!</h1>'
    key1 : value1
    key2 : value2
})

3.template 配置项:用于指定模版语句

模版语句可以是 html 代码,也可以是 Vue 指定的一些特殊规则

4.Vue 对象的实例都有一个 $mount() 方法

$mount() 的作用是将实例挂载到指定位置,将其挂载后方便对其进行管理

相关推荐
web147862107238 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247809 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖12 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案120 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548825 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.36 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营40 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui