传参
<p v-text="msg"></p>
<p v-html="msg"></p>
<button @click="test()">test1
</button> //无参
<button @click="test2('abc')">test2
</button> // 传abc
<button @click="test2(msg)">test3
</button> //传vue里面的变量
new Vue({
el
: '#app',
data
: {
msg
: '<a href="http:/www.atguigu.com">I Will Back</a>',
imgUrl
: 'https://raw.githubusercontent.com/ganmyxh/ganmyxh.io/master/img/bootstrap_01.png',
},
methods
: {
test(){
alert('hehe')
},
test2(content
){
alert(content
)
}
}
})
计算属性
<div id="app">
<div id="demo">
姓:
<input type="text" placeholder="First Name" v-model="firstName"> <br>
名:
<input type="text" placeholder="Last Name" v-model="LastName"> <br>
姓名1(单向):
<input type="text" placeholder="Full Name1" v-model="fullName"> <br>
姓名3(双向):
<input type="text" placeholder="Full Name3" v-model="fullName3"> <br>
</div>
</div>
var vm
= new Vue({
el
: '#app',
data
: {
firstName
: 'A',
LastName
: 'B',
},
computed
: {
fullName(){
console
.log('computed()')
return this.firstName
+ " " + this.LastName
},
fullName3
: {
get(){
return this.firstName
+ " " + this.LastName
},
set(value
){
const names
= value
.split(' ');
this.firstName
= names
[0];
this.LastName
= names
[1];
}
}
},
})
什么时候调用， 1、初始化 2、相关data值发送改变 这里fullName是调用的计算属性的值，计算属性也是一个属性，当这个属性发生变化的时候就会重置
监视属性
上面的例子也可以用监视属性代替，但是会复杂一点
var vm
= new Vue({
el
: '#app',
data
: {
firstName
: 'A',
LastName
: 'B',
fullName
: 'A B',
},
watch
: {
firstName
: function(value
){
console
.log('watch()')
this.fullName2
= value
+ " " + this.LastName
}
},
})
vm
.$watch('LastName', function (value
) {
this.fullName2
= this.firstName
+ " " + value
})
样式绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
<style>
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass{
font-size: 30px;
}
</style>
</head>
<body>
<div id="demo">
<p class="cClass" :class="a">XXX是字符串
</p>
<p :class="{aClass: isA, bClass: isB}">XXX是对象
</p>
<p :style="{color: activeColor, fontSize: fontSize + 'px'}">style样式
</p>
<button @click="update">更新
</button>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'red',
fontSize: 20,
},
methods: {
update() {
this.a = 'bClass';
this.isA = false;
this.isB = true;
this.activeColor = 'green';
this.fontSize = 30;
}
}
})
</script>
</html>
控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
</head>
<body>
<div id="demo">
<p v-if="ok">成功了
</p> //if是真的没有
<p v-else>失败了
</p>
<p v-show="ok">表白成功
</p> //show只是控制样式不显示而已
<p v-show="!ok">表白失败
</p>
<button @click="ok=!ok">切换
</button>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
ok: true,
},
})
</script>
</html>
迭代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
</head>
<body>
<div id="demo">
<h2>遍历数组
</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
--
<button @click="deleteP(index)">删除
</button>
--
<button @click="updateP(index, {name: 'cat', age: 20})">更新
</button>
</li>
</ul>
<h2>遍历对象
</h2>
<ul>
<li v-for="(value, key) in persons[1]" :key="key">
{{value}}---{{key}}
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [
{name: 'Tom', age: 18},
{name: 'Jack', age: 16},
{name: 'Bob', age: 19},
{name: 'Rose', age: 17},
]
},
methods: {
deleteP(index){
this.persons.splice(index, 1);
},
updateP(index, newP){
this.persons.splice(index, 1, newP);
}
}
})
</script>
</html>
排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">
<input type="text" v-model="seachName">
<ul>
<li v-for="(p, index) in filterPersons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
seachName: '',
orderType: 0, //0不排序 1年龄升序 2代表年龄降序
persons: [
{name: 'Tom', age: 18},
{name: 'Jack', age: 16},
{name: 'Bob', age: 19},
{name: 'Rose', age: 17},
]
},
computed: {
filterPersons(){
const orderType = this.orderType;
//最终需要返回的数组
let fPersons;
//对persons过滤
fPersons = this.persons.filter(p => p.name.indexOf(this.seachName) !== -1)
//排序
if(this.orderType != 0){
fPersons.sort(function (p1, p2) {
if(orderType == 1){
return p1.age - p2.age;
}else{
return p2.age - p1.age;
}
})
}
return fPersons
}
},
methods: {
setOrderType(orderType){
this.orderType = orderType;
}
}
})
</script>
</html>
prop可以设置不是必须
@
Prop({ required
: false })
titleSelector
?: (point
: GeoPoint
) => string
