环境准备

下载vue:Vue下载
下面两个是可选的,主要是我想让控制台干净点
vue_dev_tool安装 vue_dev_tool安装
: Vue 控制台出现You are running Vue in development mode. Make sure to turn on production mode when deploying for production

第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js" type="text/javascript">    </script>
</head>
<body>
    <!-- html:5快速生成 -->
    <div id="display">
        欢迎来到{{name}}的网站
        <!-- {{name}}是插值表达式，在data中找名为name的键所对应的值 -->
    </div>
    <script type="text/javascript">
          Vue.config.productionTip = false
        //   new Vue({})的{}是一个配置对象
        
          new Vue({
            el:"#display",//el是element的缩写
                          // #display是通过id选择器来绑定，通常是使用id选择器，下面的几种要认识
                          // 通过类选择器来绑定:把#display换成.display即可
                          // document.getElementById("display")                          
            data:{
                name:"矽疑"
            }
          })
    </script>
</body>
</html>