Vue
什么是vue?
Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据]
官网: Vue.js
Vue快速入门
1.引入Vue的JS文件
<script src="..\JS\vue.js"></script>
也可以在线引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
2.定义Vue对象
<script>
//2.定义Vue对象
new Vue({
el:"#app",//Vue接管的区域
data:{
message:"Hello Vue"
}
})
</script>
3. 编写视图层的展示代码
<!-- 3. 编写视图层的展示代码 -->
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
常用指令
指令:HTML 标签上带有 V- 前缀 的特殊属性,不同指令具有不同含义。例如: v-if,v-for..
v-bind
为HTML标签绑定属性值,如设置 href,css样式等
<a v-bind:href="url">链接1</a>
<!-- 可简写: -->
<a :href="url">链接2</a>
v-model
在表单元素上创建双向数据绑定
<input type="text" v-model="url">
注意事项
通过v-bind或者v-model绑定的变量,必须在数据模型中声明
v-on
为HTML标签绑定事件
<input type="button" value="按钮1" v-on:click="handle()">
<!-- 可简写: -->
<input type="button" value="按钮2" @click="handle()">
v-if、v-else-if、v-else
条件性的渲染某元素,判定为true时渲染,否则不渲染
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age<60">中年人</span>
<span v-else>老年人</span>
v-show
根据条件展示某元素,区别在于切换的是display属性的值
年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人</span>
<span v-show="age > 35 && age<60">中年人</span>
<span v-show="age>=60">老年人</span>
区别:
v-for
列表渲染,遍历容器的元素或者对象的属性
<div v-for="addr in address" >{{addr}}</div>
<hr>
索引从0开始
<div v-for="(addr,index) in address" >{{index}}:{{addr}}</div>
<hr>
索引从1开始
<div v-for="(addr,index) in address" >{{index+1}}:{{addr}}</div>
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<!-- v-bind:为HTML标签绑定属性值,如设置 href,css样式等 -->
<a v-bind:href="url">链接1</a>
<!-- 可简写: -->
<a :href="url">链接2</a>
<!-- v-model:在表单元素上创建双向数据绑定 -->
<input type="text" v-model="url">
<br>
<br>
<br>
<!-- v-on:为HTML标签绑定事件 -->
<input type="button" value="按钮1" v-on:click="handle()">
<!-- 可简写: -->
<input type="button" value="按钮2" @click="handle()">
<br>
<br>
<br>
<!-- v-if、v-else-if、v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染 -->
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age<60">中年人</span>
<span v-else>老年人</span>
<br>
<br>
<br>
<!-- v-show:根据条件展示某元素,区别在于切换的是display属性的值 -->
年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人</span>
<span v-show="age > 35 && age<60">中年人</span>
<span v-show="age>=60">老年人</span>
<br>
<br>
<br>
<!-- v-for:列表渲染,遍历容器的元素或者对象的属性 -->
<div v-for="addr in address" >{{addr}}</div>
<hr>
索引从0开始
<div v-for="(addr,index) in address" >{{index}}:{{addr}}</div>
<hr>
索引从1开始
<div v-for="(addr,index) in address" >{{index+1}}:{{addr}}</div>
</div>
</body>
<script>
new Vue({
el: "#app1",
data: {
url: "https://www.baidu.com",
age: 20,
address: ['长沙', '杭州', '深圳', '北京', '武汉', '上海']
},
methods: {
handle: function() {
alert("我被点击了");
}
}
})
</script>
</html>
Vue指令案例
通过Vue完成表格数据的渲染展示
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<!-- 编写表头代码 -->
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<!-- v-for="(user,index) in users" 循环获取users数据 -->
<tr align="center" v-for="(user,index) in users" >
<!-- 序号为索引0+1 -->
<td>{{index + 1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-show="user.gender==1">男</span>
<span v-show="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score>=85">优秀</span>
<span v-else-if="user.score >= 60">及格</span>
<span v-else style="color: red;">不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
users: [{
name:"Tom",
age:20,
gender:1,
score:78
},{
name:"Rose",
age:19,
gender:2,
score:60
},{
name:"Jack",
age:21,
gender:1,
score:100
},{
name:"Peter",
age:19,
gender:1,
score:51
},]
}
})
</script>
</html>
Vue生命周期
生命周期:指一个对象从创建到销毁的整个过程
生命周期的八个阶段: 每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
<script>
new Vue({
el:"#app",
data:{
},
methods:{
},
mounted(){
alert("vue挂载完成,发送请求到服务端")
}
})
</script>
mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。 (发送请求到服务端,加载数据)
小结
1.Vue是什么?
Vue是一个基于MVVM模型的前端js框架。
2.Vue常用指?
v-bind、v-model、v-on、v-if、v-show、v-for
3.Vue生命周期?
mounted