初识Vue 输出Hello World 及注意事项-Toy模板网

这篇具有很好参考价值的文章主要介绍了初识Vue 输出Hello World 及注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在我们还没接触Vue之前，我同学常说我可以直接在元素里输出JS的表达式吗？肯定是不太行。当我们接触vue.js后，这个想法成了现实。
每当我们学习一门新的语言或者框架时，我们都习惯打印一个“hello world”，在我们vue当中，我们如何打印，或使用呢？接下来让我为大家介绍一下吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 我们使用{{}}的形式 -->
    <div class="root">Hello {{name}}</div>
    <!-- 我们发现页面直接输出了 Hello {{name}} 说明Vue实例是一一对应的-->
    <div class="root">Hello {{name}}</div> 
</body>
<script src="../js/vue.js"></script>
<script>
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
    new Vue ({ //Vue实例化
        // 注意：需要以对象的形式去使用 记得加逗号
        el:".root", //el代表的是元素，后面跟字符串形式的css选择器
        data:{ //data相当于存储数据的地方 供el所指的容器去使用
            name:"World" //存一个name
        }
    })
</script>
</html>

初识Vue 输出Hello World 及注意事项,vue.js,前端,javascript

注意事项：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为Vue模板
4.Vue实例与容器是一一对应的
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！文章来源地址https://www.toymoban.com/news/detail-738981.html

到了这里，关于初识Vue 输出Hello World 及注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！