image.png

    vue.js 这个是开发版本的vue，这是有一个比较清晰的报错提示的
    vue.min.js 这个是一个生产版本的vue，这个没有清晰的报错提示，所以对于初学者来说还是用vue.js比较好

    我们来创建一个最简单的

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <title>secure crt</title>
    6. </head>
    8. <body>
    9. <script type="text/javascript" src="./vue.js"></script>
    11.   <!-- 这上面可以理解准备了一个容器 -->
    12.   <div id="app">
    13.     <!-- //容器里的这一部分被称为Vue模版 -->
    14.     <p> {{ message }}</p>
    15.   </div>
    17. <!-- //通过el匹配容器 -->
    18. <script >
    19.   var vm = new Vue ({
    20.     el:"#app",
    21.     data : {
    22.       message: "我是data里面的message"
    23.     }
    24.   })
    25. </script>
    27. </body>
    29. </html>

    上面的例子中：
    new Vue 是构造函数
    第一个script是需要引入vue，第二个script需要写Vue实例
    然后div与构造函数通过id css选择器
    el 是element，#app是id选择器
    {{ message }} 这种叫做插值表达式
    var vm = 可以省略
    Vue模版

    当我修改vm.message 的值时，对应的页面显示也发生了变化，这也证明了响应式
    当数据变化之后，界面会重新渲染，这就是响应式。