vue学习笔记-2

1.模板语法

文本插值

<template><p>{{ msg }}</p><br/>
<p>{{ num+1 }}</p><br/>
<p>{{ ok?"yes":"no" }}</p>
</template>
<script>
export default{data(){return{msg:"模板语法",num:1,ok:false}}
}</script>

2.属性绑定

通过v-bind指令可以给元素绑定属性，且设置属性时不能使用文本插值，v-bind可以简写只写后边的冒号省略v-bind

<template><p v-bind:class="testclass">{{ msg }}</p><br/>
<button :disabled="isbuttondisabled">按钮</button>
</template>
<script>
export default{data(){return{msg:"测试",testclass:"test",isbuttondisabled:false}}
}</script>
<style scoped>
.test{color:red;fontsize:30px;
}</style>

3.条件渲染

v-if:条件表达式为真时才能被渲染；v-elseif可以多次使用；v-else所有条件不满足时才被渲染
v-show:仅仅是改变了元素的display属性

<template>
<p>条件渲染</p>
<p v-if="type=='A'">A</p>
<p v-else-if="type=='B'">B</p>
<p v-else-if="type=='C'">C</p>
<p v-else>不是A/B/C</p>
<p v-show="flag">show文本</p>
</template>
<script>
export default{data(){return{type:'E',flag:false}}
}</script>

4.列表渲染

v-for指令可以用来渲染一个列表，要使用特殊语法：item in items,items是源数据的数组，item是迭代项的别名.
v-for也支持使用可选的第二个参数表示当前项的位置索引。另外，in也可以换成of，即item of items
v-for还可以用来遍历一个对象的所有属性

<template>
<div>列表渲染</div>
<div v-for="(item,index) in names">{{ item }}-{{ index }}</div>
<div v-for="item in students">{{ item.name }}:{{ item.age }}</div>
<div v-for="(item,index) of names">{{ item }}-{{ index }}</div>
<div><p v-for="(value,key,index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
</div>
</template>
<script>
export default{data(){return{names:["amy","tom","mandy"],students:[{"name":"zhangsan","age":18},{"name":"lisu","age":20},{"name":"wangwu","age":21}],userInfo:{"name":"Monica","sex":"female","age":23}}}
}</script>

5.通过key管理状态

在列表循环时需要为循环的对象添加key属性减少性能消耗。且key的要求是唯一不变，数值或字符串类型。