随笔记录：
1. 导入vue.js文件
<!--引入vue.js-->
<script src="js/vue.js"></script>
也可以地址引用，地址: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2.测试Vue对DOM的操作
<!--测试代码 -->
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
PS：通过Vue，对DOM进行操作，除了可以进行数据传递，还有对应的for循环以及if判断，可以对数组列表等数据进行循环输出。
3. 事件
<!--测试代码-->
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
});
PS：Vue通过自己的属性标签进行事件操作，同时也可以进行逻辑判断，循环操作。在Vue实例里，也可以调用JS函数等其他函数等。
4.for循环和点击事件+小函数
<!--测试代码-->
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<!--测试代码-->
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});
5.Vue组件树
PS：Vue强大的功能，告别以往HTML CSS 与JS混乱不堪的情况，对页面组件进行高度解耦，实现页面组件的高度复用，主要分为全局组件以及局部组件，组件之间以单根继承形式生成组件树。
// 声明全局组件
Vue.component('todo-item', {
props: ['todo'],template: '<li>{{ todo.text }}</li>'
})
// 调用
<ul id="app-8">
<todo-item2></todo-item2>
</ul>
PS：虽然Vue可以让我们以标签的方式对全局组件进行调用，但必须是在Vue里，否则是无效的。所以还需要进行实例化。
var app8 = new Vue({
el:'#app-8'
})
这样就可以实现效果：
我们也可以通过Vue.component声明多个全局组件进行调用。
Vue.component('todo-item1', {
template: '<li>test1</li>'
})
Vue.component('todo-item2', {
template: '<li>test2</li>'
})
<!--测试代码-->
<ul id="app-8">
<todo-item1></todo-item1>
<todo-item2></todo-item2>
</ul>
var app8 = new Vue({
el:'#app-8'
})
效果：
至于new Vue({})内的各种函数就用时间积累吧。