# VUE2
**渐进式JavaScript框架**
通过AJAX请求将从Web服务器获取的数据显示到界面上
## 搭建开发环境
1）下载Vue.js库
https://cn.vuejs.org/
2)用引入Vue.js库
``
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绑定
“`html
插值语法
你好，{{name}}
指令语法
点我去{{school.name}}学习1
点我去{{school.name}}学习2
“`
new Vue({
el:’#root’,
data:{
name:’3DG’,
school:{
name:’3DG’,
url:”https://www.cnblogs.com/3-DG/”
}
}
})
## Vue数据绑定
### 单向绑定
单向绑定(v-bind)指数据只能从data流向页面
“`html
单向绑定
“`
“`html
var Vue=new Vue({
el:’#root’,
data:{
name:’3DG’
}
})
“`
### 双向绑定
双向绑定(v-model)是指数据不仅能从data流向页面，还可以从页面流向data
“`html
双向绑定
“`
“`html
var Vue=new Vue({
el:’#root’,
data:{
name:’3DG’
}
})
“`
## MVVM模型
Model View ViewModel
M:模型(Model)对应data中的数据
V:试图(View)模板
VM:视图模型(ViewModel)Vue实例对象
## Vue事件处理
### 绑定事件
使用v-on:xxx或@xxx(xxx是事件名)
“`html
欢迎来到{{name}}
“`
Vue绑定事件处理
* 事件的回调函数需要配置在methods对象中
“`html
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(“同学你好”)
}
}
})
“`
#### 事件修饰符
“`html
<!–Vue中的事件修饰符
1.prevent:阻止默认事件(常用)
2.stop:阻止事件冒泡(常用)
3.once:事件只触发一次(常用)
4.capture:使用事件的捕获模式
5.self:只有event,target是当前操作的元素是才触发事件
6.passive:时间的默认行为立即执行，无需等待事件回调执行完毕–>
点我提示信息
点我提示信息
- 1
- 2
- 3
- 4
new Vue({
el:’#root’,
data:{
},
methods:{
showInfo(){
alert(“同学你好”)
},
showMsg(msg){
console.log(“同学你好”);
},
demo(){
for (let i = 0;i<100000;i++){
console.log(“#”)
}
console.log(“累坏了”)
}
}
})
“`
#### 键盘事件
“`html
<!–Vue中常用的按键别名：
回车 =>enter
删除 =>delete
退出 =>esc
空格 =>space
换行 =>tab
上 =>up
下 =>down
左 =>left
右 =>right–>
new Vue({
el:’#root’,
data:{
},
methods:{
showInfo(event){
console.log(event.target.value)
//调用按钮点击事件
this.click();
},
click(){
alert(‘点击按钮’)
}
}
})
“`
### Vue计算属性
通过data中已有的数据计算得来的新数据称为计算属性
* 插值语法实现
“`html
body>
名:
全名:{{firstname}}-{{lastname}}
new Vue({
el:’#root’,
data:{
firstname:”张”,
lastname:”三”
}
})
“`
* 计算属性实现
“`html
名:
全名:{{firstname}}-{{lastname}}
new Vue({
el:’#root’,
data:{
firstname:”张”,
lastname:”三”
},
methods:{
},
computed:{ //计算属性
//定义计算属性函数(返回值为新的属性)
fullName(){
console.log(“函数被调用了”);
return this.firstname + “-” + this.lastname
}
}
})
“`
### Vue条件渲染指令
* v-if指令
v-if=”表达式”
**注意：以下为连续固定，不可更改**
“`html
1.v-if
写法1:v-if=”表达式”
写法2:v-else-if=”表达式”
写法3:v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
“`html
欢迎来到{{name}}
“`
* v-show指令
v-show=”表达式”
“`html
欢迎来到{{name}}
“`
2. v-show
写法: v-show=”表达式”
适用于:切换频率较高的场景
特点：不展示的Dom元素不会被移除，仅仅是隐藏
**注意事项:使用v-if的时候，元素可能无法获取到，而v-show一定可以获取到**