vue练习

一、参数
v-bind:
v-on:

例子1：

<div v-bind:class="{'class1': use}">
        v-bind:clall zhiling
    </div>

vue:

 new Vue({
        el: '#app',
        data:{
            use: true
        }
    })

例子2：

{{5+5}}<br />
    {{ ok ? 'YES': 'NO' }}<br />
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>

例3：

<div id="app">
    <a v-on:click="say()">现在你看到我了</a>
</div>  

new Vue({
        el: '#app',
        data:{
            url: 'www.baidu.com'
        },
        methods: {
            say: function() {
                alert(22)
            }
        }
    })

例4: 修饰符

<div id="app">
    <p>价格: {{ price | currency}}</p>
</div>

new Vue({
        el: '#app',
        filters: {
            currency: function(value) {
                // return value + ''
                if(!value) return 0.00;
                return `￥${value.toFixed(2)}元`
            }
        },
        data:{
            price: 30
        },
        methods: {
            say: function() {
                alert(22)
            }
        }
    })

例5

<div id="app">
    <div v-if="type=='A'">
        A
    </div>
    <div v-else-if="type=='B'">
        B
    </div>
    <div v-else>
        NOT A/B
    </div>
</div>

new Vue({
        el: '#app',
        data:{
            type: 'D'
        }
    })

例6

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})

例7: watch 、handler、immediate的用法

<div id="app">
    <p>FullName: {{fullName}}</p><br />
    <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            firstName: '大伟',
            lastName: '刘',
            fullName: ''
        },
        watch:{
            firstName: {
                handler(newName, oldName){
                    this.fullName = newName + ' ' + this.lastName;
                },
                immediate: true
            }
        }
    })
    // vm.$watch('counter', function (newName, oldName){
    //     this.fullName = newName + '' + this.lastName
    // })
</script>

例8 组件

<div id="app">
    <runoob></runoob>
</div>
<script type="text/javascript">
    var child = {
        template: '<h1>自定义组件!</h1>'
    }


    var vm = new Vue({
        el: '#app',
        components: {
            'runoob': child
        }
    })
 
</script>

例9 子、父组件

<div id="app">
    <input v-model="parentMsg">
    <br />
    <child v-bind:message="parentMsg"></child>
</div>
<script type="text/javascript">

    Vue.component('child', {
        props: ['message'],
        template: '<span>{{message}}</span>'
    })

    var vm = new Vue({
        el: '#app',
        data: {
            parentMsg: '父组件内容'
        }
    })
</script>

例10: vm第二种取值方式

其实数据是存放在_data里的，为什么能直接在html用变量名呢，是因为应用了数据代理: