1、选项数据
data、computed、method如何使用
data:一个函数,定义了很多变量(数据),这些变量服务于整个组件,如定义msg:'helloworld’和a:1;
computed :一个对象,包含各种函数(用来操作变量)
methods:一个对象,包含各种函数(与事件相关)
<template>
<div>
<div>选项数据</div>
<div>data:{{msg}}</div>
<div>computed:{{aDouble}}</div>
<div @click="say('hi')">点击我</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'helloworld',
a:1
}
},
computed:{
aDouble(){
return this.a*2;
}
},
methods:{
say(h){
alert(h);
}
},
}
</script>
2.模板语法
一个vue文件包括如下内容
- data
- 模板可以直接嵌入js代码
- 指令 v-html、v-on、v-bind
- 计算属性
- 过滤器
<template>
<div>
<div>模板语法</div>
<div>data:{{msg}}</div>
<div>{{number+1}}</div>
<div v-html="rawHtml"></div>
<div v-bind:class="color">zzzz</div>
<div v-on:click="say('hi')">点击我</div>
<div @click="change">修改颜色</div>
<div>{{message|capitalize}}</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'helloworld',
number:1,
rawHtml:'<span>123</span>',
color:'red active',
message:'message'
}
},
methonds:{
change(){
this.color='yellow';
},
say(h){
alert(h);
}
}
}
</script>
3.条件渲染
v-if指令,用法:
vi-if 、v-else
vi-if、 v-else-if 、v-else
<template>
<div>
<div>条件渲染</div>
<div>--------------</div>
<div v-if="type==='A'">A</div>
<div v-else-if="type==='B'">B</div>
<div v-else-if="type==='C'">C</div>
<div v-else>Not A/B/C</div>
<div v-show="isShow">123</div>
</div>
</template>
<script>
export default{
data(){
return{
type:'A',
isShow:true
}
}
}
</script>
4.列表渲染
v-for指令,用法
- 用法1:v-for=“item in items”数组
- 用法2:v-for="(item,index) in items "数组
- 用法3:v-for="(value,key) in object"对象
Notes:items 是源数据数组并且 item 是数组元素迭代的别名
<template>
<div>
<div>列表渲染</div>
<ul id="example-1">
<li v-for="item in items">{{item.message}}</li>
</ul>
<ul id="example-2">
<li v-for="(item,index) in arr">
{{index}}---{{item}}
</li>
</ul>
<ul id="example-3">
<li v-for="(value,key) in obj">{{key}}:{{value}}</li>
</ul>
</div>
</template>
<script>
export default{
data (){
return{
items:[
{message:'Foo'},
{message:'Bar'},
{message:'duck'}
],
arr:['foo','bar','duck'],
obj:{
firstName:'X',
lastName:'page',
age:30,
ae:18,
}
}
}
}
</script>
5.事件处理器
- v-on指令
- 缩写@
- 原始写法 v-on:click 缩写@click
<template>
<div>
<div>事件处理器</div>
<div id="example-1">
<button v-on:click="counter=counter+1;counter=counter-2">减少1</button>
<p>这个按钮被点击了{{counter}}次</p>
</div>
<div id="example-2">
<button @click="greet">增加1</button>
</div>
<div>--------------</div>
<div id="example-3">
<button @click="say('hi')">say</button>
</div>
<div id="example-4" @click="doThis2">
<button @click="doThis">dothis</button>
</div>
</div>
</template>
<script>
export default{
data(){
return{
counter:0
}
},
methods:{
greet(){
this.counter=this.counter+1
},
say(h){
alert(h)
},
doThis(){
alert('doThis')
},
doThis2(){
alert('doThis2')
}
}
}
</script>
<style>
</style>
6.表单控件绑定
- v-model指令在表单控件元素上创建双向数据绑定
- 复选框
- 多个勾选框
- 选择列表
<template>
<div>
<div>表单控件绑定</div>
<div>------------</div>
<input v-model="message">
<p>Message is :{{message}}</p>
<div>-----------------------</div>
<input type="checkbox" value="Jack" v-model="checkdNames" />
<label for="jack">jack</label>
<input type="checkbox" value="Andy" v-model="checkdNames" />
<label for="jack">Andy</label>
<input type="checkbox" value="Boys" v-model="checkdNames" />
<label for="jack">Boys</label>
<br>
<span>Checked names:{{checkdNames}}</span>
<div>-----------------------</div>
<div>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected:{{selected}}</span>
</div>
</div>
</template>
<script>
export default{
data(){
return{
message:'helloworld',
checkdNames:[],
selected:''
}
},
mounted() {
alert(this.$route.params.userId)
}
}
</script>
<style>
</style>