vscode上hello vue!

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会被重新渲染！