Vue简单入门
Vue入门
- el:
类型：string|HTMLElement
作用：决定之后Vue实例会管理哪一个DOM - data:
类型：Object|Function
作用：Vue实力对应的数据对象 - methods:
类型：{[key:string]:function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
vue初体验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello world',
}
})
</script>
</body>
</html>
vue列表的展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦']
}
})
</script>
</body>
</html>
计数器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2>当前点击次数：{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button> -->
<!-- <button v-on:click="counter--">-</button> -->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
<!-- 语法糖写法 -->
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
add:function(){
console.log("add被执行")
this.counter++
},
sub:function(){
console.log("sub被执行")
this.counter--
}
}
})
</script>
</body>
</html>
v-once,v-text,v-html的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div>{{message}} 前端修改会变化(app.message='修改')</div>
<div v-once>{{message}} 前端修改不会变化(app.message='修改')</div>
<div v-text="text"></div>
<div v-html="url"></div>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好',
url:'百度一下',
text:'测试'
},
});
</script>
</body>
</html>
动态属性绑定
- v-bind的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
绑定输入框
<input type="" name="" id="" v-bind:value="message" />
<br>
绑定URL
<a v-bind:href="url">百度</a>
<br>
---------------------简写去掉v-bind
<br>
绑定输入框
<input type="" name="" id="" :value="message" />
<br>
绑定URL
<a :href="url">百度</a>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'登录',
url:'https://www.baidu.com',
}
}
});
</script>
</body>
</html>
- v-bind的动态绑定class(对象语法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.Active{
color: red;
}
</style>
<body>
<div id="app">
<h2 class="titile" v-bind:class="{Active:isActive,Line:isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'登录',
url:'https://www.baidu.com',
isActive:true,
isLine:true
},
methods:{
btnClick: function(){
this.isActive = !this.isActive;
}
}
});
</script>
</body>
</html>
- v-bind的动态绑定class(数组语法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 class="titile" :class="[active,line]">{{message}}</h2>
<h2 class="titile" :class="getClasses()">{{message}}</h2>
<button>按钮</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello world',
active:'11',
line:'22'
},
methods:{
getClasses:function(){
return [this.active,this.line];
}
}
});
</script>
</body>
</html>
小作业：点击列表中的某一项，颜色变红，其他的去掉红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.Active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-bind:class="{Active:index==mark}" v-for="(item,index) in movies" @click="changeColor(index)">{{index}}-{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦'],
mark:-1,
},
methods:{
changeColor:function(index){
console.log(index)
this.mark=index
console.log()
}
}
})
</script>
</body>
</html>
v-bind动态绑定style(对象语法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.Active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-bind:style="{fontSize:fsize+'px'}" v-bind:class="{Active:index==mark}" v-for="(item,index) in movies">{{index}}-{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦'],
mark:-1,
fsize:30
},
})
</script>
</body>
</html>
v-bind动态绑定style(数组语法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.Active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-bind:style="[basestyle]" v-bind:class="{Active:index==mark}" v-for="(item,index) in movies" @click="changeColor(index)">{{index}}-{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦'],
mark:-1,
basestyle:{color:'blue',fontSize:'40px'}
},
methods:{
changeColor:function(index){
this.mark=index
}
}
})
</script>
</body>
</html>
计算属性的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.Active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<h2>{{fullname}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name1:'王',
name2:'隔壁的'
},
//计算属性
computed:{
fullname:function(){
return this.name1+this.name2;
}
}
})
</script>
</body>
</html>
计算属性setter和getter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.Active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<h2>{{fullname}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name1:'王',
name2:'隔壁的'
},
//计算属性
computed:{
fullname:{
get:function(){
return this.name1+this.name2;
},
set:function(newValue){
const name = newValue.split(' ')
this.name1 = name[0]
this.name2 = name[1]
},
},
}
})
</script>
</body>
</html>
控制台调用方式
get方法：app.fullname
set方法：app.fullname = 'lao wang'
计算属性和methods对比