Vue01
突然转前端了，有点开心，最近捋了捋都要学什么，先写我的入门笔记吧，Java后面再慢慢更新.......
在HTML文件中使用vue
<body>
<div id="app"></div>
<!--引入vue.js库文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
template: '<p>{{message}}</p>',
data: {
message: 'Hello Vue!'
}
})
// vm.$mount(document.getElementById('app'))
vm.$mount('#app') //与上面的作用一致
</script>
</body>
定义一个id位app的div，div为容器，vue实例对象中的内容会被挂载到这个容器上。
引入vue.js库文件
new实例化Vue对象，通常一个vue对象为一个应用，这个应用包含了视图界面，数据和执行逻辑。实例化时可有很多选项，template选项表示视图模板，改模板使用({...})表达式将数据填充到模板，模板被解析后就是视图（HTML片段）。data选项中存储数据，这里存放了message数据，引用执行后这个message被填充到模板中。vm变量指向Vue对象，Vue对象有一个$mount方法，作用是将实力挂载到HTML的DOM节点上。原来的div会被template替换，这是挂载的结果。vue对象的$mount方法参数可以是一个dom元素也可以是一个选择器。
使用el选项
上面的例子可以改为使用el选项直接指定要挂载的DOM元素，这样就无需调用$mount方法来挂载。
var vm = new Vue({
el: '#app',
template: '<p>{{message}}</p>',
data: {
message: 'Hello Vue!'
}
});
省略template
在实例化vue对象的时候，如果存在template，那么template的内容会完全替换掉el指定的DOM元素，如果没有指定template，那么el指定的DOM元素会被提取出来作为模板（template会完全替换el指定元素，但如果没有template，el不会被替换，而会被当作模板来解析）
<div id="app">
<p>Hello Vue!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
简单事件处理
<body>
<div id="app">
<p>{{message}}</p>
<button v-on:click="message='Hello World!!!'">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
message: {
hello: function() {
this.message = 'Hello World!'
}
}
})
</script>
</body>
代码中添加了methods选项，这个选项中定义的都是方法。当发生事件之后调用这个方法。<button>按钮上使用了 v-on:click ,这个属性HTML中是没有的，只有Vue框架才有。因为整个div已经被作为vue的模板了，vue在解析模板的时候，会按照 v-on:click 来为dom元素注册事件。 v-on 是前缀，click是事件名称（标准dom事件名称去掉on），中间用":"分割，后面双引号中的内容是事件处理函数的名称，它必须 methods中定义。
v-on:click= "" 等号后面的双引号中的内容其实也可以是JavaScript表达式，对于比较简单的事件处理可以不必调用事件处理函数来处理。
可以看到模板中访问 vue中的 data和methods中定义的变量和方法的时候，都是可以直接访问的。因为模板”看起来“像HTML代码，实际上它是JavaScript代码，因为它们执行的时候会被放入到vue实例对象内部来解析的，在vue对象内部，this其实就是vue实例对象
Vue与传统的编程
传统的DOM编程是要靠JavaScript代码来操作DOM对象的，实现对DOM节点（对象）的增，删，改，查。从上面的例子中可以看到，我们并没有直接操作DOM，而是通过JavaScript代码来操作数据，Vue框架发现数据发生变化之后，自动渲染DOM节点。它之所以能够做到这一点，是因为Vue引入了虚拟Dom的概念(Virtual Dom) 它主要解决了浏览器DOM操作的性能问题。
