Vue基础功能

<div id="myApp">
    <input v-model="name">//为页面输入框进行双向数据绑定。
    <button v-on:click="btnClick('JiaZ')">JiaZ</button>//事件绑定
    <p>{{name}}</p>
    <p>{{name | touper}}</p>//将参数name传给过滤器filters中的toupper方法。
    
    <ol>
        //组件：遍历data中的games，将得到的item绑定给参数game。
        <game-item v-for="item in games" v-bind:game="item">
    </ol>
    
    <p>税后：{{price}}，税前：{{computPrice}}</p>//计算属性
    <button @click="addClick(5000)">price加价5000元</button>
    <p>税后：{{price}}，税前：{{watchPrice}}</p>//观察属性
    
    //當isActive為true時，為div綁定一個class属性active.
    <div v-bind:class="{active:isActive}">紅色文本1</div>
    //為div綁定一個class对象，该class对象包含多个样式属性。
    <div v-bind:class="myClass">紅色文本</div>
    <button @click="changeClass()">改变class属性</button>
    
    <h1 v-if="score==0">成績未公佈</h1>
    <h1 v-else-if="score < 60">{{result}}分，未及格</h1>
    <h1 v-else>{{score}}分，及格</h1>
    <button @click="scoreClick()">考試成績</button>
    
    <h1 v-show="isShow">連翹&半夏</h1>
    
    <ul>//循环数组和对象
        <li v-for="(game,index) in games">{{index}} {{game.title}}</li>
        <li v-for="(value,key) in info">{{key}}:{{value}}</li>
    </ul>
    
    <input id="txtName" v-on:keyup="txtKeyup($event)">
</div>
<script>
    //定义一个组件game-item，接收参数game。
    Vue.component(game-item,{
        props: ['game'],
        template: '<li>{{game.title}}</li>'//显示game中的title值。
    })
    var myApp = new Vue({
        el: "#myApp",
        data: { 
            name: 'Jelly',
            games: [
                {title:'英雄联盟'},
                {title:'王者荣耀'},
                {title:'绝地求生'}
            ],
            price: 22280,
            watchPrice: 0,
            isActive: true,
            maClass: { //class对象包含多个样式属性。
                myColor: true, //true添加样式属性
                big: true     //false取消样式属性
            },
            score: 0,
            isShow: true, //true显示元素，false不显示但不会在DOM中消失.
            info: {
                title: '绝地求生',
                price: 0,
                category:"射击"
            }
        },
        methods:{
            btnClick: function(pname){
                this.name = pname
            },
            addClick: function(value){
                this.price += value 
            },
            changeClass: function(){
                this.myClass.big = !this.myClass.big //设置big为false。
            },
            scoreClick: function(){
                this.score = Math.round(Math.random()*100)
            },
            txtKeyup: function(event){
                this.debugLog(event)
            },
            debugLog: function(event){
                console.log(
                    event.srcElement.tagName,
                    event.srcElement.id,
                    event.srcElement.innerHTML,
                    event.key?event.key:''
                )
            }
        },
        filters: {
            toupper: function(value){
                return value.toUpperCase()
            }
        },
        computed: {
            computPrice: {
                get: function(){
                    return this.price*1.8
                },
                set: function(value){
                    this.price = value/1.8
                }
            }
        },
        watch: {  //观察的price变化了，就执行后面的函数。
            price: function(){
                this.watchPrice = Math.round(this.price*1.08)
            }
        }
    })
</script>
<style scoped>
    .active {
        myColor: red;
    }
    .big {
        font-weight: bolder;
        font-size: 64px;
    }
</style>