# 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一定可以获取到**
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
暂无评论内容