1. 前端框架
免除JS中的DOM操作，简化书写
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，编程重点放在数据上
<head>
<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">
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
年龄<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>
<!-- show都会展示在控制台，vif只展示渲染的 -->
<span v-show="age<=35">年轻人</span>
<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
<!-- 表格案例 -->
<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-show="user.gender==1">男</span>
<span v-show="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>
//定义vue对象
new Vue({
el:"#app", //vue接管区域
data:{
//bind或者model必须在数据模型中声明
url:"https://www.bilibili.com"，
age:20，
addrs:['北京','上海','南昌','杭州']，
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:52
},
]
},
methods: {
handle:function(){
alert('点击了')
}
},
mounted() {
alert("vue挂载完成,发送请求到服务端")
}
})
</script>
| 指令 | 作用 |
|---|---|
| v-bind | 标签绑定属性值，如href，css样式 |
| v-model | 表单元素创建双向数据绑定 |
| v-on | 标签绑定事件 |
| v-if | |
| v-else-if | true时渲染 |
| v-else | |
| v-show | 根据条件展示某元素，切换display属性值 |
| v-for | 列表渲染，遍历容器元素 |
生命周期：一个对象从创建到销毁的整个过程
八个：beforecreate，created，beforeMount，Mounted，beforeUpdate，updated，beforeDestory，Destroyed
