vue.js基础笔记

html中解析普通变量使用两个大括号，若是需要插入html内容则使用三个大括号
数据绑定语法

var vm = new Vue({
    el:'.app'//id名或者class名
    data：{
        name:'hello vue',//实例化vue对象，里面的data属性的值是一个对象
        classobj:{
        'class-a': true,
            'class-b': false
        },
        styleobj:{
            color:'red';
            }
        }，
        lists:[
            {a:'111'},
            {a:'2222'}

        ]
})

<div class="app">//v-if条件需在绑定的class属性里面才能进行判断
<div>{{name}}</div>
<div>{{name + 12345}}</div>//vue拼接
<div>{{name ?'yes':no}}</div>//三元运算判断name是否定义
<div>{{name | capitalize }}</div>//使用过滤器对参数进行过滤，比如转换时间戳转换字母大小写
<p v-if="name">{{name}}</p>//根据name属性是否存在判断是否显示p标签
<a v-bind:href="url">vue链接</a>//等同 href="{{url}}"
<a v-on:click="doSomething"> //坚挺dom事件
</div>

class与style绑定

<p class="test" v-bind:class="{'class-a':name,'class-b':statu}"></p>//根据name和status属性是否存在进行添加class属性
<p class="test" v-bind:class="classobj"></p>根据data里面的classobj对象添加class属性，这个对象需要data属性值得同一级
绑定style属性
<p class="test" v-bind:class="[name,test]"></p>//使用数组模式添加class属性，这里的值是在VUe对象中的data内的属性名
<p class="test" v-bind:class="styleobj"></p>//使用obj对象更改style样式
<p class="test" v-bind:class="styleobj"></p>//使用数组形式添加样式

v-if、v-else

<p v-if="name">yes</p>//判断name是否存在，存在就显示此处的p标签
<p v-else>no</p>/变量值为false时走此条,需要添加v-else的时候，需要立即追加在v-if后面

列表渲染

<ul><li v-for="list in list">{{$index}}{{list.a}}</li></ul>//$index位索引从0开始