Vue在HTML中如何使用

导读:本篇文章讲解 Vue在HTML中如何使用,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

👀Vue是什么

一套用于构建用户界面渐进式JavaScript框架。

  • 构建用户界面:数据变成界面
  • 渐进式:Vue可以自底向上逐层的应用

👀Vue如何使用

一、引入vue.js

<script src="./js/vue.js"></script>

二、准备一个容器

<div class="box"></div>

三、在script中创建一个Vue实例,且要传入一个配置对象,Vue实例和容器一一对应

<script>
        new Vue({
            el: '.box', //el用于指定当前Vue实例为哪个容器服务,值通常为选择器字符串。
            data: { //data中用于存储数据,数据供el所指定的容器去使用。
                name: 'super码力'
            }
        })
</script>

四、通过插值语法把Vue实例中的数据传入html标签中显示

    <div class="box">
        <!-- 插值语法 -->
        <!-- 功能:用于解析标签体内容。写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。 -->
        <h1>{{name}}</h1>
        <h3>{{name}}</h3>
        <h6>{{name}}</h6>
    </div>

浏览器打开显示效果如下:

Vue在HTML中如何使用

 注意:

  • 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
  • 容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法

👀Vue使用过程产生的提示

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

翻译一下:

您正在开发模式下运行 Vue。 确保在部署生产时打开生产模式。

解决方法:

在script标签里面Vue实例的外面,输入一行代码就能解决这个问题,

 Vue.config.productionTip = false //阻止vue在启动时生成生产提示。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/6250.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!