- A+
# VUE2
**渐进式JavaScript框架**
通过AJAX请求将从Web服务器获取的数据显示到界面上
## 搭建开发环境
1）下载Vue.js库
https://cn.vuejs.org/
2)用<script>引入Vue.js库
`<!--引入Vue-->`
<script type="text/javascript" src="../js/vue.js">
</script>
1.想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象
2.root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法
3.root 容器里的代码被称为 Vue 模板
4.root 容器和 vue 实例是一一对应
5.页面中有且只有一个 Vue 实例
6.(xxx} 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性
7.一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新
## Vue插值和指令
**Vue插值是用于解析标签体内容**
* 语法
{{xxx}}
xxx是js表达式，且可以直接读取到data中的所有属性
**Vue指令是用于解析标签（标签属性，标签体内容，绑定事件等）**
* 语法
V-xxx:标签="xxx"
xxx是js表达式，且可以直接读取到data中的所有属性
* 简化指令语法
a后跟: 说明已被Vue绑定
<body>
```html
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="school.url" x="hello">点我去{{school.name}}学习1</a>
<!--简化指令语法-->
<!--a后跟 : 说明已被Vue绑定-->
<a :href="school.url">点我去{{school.name}}学习2</a>
</div>
```
<script>
new Vue({
el:'#root',
data:{
name:'3DG',
school:{
name:'3DG',
url:"https://www.cnblogs.com/3-DG/"
}
}
})
</script>
</body>
## Vue数据绑定
### 单向绑定
单向绑定(v-bind)指数据只能从data流向页面
```html
<div id="root">
<!--单向绑定-->
<h1>单向绑定</h1>
<input type="text" v-bind:value="name"><br/>
<!--简写-->
<input type="text" :value="name"/><br/>
```
```html
<script>
var Vue=new Vue({
el:'#root',
data:{
name:'3DG'
}
})
</script>
```
### 双向绑定
双向绑定(v-model)是指数据不仅能从data流向页面，还可以从页面流向data
```html
<!--双向绑定-->
<h1>双向绑定</h1>
<input type="text" v-model:value="name"><br/>
<!--Vue双向绑定一般无简写，但此处特例(不建议使用)-->
<input type="text" v-model="name"><br/>
```
```html
<script>
var Vue=new Vue({
el:'#root',
data:{
name:'3DG'
}
})
</script>
```
## MVVM模型
Model View ViewModel
M:模型(Model)对应data中的数据
V:试图(View)模板
VM:视图模型(ViewModel)Vue实例对象
## Vue事件处理
### 绑定事件
使用v-on:xxx或@xxx(xxx是事件名)
```html
<div id="root">
<h1>欢迎来到{{name}}</h1>
<!--无参数事件绑定-->
<button v-on:click="showInfoHandler">点我提示信息1</button>
<!--简写-->
<button @click="showInfoHandler">点我提示信息1</button>
<!--有参数事件绑定-->
<button @click="showInfoHandler2($event,66)">点我提示信息2</button>
<button @click="showInfoHandler3(66)">点我提示信息3</button>
</div>
```
Vue绑定事件处理
* 事件的回调函数需要配置在methods对象中
```html
<script>
new Vue({
el:'#root',
data:{
name:'3DG'
},
methods:{//定义Vue的所有函数
showInfoHandler(event){ //事件绑定处理函数(event参数是默认的)
console.log(event.target.innerText)
console.log(this.name) //this表示当前vue对象
alert('同学你好')
},
showInfoHandler2(event,number){
console.log(event,number)
alert("同学你好")
},
showInfoHandler3(number){
console.log(number)
alert("同学你好")
}
}
})
</script>
```
#### 事件修饰符
```html
<!--Vue中的事件修饰符
1.prevent:阻止默认事件(常用)
2.stop:阻止事件冒泡(常用)
3.once:事件只触发一次(常用)
4.capture:使用事件的捕获模式
5.self:只有event,target是当前操作的元素是才触发事件
6.passive:时间的默认行为立即执行，无需等待事件回调执行完毕-->
<div id="root">
<!--prevent组织默认事件-->
<a href="https://www.cnblogs.com/3-DG/"@click.prevent="showInfo">点我提示信息</a>
<!--stop:阻止事件冒泡-->
<div class="demo1"@click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!--事件修饰符可以连续使用-->
<a href="https://www.cnblogs.com/3-DG/"@click.prevent.stop="showInfo">点我提示信息</a>
</div>
<!--once:事件只触发一次-->
<button @click.once="showInfo">点我提示信息</button>
<!--capture:使用事件的捕获模式-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!--self:只有event,target是当前操作的元素是才触发事件-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!--6.passive:时间的默认行为立即执行，无需等待事件回调执行完毕-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
},
methods:{
showInfo(){
alert("同学你好")
},
showMsg(msg){
console.log("同学你好");
},
demo(){
for (let i = 0;i<100000;i++){
console.log("#")
}
console.log("累坏了")
}
}
})
</script>
```
#### 键盘事件
```html
<!--Vue中常用的按键别名：
回车 =>enter
删除 =>delete
退出 =>esc
空格 =>space
换行 =>tab
上 =>up
下 =>down
左 =>left
右 =>right-->
<div id="root">
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"><br/>
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"><br/>
<button @click="click">点击</button>
</div>
<script>
new Vue({
el:'#root',
data:{
},
methods:{
showInfo(event){
console.log(event.target.value)
//调用按钮点击事件
this.click();
},
click(){
alert('点击按钮')
}
}
})
</script>
```
### Vue计算属性
通过data中已有的数据计算得来的新数据称为计算属性
* 插值语法实现
```html
body>
<div id="root">
姓:<input type="text" v-model="firstname"><br/>
名:<input type="text" v-model="lastname"><br/>
全名:<span>{{firstname}}-{{lastname}}</span>
</div>
<script>
new Vue({
el:'#root',
data:{
firstname:"张",
lastname:"三"
}
})
</script>
</body>
```
* 计算属性实现
```html
<body>
<div id="root">
姓:<input type="text" v-model="firstname"><br/>
名:<input type="text" v-model="lastname"><br/>
全名:<span>{{firstname}}-{{lastname}}</span>
</div>
<script>
new Vue({
el:'#root',
data:{
firstname:"张",
lastname:"三"
},
methods:{
},
computed:{ //计算属性
//定义计算属性函数(返回值为新的属性)
fullName(){
console.log("函数被调用了");
return this.firstname + "-" + this.lastname
}
}
})
</script>
</body>
```
### Vue条件渲染指令
* v-if指令
v-if="表达式"
**注意：以下为连续固定，不可更改**
```html
<div v-if=""></div>
<div v-else-if=""></div>
<div v-else></div>
```
1.v-if
写法1:v-if="表达式"
写法2:v-else-if="表达式"
写法3:v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
```html
<h2 v-if="n%2===0&&n!==0">欢迎来到{{name}}</h2>
<!--注意:以下三行必须固定连续使用-->
<div v-if="n===1">SpringMvc</div>
<div v-else-if="n===3">Spring</div>
<div v-else>MyBatis</div>
```
* v-show指令
v-show="表达式"
```html
<h2 v-show="n%2===0&&n!==0">欢迎来到{{name}}</h2>
```
2. v-show
写法: v-show="表达式"
适用于:切换频率较高的场景
特点：不展示的Dom元素不会被移除，仅仅是隐藏
**注意事项:使用v-if的时候，元素可能无法获取到，而v-show一定可以获取到**
