Web开发网站-06
目录
1 Vue介绍
什么是Vue？
- Vue是一套前端框架，免除原生JavaScript的DOM操作，简化书写。
- 基于MVVM(Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
- 官网：https：//v2.cn.vuejs.org/
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷，更加高效。
2 Vue快速入门
- 新建html页面，引入Vue.js文件
<script src ="js/vue.js"></script>
- 在JS代码区域，创建Vue核心对象，定义数据模型
<script>
new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
}）
</script>
- 编写视图
<div id ="app">
<input type = "text" v-model="message">
{{ message }}
</div>
插值表达式
- 形式：{{表达式}}。
- 内容可以是：
- 变量
- 三元运算符
- 函数调用
- 算术运算
示例代码
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app",//Vue接管的区域
data:{
message:"Hello Vue"
}
})
</script>3 Vue的常用指令
- 指令：html标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如：v-if,v-for...
- 常用指令
| 指令 | 作用 |
| v-bind | 为html标签绑定属性值，如设置href，css样式 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为html标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else-if | |
| v-else | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
-
v-bind
<a v-bind:href="url">百度一下</a>
简化写法
<a:href ="url">百度一下</a>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
})
</script>
-
v-model
<input type ="text" v-mode ="url">
注意事项：
- 通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app",//Vue接管的区域
data:{
url:"https://www.baidu.com"
}
})
</script>-
v-on
写法一：
<input type ="button" value ="按钮" v-on:click="handle()">
写法二：
<input type ="button" value ="按钮" @click="handle()">
<script>
new Vue{
el:"#app",
data:{
//...
},
methods:{
handle:function(){
alert('我被点击了‘）;
}
},
})
</script>
示例代码
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app",//Vue接管的区域
data:{
},
methods: {
handle:function(){
alert("你点我了一下...")
}
},
})
</script>-
v-if
年龄{{age}},经判定为：
<span v-if ="age<=35">年轻人</span>
<span v-else-if="age >35&& age<60">中年人</span>
<span v-else>老年人</span>
-
v-show
年龄{{age}},经判定：
<span v-show="age<=35">年轻人</span>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
年龄<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>
年龄<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>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app",//Vue接管的区域
data:{
age:20
},
methods: {
}
})
</script>-
v-for
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index +1}}:{{addr}}</div>
data:{
...
addrs:['北京','上海','广州','深圳','成都','杭州']
},
示例代码
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="addr in addrs" >{{addr}}</div>
<div v-for="(addr, index) in addrs" >{{index+1}}:{{addr}}</div>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app",//Vue接管的区域
data:{
addrs:['北京','上海','广州','深圳','成都','杭州']
},
methods: {
}
})
</script>4 案例
通过Vue完成表格数据的渲染展示
<script src="js/vue.js"></script>
</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>
<tr align="center" v-for=" (user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-if="user.gender==1">男</span>
<span v-if="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score>=90">优秀</span>
<span v-else-if="user.score>=60">及格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
users:[{
name:"Tom",
age:20,
gender:1,
score:78
},{
name:"Rose",
age:18,
gender:2,
score:86
},{
name:"Jerry",
age:26,
gender:1 ,
score:90
},{
name:"Tony",
age:30,
gender:1 ,
score:55
}
]
}
})
</script>5 Vue生命周期
- 生命周期：指一个对象从创建到销毁的整个过程
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
- mounted:挂载完成，Vue初始化成功，html页面渲染成功。（发送请求到服务端，加载数据）
| 状态 | 阶段周期 |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| Mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
<script>
new Vue({
el:"#app",
data:{
},
mounted(){
console.log("Vue挂载完毕，发送请求获取数据");
}，
methods:{
},
})
</script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el:"#app",//vue接管区域
data:{
},
methods: {
},
mounted() {
alert("vue挂载完成,发送请求获取数据")
},
})
</script>