美文网首页
vscode上hello vue!

vscode上hello vue!

作者: 翔哥不哭 | 来源:发表于2020-01-06 14:31 被阅读0次

1.新建html文件

image.png

2.引入vue.js

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • 代码如下


    image.png

3.编写div

<div id="app">
      {{ message }}&nbsp;<br>
      {{name}}
</div>

4.编写vue.js

<script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    name:"test var"
                }
                })
</script>

5.浏览器中预览

  • index.html文件上右键,点击View In Browser

    image.png
  • hello vue效果


    image.png

6.验证vue响应式

现在数据和 DOM 已经被建立了关联,所有东西都是响应式的,通过控制台修改数据来验证DOM是否跟着修改。

image.png

vue对象的数据app.message 原始值是 Hello Vue! ,现在修改为hello xxx!

image.png

结果DOM会被重新渲染!

相关文章

网友评论

      本文标题:vscode上hello vue!

      本文链接:https://www.haomeiwen.com/subject/tahkactx.html