JavaWeb学习(十一)---VUE$Element
什么是VUE？
VUE快速入门
VUE的常用指令
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="aaa">
<div v-if="count==1">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else="count==3">div3</div>
<input v-model="count" />
<input type="button" value="点我" v-on:click="showmsg()"/>
</div>
<script>
new Vue({
el:"#aaa",
data(){
return{
count:"3",
}
},
methods:{
showmsg()
{
alert("显示了----")
}
}
})
</script>
</body>
</html>
<script src="js/vue.js"></script>
<div id="aaa">
<div v-if="count==1">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else="count==3">div3</div>
</div>
<script>
new Vue({
el:"#aaa",
data(){
return{
count:"3",
}
}
})
</script>
vue双向绑定：
当数据发生变化时，视图也发生变化，反之，当视图发生变化时，数据也跟着同步变化。
<body>
<script src="js/vue.js"></script>
<div id="aaa">
<div v-if="count==1">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else="count==3">div3</div>
<input v-model="count" />
</div>
<script>
new Vue({
el:"#aaa",
data(){
return{
count:"3",
}
}
})
</script>
效果：当输入2显示div2，当输入3显示div3，从而实现双向绑定
<div v-for="addr in addrs">{
{addr}}<br/>
</div>
<script>
new Vue({
el:"#aaa",
data(){
return{
count:"3",
addrs:["河南","河北","山东"]
}
}
})
</script>
VUE生命周期
注意：一般在mounted方法中写ajax异步请求
Element
网址：https://element.eleme.cn/#/zh-CN
快速入门：
布局：
Scope
element-ui将行对象封装到scope row表示当前行的数据
