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

0. 简介

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

1. 引入Vue框架

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

2. 创建并挂载Vue实例

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

<div id="app">
    ...
</div>

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

<script>
    new Vue({
        el: '#app', // Vue 实例挂载的元素
        data: {
            ...
        },
        methods: {
            ...
        }
    })
</script>

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

像这样：

我们在案例中用到了axios，我们先引入一下：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div id="app">
    <h1>{{message}}</h1>
    <button @click="changeMessage">改变message</button>
    <button @click="getData">获取数据</button>
    <h1>历史上的今天</h1>
    <ul>
          <li v-for="(item,index) in historyToday" :key="index">{{item.title}}</li>
    </ul>
</div>



<script>
    new Vue({
        el: '#app', // Vue 实例挂载的元素
        data: {
            message: 'Hello, Vue!',
            flag: true,
            historyToday: null,
        },
        methods: {
            changeMessage(){
                if (this.flag) {
                    this.message = '你好，Vue!',
                    this.flag = false
                } else {
                    this.message = 'Hello, Vue!'
                    this.flag = true
                }
            },
            async getData(){
                let result = await axios.get('https://api.qqsuu.cn/api/dm-lishi')
                console.log(result);
                if (result.status===200) {
                    this.historyToday = result.data.data.list
                }
           }
       },
    })
</script>

浏览器效果：

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

1 . 添加子组件

在Vue实例内添加components字段，值为对象：

<script>
    new Vue({
        el: '#app', // Vue 实例挂载的元素
        data: {
            ...
        },
        methods: {
            ...
        },
        components: {
            'component1': { // 组件名，在父组件中使用标签方式即可
                // 定义组件模板，来自定义的script标签模板
                template: '#template1',
                data() { // 注意此处data声明的方式与脚手架一致
                    return {
                        message1: 'Message1'
                    }
                },
                methods: {
                    changeMessage() {
                        this.message1 = 'New Message';
                    }
                },
            }
        }
    })
</script>

2. 给子组件添加template内容

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

<script type="text/x-template" id="template1">
    <div>
        <h1>我是组件1</h1>
        <h1>{{ message1 }}</h1>
        <button @click="changeMessage">Change Message</button>
    </div>
</script>

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

比如说有一个叫做foo-template-engineer的模板引擎，它约定了凡是type为text/foo-template的script标签中存放的都是模板文件，浏览器在加载网页的时候检查到了<script type=”text/foo-template”>发现自己不能识别，于是就忽略掉它和其中的内容，等到浏览器渲染到模板引擎的JS代码的时候，JS模板引擎获取到这个标签中的内容，然后使用数据对其进行渲染输出到页面上，这里的text/x-template就是vue的自定义模板的模板引擎

4. 添加样式

添加样式与原生HTML一致，直接在style标签书写，或者.css文件中书写引入