这里学习的是tencent课堂大神的网课，做了些笔记
Vue是一个渐进式的框架体系，这里的优化部分主要是DOM部分和视图层部分。
项目中首先需要引入Vuejs代码，直接使用网络资源引用即可。
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
（开发过程中主要是使用这种版本，因为会提供警告和错误的信息）
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
（实际部署的过程中使用此版本）
Vue的使用首先就需要先将Vue方法实例出来，直接在主js文件中使用new操作符进行实例化即可，所有的方法属性等信息均在Vue方法的参数中书写。
首先是Vue获取页面中的DOM结构，在实例化完成的Vue方法中直接写出el：即可，后面书写的就是当前获取到的HTML页面中的标签元素，后面的操作都是针对当前这个标签元素的。
在el: id/class 之后就是data，data: { … }中存在的就是前台页面获取的数据，前台页面获取数据直接写出 { {属性名}} 即可获取到后台data中的属性值，data中的属性书写遵循key-value的模式
在data之后就是methods: { … } 这里面书写的全部都是各种方法，方法的所属也是前面el获取到的标签元素。同时方法获取data中的属性直接使用 this.属性名 即可获得。
前台页面获取方法需要使用标签获取，也就是使用vue的特定指令。调用methods中方法时，如果后台方法没有参数，直接写入方法名即可，如果有参数则直接使用括号传入参数即可。
使用 v-on:click = “方法”，进行点击时的方法。这里的v-on标签也可以使用@符进行替代，与其功能相同。
使用 v-html:属性名 即可获取js文件中的data包含的属性值为一整个html标签的属性。
使用 v-bind:href = “属性名”，获取js文件中data包含的属性值为网址的属性
<div id="vue-app">
{
{name}}
{
{getter("affenter")}}
<p>
<a v-bind:href="href">开发</a>
</p>
<p>
<input type="text" v-bind:value="text">
</p>
<p v-html="a_heaf"></p>
<button v-on:click = "age++">涨</button>
<button v-on:click = "age--">减</button>
<p>
my age {
{age}}
</p>
</div>
new Vue({
el: "#vue-app",
data: {
name: "123",
age: 30,
href: "www.baidu.com",
a_heaf: "<a href='#'>www.baidu.com</a>",
},
methods: {
getter: function (time) {
return "good " + time + "," + this.name;
},
ageadd: function (number) {
return this.age += number;
},
ageend: function (number) {
return this.age -= number;
}
})
鼠标事件：
鼠标事件主要存在2种
1.鼠标点击事件，主要是单机和双击。鼠标的单机事件通过v-on:click = “方法” 进行实现，鼠标的双击事件通过 v-on:dblclick = “方法” 进行实现。
<div id="vue-app">
<button v-on:click = "add_a(1)">a+</button>
<button v-on:dblclick = "add_a(10)">a++</button>
<button v-on:click = "reduce_a(1)">a-</button>
<button v-on:dblclick = "reduce_a(10)">a--</button>
<p>
a的值是：{
{a}}
</p>
</div>
new Vue({
el: "#vue-app",
data: {
a: 10
},
methods: {
add_a: function(number){
return this.a += number;
},
reduce_a:function(number){
return this.a -= number;
}
}
})
2.鼠标移动事件：
鼠标的移动事件主要是通过获取页面中的event对象，然后通过页面中的event对象获取其中的offsetX,Y进行获取鼠标移动的位置
<div id="canvas" v-on:mousemove = "updataXY" style="width: 200px; height: 200px; border:1px solid black;text-align: center">
{
{x}},{
{y}}
</div>
new Vue({
el: "#vue-app",
data: {
x: 0,
y: 0
},
methods: {
updataXY: function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
})
这里的鼠标移动事件可以通过组织其冒泡事件进行停止，通过设置方法即可实现。可以使用vue自带的stop属性实现
<div id="canvas" v-on:mousemove = "updataXY" style="width: 200px; height: 200px; border:1px solid black;text-align: center">
{
{x}},{
{y}}
<span v-on:mousemove = "stopXY">--stop move,xy</span>
<span v-on:mousemove.stop = "">--stop move,xy</span>
</div>
stopXY:function(event){
event.stopPropagation();
}
键盘事件：
键盘事件主要是通过vue自带的v-on: keyup 属性进行获取，keyup后面可以使用点运算符追加按键实现多重按键操作。
这里注意这里指的键盘事件仅仅是在页面的输入框中进行输入时出现的键盘事件。
<div id="vue-app">
<span>Name</span>
<input type="text" v-on:keyup = "logName">
<span>Age</span>
<input type="text" v-on:keyup.enter = "logAge">
<div>
new Vue({
el: "#vue-app",
data: {
name: "herry",
age: 30
},
methods: {
logName: function(){
console.log("触发了Name")
},
logAge: function(){
console.log("触发了Age");
}
}
})
阻止HTML标签默认事件：
使用vue自带的prevent属性实现阻止HTML标签的默认事件
<a href="#" v-on:click.prevent>123</a>
双向数据绑定：
双向数据绑定主要是使用v-model = “属性” 进行的，使用v-on:keyup = “方法” 准确的说是一个单向数据绑定，只会将输入框中的数据传入data中的属性中，但是并不会获得data中的数据。
<div id="vue-app">
<input ref="name" type="text" v-model="name">
<!--这里的name说的是data中的name-->
<p>{
{name}}</p>
<input ref="age" type="text" v-on:keyup="logAge">
<p>{
{age}}</p>
<div>
new Vue({
el: "#vue-app",
data: {
name: "herry",
age: 30
},
methods: {
logAge: function(){
this.age = this.$refs.age.value;
}
}
}）
计算属性Computed:
计算属性在小规模的运算中使用的机会不大，一般来说都是使用methods，很少使用computed。但是两种方式很大的一个不同就在于这个methods执行时，会将全部的方法全部执行一遍，然后再进行输出。但是computed执行时才会调用方法。
<div id="example">
<p>Original message: "{
{ message }}"</p>
<p>Computed reversed message: "{
{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('');
}
}
})
动态绑定CSS样式：
首先使用 v-bind: class=”方法” 引入class，然后通过改变class的状态进行设置下面的css样式
<h2>实力1</h2>
<div v-bind:class = "{changeColor:changeColor}" v-on:click = "changeColor = !changeColor">
<span>herry</span>
</div>
<h2>实力2</h2>
<button v-on:click="changeColor = !changeColor; changeLength = !changeLength">123</button>
<div v-bind:class="compert">
<span>herry</span>
</div>
var vm = new Vue({
el: '#example',
data: {
changeColor: false,
changeLength: false
},
computed: {
compert: function () {
return {
changeColor: this.changeColor,
changeLength: this.changeLength
}
}
}
})