在原生HTML文件中引入Vue并使用

0. 简介

有的时候,我们需要在原生 HTML 文件中引入 Vue 使用,比如说一些门户网站,或者是未使用 Vue 脚手架的项目中使用 Vue 的功能,这时候我们就需要在 HTML 中引入 Vue.js ,优点是简单方便,不需要安装和配置额外的构建工具,适合快速原型开发和小规模项目,缺点是无法进行模块化管理,代码复用性较低,不利于大型项目的开发和维护。

1. 引入Vue框架

你可以使用CDN引入,或者直接下载Vue框架包本地引入,此处使用CDN引入:

2. 创建并挂载Vue实例

创建需要挂载的html元素:app

...

创建 Vue 实例并挂载到 app 上,注意 data 的声明方式与 Vue 脚手架不一致

这样我们就可以在 app 书写并使用Vue的模板语法以及事件绑定等等功能了

像这样:

我们在案例中用到了axios,我们先引入一下:

{{message}}

历史上的今天

  • {{item.title}}

浏览器效果:

在原生HTML文件中引入Vue并使用_第1张图片

3. 在Vue实例上添加组件与模板

1 . 添加子组件

在Vue实例内添加components字段,值为对象:

2. 给子组件添加template内容

使用script标签的type属性指定vue组件的template:

script标签如果不写type属性,浏览器会默认为text/javascript,如果写了不同的类型,浏览器就不会再按照解析JS的规则去解析了,发现是不识别的类型就会忽略它。

比如说有一个叫做foo-template-engineer的模板引擎,它约定了凡是type为text/foo-template的script标签中存放的都是模板文件,浏览器在加载网页的时候检查到了

你可能感兴趣的:(vue.js,javascript,前端,html)