Vue基础语法

作者 新城 日期 2017-09-29
Vue
Vue基础语法
纯Vue基础语法
1
<script src='http://apps.bdimg.com/libs/vue/1.0.14/vue.js'></script>

基本数据展示

1
2
3
4
5
6
7
8
9
10
<div id='app-1'>
    <p>{{message}}</p>
</div>
----js-----
    new Vue({
        el:'#app-1',
        data:{
            message:'这里是数据'
        }
    })

v-bind

1
2
3
4
5
6
7
8
9
10
<div id='app-2'>
    <p v-bind:title='message' >这里是数据</p>
</div>
----js------
    var app2 = new Vue({
        el:'#app-2',
        data:{
            message:'鼠标移动上之后展示的数据'
        }
    })

打开浏览器控制台 输入
app2.message = ‘信息’
鼠标再次移动之后数据已经发生渲染

条件与渲染

1
2
3
4
5
6
7
8
9
10
<div id='app-3'>
    <p v-if='seen' >这里是数据</p>
</div>
------js-----
    var app3 = new Vue({
        el:'#app-3',
        data:{
            seen:true
        }
    })

控制台出输入
app-3.seen = false 消失

循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id='app-4'>
    <ul>
        <li v-for='todo in todos'>
            {{todo.text}}
        </li>
    </ul>
</div>
------js-------
var app4 =  new Vue({
    el:'app-4',
    data:{                  //对象
        todos:[                 //数组
            {text:'123'},          //JSON对象
            {text:'123'},
            {text:'123'}
        ]
    }
})
`

控制台输入 app4.todos.push({ text: ‘新项目’ })

用户输入

绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id='app5'>
    <p>{{message}}</p>
    <button type='button' v-on:click='revsen'></button>
</div>
-----js----
    var app5 = new Vue({
        el:'#app5',
        data:{
            message:'用户信息'
        }，
        methods:{
            reser:function(){
                this.message = this.message.aplit('').reverse().json();
            }
        }
    })

数据绑定

1
2
3
4
5
6
7
8
9
10
11
<div id='app6'>
    <p>{{message}}</p>
    <input v-model='message'/>
</div>
----js---
var app6 = new Vue({
    el:'#app6',
    data:{
        message:'双向数据绑定'
    }
})

组件化应用构建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id='app7'>
    <ul>
        <list-item v-for='item in deitlist'  v-bind:tod='item' v-bind:key="item.id"></list-item>
    </ul>
</div>
-----js-----
Vue.component('list-item',{
    prop:['tod'],
    template: '<li>{{ tod.text }}</li>'
})

var app7 = new Vue({
    el:'#app7',
    data:{
        deitlist:[
            {id:1,key:'qwef'},
            {id:2,key:'qwed'},
            {id:3,key:'qwes'},
            {id:4,key:'qwea'}
        ]
    }
})