sunnoy/HTML.html

## HTML.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>learn vue.js</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>

    <style type="text/css">
        body{
            font-size: 24px;
        }
        .textd{
            color: red;
        }
        .big{
            font-size: 34px;
        }
    </style>


</head>
<body style="align-content: center">


<hr/>
<div id="app30">
    <nba c="奥尼尔" pf="加内特">
        <span slot="sf">皮尔斯</span>
        <span slot="sg">皮尔斯1</span>
        <span slot="pg">皮尔斯2</span>
    </nba>
</div>

//组合slot
Vue.component('nba',{
    props:['c','pf'],
    template:'<div>' +
    '中锋{{ c }}<br/>' +
    '打钱{{ pf }}<br/>' +
    '小钱1<slot name="sf"></slot><br/>' +
    '小钱2<slot name="sg"></slot><br/>' +
    '小钱3<slot name="pg"></slot><br/>' +
    '</div>',
});

let app30 = new Vue({
    el:'#app30',

});
-----------------------------------------------------------
<hr/>
<div id="app29">
    <say-to pname="dong1">
        你真好
    </say-to>
    <say-to pname="dong2">
        你真棒
    </say-to>
</div>


 //slot插槽显示子组件内容，
Vue.component('say-to',{
    props:['pname'],
    template:'<div>您好，<strong>{{ pname }}</strong>' +
    '<slot></slot>' +
    '</div>',
});

let app29 = new Vue({
    el:'#app29',

});
---------------------------------------------------
<hr/>
<div id="app28">
    <p>@{{ total }}</p>
    <p>@{{ dong }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
//组件时间监听，子组件传递数据给父组件


Vue.component('button-counter', {
    template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
    data: function () {
        return {
            counter: 0
        }
    },
    methods: {
        incrementCounter: function () {
            this.counter += 1;
            this.$emit('increment',{
                dong:30
            })
        }
    },
});

let app28 =new Vue({
    el: '#app28',
    data: {
        total: 0,
        dong:66,
    },
    methods: {
        incrementTotal: function (pval) {
            this.total += 1;
            this.dong = pval.dong;

        }
    }
});

-----------------------------------------------------------
<hr/>
<div id="app27">
    <show-info name="kama" :age="25" :detail="{address:'earth',language:'ying'}"></show-info>
</div>


//组件验证数据

Vue.component('show-info',{
    props:{
        name:{
          type:String,
          required:true,
        },
        age:{
            type:Number,
            validator:function (value) {
                return value>= 0 && value <= 130;
            },
        },
        detail:{
            type:Object,
            default:function () {
                return {
                    address:'us',
                    language:'dong',
                };
            },
        },

    },
    template:'<div>name{{ this.name }}<br/>' +
    'age{{ this.age }}<br/>' +
    'add{{ this.detail.address }}<br/>' +
    'addq{{ this.detail.language }}</div>',

});


let app27 = new Vue({
    el:'#app27',
});

-----------------------------------------------------------------------
<hr/>
<div id="app26">
    <div>请输入您的名字：<input v-model="myname"/></div>
    <say-hello :pname="myname" />

</div>
//组件中传递变量

Vue.component('say-hello',{
    props:['pname'],
    template:'<div>就是{{ pname }}</div>',

});

let app26 = new Vue({
    el:'#app26',
    data:{
        myname:'ko',
    },
});

-----------------------------------------------------------
<hr/>
<div id="app25">
    <h1>您的成绩评价</h1>
    <test-result :score="50"></test-result>
    <test-result :score="60"></test-result>
    <test-result :score="90"></test-result>
    <test-result :score="100"></test-result>

</div>
//组件中传递数据
Vue.component('test-result',{
    //１组件中绑定的数据，传递过来
    props:['score'],
    //3对传递过来的数据以及处理的数据传递给模板
    template:'<div><strong>{{ score }}分{{ testResult }}</strong></div>',
   　//２对传递过来的数据进行运算逻辑处理
    computed:{
        testResult:function () {
            let stri = "";
            if (this.score < 60)
                stri = "不及格";
            else if (this.score < 90)
                stri = "中等生";
            else if (this.score <= 100)
                stri = "ppp中等生";

            return stri;
        }
    }
});


let app25 =new Vue({
    el:'#app25'
});

------------------------------------------------------
<hr/>
<div id="app24">
    <div>
        今天是<today-weather/>
    </div>
</div>

<hr/>

  /组件传递数据函数

Vue.component('today-weather',{
    template:'<strong>{{ todayw }}</strong>',
    data:function () {
        return {
            todayw:'雨夹雪',
        };
    }

});
  let app24 =new Vue({
    el:'#app24'
});
-----------------------------------------------------------------
<div id="app23">
    <h1>最流行游戏</h1>
    <table border="1">
        <tr>
            <td>编号</td>
            <td>游戏名称</td>
        </tr>
        <tr is="my-row1"></tr>
        <tr is="my-row2"></tr>
        <tr is="my-row3"></tr>


    </table>
</div>
//表行组件，为表格进行注册组件
Vue.component('my-row1',{
    template:'<tr><td>1</td><td>哈哈1</td></tr>'
});
Vue.component('my-row2',{
    template:'<tr><td>2</td><td>哈哈2</td></tr>'
});
Vue.component('my-row3',{
    template:'<tr><td>3</td><td>哈哈3</td></tr>'
});

let app23 =new Vue({
    el:'#app23'
});
--------------------------------------------------


<hr/>
<div id="app22">
    <today-weather></today-weather>
</div>
//局部组件
let Weather ={
    template:'<div>今天也许会下雨吧之局部组件</div>'
};
let app22 = new Vue({
    el:'#app22',
    components:{
        'today-weather':Weather
    },
});

--------------------------------
<hr/>
<div id="app21">
    <today-weather></today-weather>
</div>
//组件，基础中的基础,全局组件
Vue.component('today-weather',{
    template:'<div>今天也许会下雨吧</div>'
});

let app21 =new Vue({
    el:'#app21',
});

--------------------------------------------
<hr/>
<div id="app20">
    <h1>用户注册</h1>
    <div>
        <label for="username">用户名称：</label>
        <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
        <span v-if="checkUsernameOK">可以注册</span>
    </div>
    <div>
        <label for="age">年龄</label>
        <input type="number" id="age" v-model.number="age">
    </div>
    <div>
        <label for="content" >个人简介</label>
        <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
    </div>
    <h4>信息区域</h4>
    <p>@{{ username }}</p>
    <p>@{{ age }}</p>
    <p>@{{ content }}</p>
</div>
//表单修饰符
let app20 =new Vue({
    el:'#app20',
    data:{
        username:'',
        checkUsernameOK:false,
        age:'',
        content:''
    },
    methods:{
        checkUsername:function () {
          if (this.username.length > 0) {
              this.checkUsernameOK = true;
              console.log(this.checkUsernameOK)
          }


        },

    },
});

--------------------------------------------


<hr/>
<div id="app19">
    <h3>你最喜欢的NBA明星</h3>
    <select v-model="likedNBA">
        <option>科比1</option>
        <option>科比2</option>
        <option>科比3</option>
        <option>科比4</option>
        <option>科比5</option>
    </select>
    <h3>你最喜欢的NBA明星</h3>
    <select v-model="likedNBAs" multiple>
        <option>科比11</option>
        <option>科比21</option>
        <option>科比32</option>
        <option>科比43</option>
        <option>科比54</option>
    </select>
    <h3>选择结果是</h3>
    <p>球星是@{{ likedNBA }}</p>
    <p>球星ｓ是@{{ likedNBAs }}</p>
</div>
   //下拉框选择
let app19 = new Vue({
    el:'#app19',
    data:{
        likedNBA:'',
        likedNBAs:[],
    },
});

 ---------------------------------------------------------------------   --------
<hr/>
<div id="app18">
    <h1>绑定单选框</h1>
    <h2>选择性别</h2>
    <input type="radio" id="male" value="男" v-model="pickSex">
    <label for="male">男</label>
    <br/>
    <input type="radio" id="female" value="女" v-model="pickSex">
    <label for="female">女</label>

    <h2>选择爱好</h2>
    <input type="radio" id="game" value="玩游戏" v-model="pickHobby">
    <label for="game">玩游戏</label>
    <br/>
    <input type="radio" id="movie" value="看电影" v-model="pickHobby">
    <label for="movie">看电影</label>
    <h3>选择结果</h3>
    <p>性别@{{ pickSex }}</p>
    <p>爱好@{{ pickHobby }}</p>


</div>
//单选框绑定
let app18 = new Vue({
    el: '#app18',
    data: {
        pickSex: '',
        pickHobby: ''

    }
});
-------------------------------------------------------------------


<hr/>
<div id="app17">
    <h1>复选框绑定</h1>
    <input type="checkbox" id="生化危机1" value="生化危机1" v-model="checkedGames">
    <label for="生化危机1">生化危机1</label>
    <input type="checkbox" id="生化危机2" value="生化危机2" v-model="checkedGames">
    <label for="生化危机2">生化危机2</label>
    <input type="checkbox" id="生化危机3" value="生化危机3" v-model="checkedGames">
    <label for="生化危机3">生化危机3</label>

    <br/>
    <p>您选择的游戏是@{{ checkedGames }}</p>
</div>

//复选框绑定
let app17 = new Vue({
    el: '#app17',
    data: {
        checkedGames: []
    }
});
---------
-----------------------------------------------------------------------

<hr/>


<div id="app16">
    <h1>表单控件绑定</h1>
    <input type="text" v-model="message" placeholder="输入数据">
    <p>@{{ message }}</p>
</div>
  //表单空间绑定v-model input
let app16 = new Vue({
    el: '#app16',
    data: {
        message: "hahah",
    },
});

---------------------------------------------------------------
<hr/>
<div id="app15">
    <h1>事件处理器</h1>
    <input id="texName" v-on:keyup="txtKeyup($event)"/>
    <button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
//事件处理器v-on
let app15 = new Vue({
    el: '#app15',
    data: {},
    methods: {
        txtKeyup: function (event) {
            this.debugLog(event);
        },
        btnClick: function (event) {
            this.debugLog(event);
        },
        debugLog: function (event) {
            console.log(
                'id是' + event.target.id,
                '标签名称是' + event.target.tagName,
                '标签内容是' + event.target.innerHTML,
                event.key ? 'key是' + event.key : 'kong',
            );
        },
    },
});
-------------------------------------------------------
<hr/>
<div id="app14">
    <ul>
        <li v-for="(game, index) in games">
            (@{{ index }})对@{{ game.title }}/@{{ game.price }}
        </li>
        <hr/>
        <li v-for="(value, key, index) in dongg">
            (@{{ index }}) @{{ key }}: @{{ value }}
        </li>
    </ul>
</div>

/列表渲染v-for
let app14 = new Vue({
    el: '#app14',
    data: {
        games: [
            {title: 'dong1', price: 400},
            {title: 'dong2', price: 450},
            {title: 'dong3', price: 460},
            {title: 'dong4', price: 420},
            {title: 'dong5', price: 480},
        ],

        dongg: {
            //key:value
            firstName: 'John',
            lastName: 'Doe',
            age: 30,
        },

    },
});

---------------------------------------------

<hr/>

<div id="app13">
    <h1 class="textd" v-show="day">新一代天堂</h1>
    <button @click="btnClick">是否要主机</button>
</div>

//元素显示　v-show

let app13 = new Vue({
    el: '#app13',
    data: {
        day: true,
    },

    methods: {
        btnClick: function () {
            this.day = !this.day;
        },
    },
});


--------------------------------------------------------


<hr/>
<div id="app12">
    <h1 v-if="dong == 0">@{{ dong }}成绩没有公布</h1>
    <h1 v-else-if="dong < 60">@{{ dong }}不及格</h1>
    <h1 v-else-if="dong < 80">@{{ dong }}非常好</h1>
    <h1 v-else>@{{ dong }}ok</h1>
    <button @click="btnClick">考试成绩</button>
</div>

//条件渲染v-if v-else-if v-else
let app12 = new Vue({
    el: '#app12',
    data: {
        dong: 0,
    },
    methods: {
        btnClick: function () {
            this.dong = Math.round(Math.random() * 100);
        },
    },
});


-----------------------------------------------
<hr/>
<div id="app11">
    <div :class ="myClass">文本内容</div>
    <button @click="btnClick">改变class吧</button>
</div>
 //class 对象绑定绑定多个类
let app11 = new Vue({
    el: '#app11',
    data: {
        myClass: {
            textd: true,
            big: true,
        },
    },

    methods: {
        btnClick: function () {
            this.myClass.big = !this.myClass.big;
            this.myClass.textd = !this.myClass.textd;
        },
    },
});


----------------------------------------------------------------------------
<hr/>
<div id="app10">
    <div v-bind:class="{textd:isActive}">我是红色</div>
    <div :class="{textd:isActive}">我是红色2</div>
    <button @click="btnClick">改变颜色吧</button>

</div>

//class属性绑定　v-bind:class
let app10 = new Vue({
    el: '#app10',
    data: {
        isActive: false,
    },
    methods: {
        btnClick: function () {
            this.isActive = !this.isActive;
        },
    },
});
---------------------------------------------------    ----------------------
<hr/>
<div id="app9">
    今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
    <button @click="btnClick(10000)">含税价格变为10000</button>
</div>
<hr/>

  //seter设置计算属性

let app9 = new Vue({
    el: '#app9',
    data: {
        price: 29999,
    },

    computed: {
        priceIn: {
            get: function () {
                return this.price * 1.08;

            },

            set: function (value) {
                this.price = value / 1.08;
            },
        },

        chinaPrice: function () {
            return Math.round(this.priceIn / 16.75);

        },
    },

    methods: {
        btnClick: function (newPrice) {
            this.priceIn = newPrice;
        }
    },
});

------------------------------------------------------------------------
<div id="app8">
    今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
    <button @click="btnClick(10000)">加价10000</button>
</div>
<hr/>

let app8 = new Vue({
    el: '#app8',
    data: {
        price: 20000,
        priceIn: 0,
        chinaPrice: 0,

    },

    watch: {
        price: function (newVal, oldVal) {
            console.log(newVal, oldVal);
            this.priceIn = Math.round(this.price * 1.08);
            this.chinaPrice = Math.round(this.priceIn / 16.75);

        },
    },

    methods: {
        btnClick: function (Newprice) {
            this.price += Newprice;
        }
    }


});
----------------------------------------------------------------
<div id="app7">
    今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
</div>
<hr/>
    //计算属性
let app7 = new Vue({
    el: '#app7',
    data: {
        price: 3000,
    },

    computed: {
        priceIn: function () {
            return this.price * 1.08;
        },

        chinaPrice: function () {
            return Math.round(this.priceIn / 16.75);
        },
    },
});


-------------------------------------------------------------
<div id="app6">

    <p>@{{ message }}</p>
    <p>@{{ message | toupper }}</p>
    <p>@{{ num }}</p>
    <p>@{{ num | topercentage }}</p>

</div>
<hr/>

  //过滤器
let app6 = new Vue({
    el: '#app6',
    data: {
        message: 'haDhah',
        num: 0.3
    },

    filters: {
        toupper: function (value) {
            return value.toUpperCase();
        },

        topercentage: function (value) {
            return value * 100;
        }


    }
});

--------------------------------------------------------------
<div id="app5">
    <ol>
        <li v-for="game in games">@{{ game.title }}</li>
        <meg v-for="item in games" v-bind:game="item" ></meg>
    </ol>

</div>
<hr/>
 //组件
//定义组件
Vue.component('meg', {
    // 声明 props
    props: ['game'],
    // 就像 data 一样，prop 可以用在模板内
    // 同样也可以在 vm 实例中像“this.message”这样使用
    template: '<li>{{ game.title }}</li>'
});

let app5 = new Vue({
    el: '#app5',
    data: {
        games: [
            {title: 'dong1'},
            {title: 'dong3'},
            {title: 'dong7'},
            {title: 'dong5'},
        ],
    },


});


------------------------------------------------------
<div id="app4">
    <p>您喜欢的游戏是@{{ game }}</p>
    <button v-on:click="greet('dong')">dong</button>
    <button v-on:click="greet('dong1')">dong1</button>
    <button @click="greet('dong12')">dong12</button>
</div>
   //v-on 按钮事件,v-on:click="函数名称('传入参数')"
let app4 = new Vue({
    el: '#app4',
    data: {
        game: 'xiao',
    },
    methods: {
        greet: function (name) {
            this.game = name
        }

    }
});

    ---------------------------------------------------------
<hr/>
<div id="app3">
    <input v-model="mygame">
    <p>您输入的是@{{ mygame }}</p>
</div>
<hr/>
 //v-model 处理用户输入,将输入的内容绑定到变量v-model
let app3 = new Vue({
    el: '#app3',
    data: {
        mygame: 'dongdong'
    }

});
----------------------------------------------------
<div id="app2">
    <p v-if="seen">look at me</p>
    <ol>
        <li v-for="game in games">@{{ game.title }}/@{{ game.price }}</li>
    </ol>
</div>
<hr/>
//if and for
let app2 = new Vue({
    el: '#app2',
    data: {
        seen: true,
        games: [
            {title: 'dong1', price: 300},
            {title: 'dong2', price: 44},
            {title: 'dong3', price: 33},
            {title: 'dong4', price: 66},

        ],
    },
});
--------------------------------------------
<div id="app1">
    <p>@{{ message }}</p>
</div>
<hr/>

let app1 = new Vue({
    el: '#app1',
    data: {
        message: 'dong !'
    }

});


<script src="{{ asset('/js/vue.js') }}"></script>
</body>
</html>

## vue.js
//to get data
let app1 = new Vue({
    el: '#app1',
    data: {
        message: 'dong !'
    }

});

//if and for
let app2 = new Vue({
    el: '#app2',
    data: {
        seen: true,
        games: [
            {title: 'dong1', price: 300},
            {title: 'dong2', price: 44},
            {title: 'dong3', price: 33},
            {title: 'dong4', price: 66},

        ],
    },
});

//v-model 处理用户输入,将输入的内容绑定到变量v-model
let app3 = new Vue({
    el: '#app3',
    data: {
        mygame: 'dongdong'
    }

});

//v-on 按钮事件,v-on:click="函数名称('传入参数')"
let app4 = new Vue({
    el: '#app4',
    data: {
        game: 'xiao',
    },
    methods: {
        greet: function (name) {
            this.game = name
        }

    }
});

//组件
//定义组件
Vue.component('meg', {
    // 声明 props
    props: ['game'],
    // 就像 data 一样，prop 可以用在模板内
    // 同样也可以在 vm 实例中像“this.message”这样使用
    template: '<li>{{ game.title }}</li>'
});

let app5 = new Vue({
    el: '#app5',
    data: {
        games: [
            {title: 'dong1'},
            {title: 'dong3'},
            {title: 'dong7'},
            {title: 'dong5'},
        ],
    },


});

//过滤器
let app6 = new Vue({
    el: '#app6',
    data: {
        message: 'haDhah',
        num: 0.3
    },

    filters: {
        toupper: function (value) {
            return value.toUpperCase();
        },

        topercentage: function (value) {
            return value * 100;
        }


    }
});

//计算属性
let app7 = new Vue({
    el: '#app7',
    data: {
        price: 3000,
    },

    computed: {
        priceIn: function () {
            return this.price * 1.08;
        },

        chinaPrice: function () {
            return Math.round(this.priceIn / 16.75);
        },
    },
});

let app8 = new Vue({
    el: '#app8',
    data: {
        price: 20000,
        priceIn: 0,
        chinaPrice: 0,

    },

    watch: {
        price: function (newVal, oldVal) {
            console.log(newVal, oldVal);
            this.priceIn = Math.round(this.price * 1.08);
            this.chinaPrice = Math.round(this.priceIn / 16.75);

        },
    },

    methods: {
        btnClick: function (Newprice) {
            this.price += Newprice;
        }
    }


});

//seter设置计算属性

let app9 = new Vue({
    el: '#app9',
    data: {
        price: 29999,
    },

    computed: {
        priceIn: {
            get: function () {
                return this.price * 1.08;

            },

            set: function (value) {
                this.price = value / 1.08;
            },
        },

        chinaPrice: function () {
            return Math.round(this.priceIn / 16.75);

        },
    },

    methods: {
        btnClick: function (newPrice) {
            this.priceIn = newPrice;
        }
    },
});

//class属性绑定　v-bind:class
let app10 = new Vue({
    el: '#app10',
    data: {
        isActive: false,
    },
    methods: {
        btnClick: function () {
            this.isActive = !this.isActive;
        },
    },
});

//class 对象绑定绑定多个类
let app11 = new Vue({
    el: '#app11',
    data: {
        myClass: {
            textd: true,
            big: true,
        },
    },

    methods: {
        btnClick: function () {
            this.myClass.big = !this.myClass.big;
            this.myClass.textd = !this.myClass.textd;
        },
    },
});

//条件渲染v-if v-else-if v-else
let app12 = new Vue({
    el: '#app12',
    data: {
        dong: 0,
    },
    methods: {
        btnClick: function () {
            this.dong = Math.round(Math.random() * 100);
        },
    },
});

//元素显示　v-show

let app13 = new Vue({
    el: '#app13',
    data: {
        day: true,
    },

    methods: {
        btnClick: function () {
            this.day = !this.day;
        },
    },
});

//列表渲染v-for
let app14 = new Vue({
    el: '#app14',
    data: {
        games: [
            {title: 'dong1', price: 400},
            {title: 'dong2', price: 450},
            {title: 'dong3', price: 460},
            {title: 'dong4', price: 420},
            {title: 'dong5', price: 480},
        ],

        dongg: {
            //key:value
            firstName: 'John',
            lastName: 'Doe',
            age: 30,
        },

    },
});


//事件处理器v-on
let app15 = new Vue({
    el: '#app15',
    data: {},
    methods: {
        txtKeyup: function (event) {
            this.debugLog(event);
        },
        btnClick: function (event) {
            this.debugLog(event);
        },
        debugLog: function (event) {
            console.log(
                'id是' + event.target.id,
                '标签名称是' + event.target.tagName,
                '标签内容是' + event.target.innerHTML,
                event.key ? 'key是' + event.key : 'kong',
            );
        },
    },
});


//表单空间绑定v-model input
let app16 = new Vue({
    el: '#app16',
    data: {
        message: "hahah",
    },
});

//复选框绑定
let app17 = new Vue({
    el: '#app17',
    data: {
        checkedGames: []
    }
});

//单选框绑定
let app18 = new Vue({
    el: '#app18',
    data: {
        pickSex: '',
        pickHobby: ''

    }
});

//下拉框选择
let app19 = new Vue({
    el:'#app19',
    data:{
        likedNBA:'',
        likedNBAs:[],
    },
});

//表单修饰符
let app20 =new Vue({
    el:'#app20',
    data:{
        username:'',
        checkUsernameOK:false,
        age:'',
        content:''
    },
    methods:{
        checkUsername:function () {
          if (this.username.length > 0) {
              this.checkUsernameOK = true;
              console.log(this.checkUsernameOK)
          }


        },

    },
});


//组件，基础中的基础,全局组件
Vue.component('today-weather',{
    template:'<div>今天也许会下雨吧</div>'
});

let app21 =new Vue({
    el:'#app21',
});


//局部组件
let Weather ={
    template:'<div>今天也许会下雨吧之局部组件</div>'
};
let app22 = new Vue({
    el:'#app22',
    components:{
        'today-weather':Weather
    },
});

//表行组件，为表格进行注册组件
Vue.component('my-row1',{
    template:'<tr><td>1</td><td>哈哈1</td></tr>'
});
Vue.component('my-row2',{
    template:'<tr><td>2</td><td>哈哈2</td></tr>'
});
Vue.component('my-row3',{
    template:'<tr><td>3</td><td>哈哈3</td></tr>'
});

let app23 =new Vue({
    el:'#app23'
});

//组件传递数据函数

Vue.component('today-weather',{
    template:'<strong>{{ todayw }}</strong>',
    data:function () {
        return {
            todayw:'雨夹雪',
        };
    }

});

let app24 =new Vue({
    el:'#app24'
});

//组件中传递数据
Vue.component('test-result',{
    //１组件中绑定的数据，传递过来
    props:['score'],
    //3对传递过来的数据以及处理的数据传递给模板
    template:'<div><strong>{{ score }}分{{ testResult }}</strong></div>',
   　//２对传递过来的数据进行运算逻辑处理
    computed:{
        testResult:function () {
            let stri = "";
            if (this.score < 60)
                stri = "不及格";
            else if (this.score < 90)
                stri = "中等生";
            else if (this.score <= 100)
                stri = "ppp中等生";

            return stri;
        }
    }
});


let app25 =new Vue({
    el:'#app25'
});

//组件中传递变量

Vue.component('say-hello',{
    props:['pname'],
    template:'<div>就是{{ pname }}</div>',

});

let app26 = new Vue({
    el:'#app26',
    data:{
        myname:'ko',
    },
});

//组件验证数据

Vue.component('show-info',{
    props:{
        name:{
          type:String,
          required:true,
        },
        age:{
            type:Number,
            validator:function (value) {
                return value>= 0 && value <= 130;
            },
        },
        detail:{
            type:Object,
            default:function () {
                return {
                    address:'us',
                    language:'dong',
                };
            },
        },

    },
    template:'<div>name{{ this.name }}<br/>' +
    'age{{ this.age }}<br/>' +
    'add{{ this.detail.address }}<br/>' +
    'addq{{ this.detail.language }}</div>',

});


let app27 = new Vue({
    el:'#app27',
});

//组件时间监听，子组件传递数据给父组件


Vue.component('button-counter', {
    template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
    data: function () {
        return {
            counter: 0
        }
    },
    methods: {
        incrementCounter: function () {
            this.counter += 1;
            this.$emit('increment',{
                dong:30
            })
        }
    },
});

let app28 =new Vue({
    el: '#app28',
    data: {
        total: 0,
        dong:66,
    },
    methods: {
        incrementTotal: function (pval) {
            this.total += 1;
            this.dong = pval.dong;

        }
    }
});

//slot插槽显示子组件内容，
Vue.component('say-to',{
    props:['pname'],
    template:'<div>您好，<strong>{{ pname }}</strong>' +
    '<slot></slot>' +
    '</div>',
});

let app29 = new Vue({
    el:'#app29',

});
//组合slot
Vue.component('nba',{
    props:['c','pf'],
    template:'<div>' +
    '中锋{{ c }}<br/>' +
    '打钱{{ pf }}<br/>' +
    '小钱1<slot name="sf"></slot><br/>' +
    '小钱2<slot name="sg"></slot><br/>' +
    '小钱3<slot name="pg"></slot><br/>' +
    '</div>',
});

let app30 = new Vue({
    el:'#app30',

});

//iview,非组件模式

new Vue({
    el:'#app31',
    data () {
        return {
            loading: false,
        }
    },
    methods: {
        toLoading () {
            this.loading = true;
        },

    }
});

//组件模式

Vue.component('mytem',{

    template:'<Button type="primary">Primary</Button>',
});

new Vue({
    el:'#app32',

});

//导航栏
Vue.component('navdong',{

    template:'<Select v-model="model1" style="width:200px">\n' +
    '        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>\n' +
    '    </Select>',
    data () {
        return {
            cityList: [
                {
                    value: 'beijing',
                    label: '北京市'
                },
                {
                    value: 'shanghai',
                    label: '上海市'
                },
                {
                    value: 'shenzhen',
                    label: '深圳市'
                },
                {
                    value: 'hangzhou',
                    label: '杭州市'
                },
                {
                    value: 'nanjing',
                    label: '南京市'
                },
                {
                    value: 'chongqing',
                    label: '重庆市'
                }
            ],

        }
    }
});

new Vue({
    el:'#app33',
    data:{
        model1: ''
    }


});

//导航栏
Vue.component('navdong1',{

    template:' <Menu mode="horizontal" :theme="theme1" active-name="1">\n' +
    '        <MenuItem name="1" v-on:click="on-select">\n' +
    '            <Icon type="ios-paper"></Icon>\n' +
    '            内容管理\n' +
    '        </MenuItem>\n' +
    '        <MenuItem name="2">\n' +
    '            <Icon type="ios-people"></Icon>\n' +
    '            用户管理\n' +
    '        </MenuItem>\n' +
    '        <Submenu name="3">\n' +
    '            <template slot="title">\n' +
    '                <Icon type="stats-bars"></Icon>\n' +
    '                统计分析\n' +
    '            </template>\n' +
    '            <MenuGroup title="使用">\n' +
    '                <MenuItem name="3-1">新增和启动</MenuItem>\n' +
    '                <MenuItem name="3-2">活跃分析</MenuItem>\n' +
    '                <MenuItem name="3-3">时段分析</MenuItem>\n' +
    '            </MenuGroup>\n' +
    '            <MenuGroup title="留存">\n' +
    '                <MenuItem name="3-4">用户留存</MenuItem>\n' +
    '                <MenuItem name="3-5">流失用户</MenuItem>\n' +
    '            </MenuGroup>\n' +
    '        </Submenu>\n' +
    '        <MenuItem name="4">\n' +
    '            <Icon type="settings"></Icon>\n' +
    '            综合设置\n' +
    '        </MenuItem>\n' +
    '    </Menu>\n',
    data () {
        return {
            theme1: 'primary'
        }
    },

});


new Vue({
    el:'#app34',


});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>learn vue.js</title>
	<script src="https://unpkg.com/vue"></script>
	<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
	<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>

	<style type="text/css">
	body{
	font-size: 24px;
	}
	.textd{
	color: red;
	}
	.big{
	font-size: 34px;
	}
	</style>


	</head>
	<body style="align-content: center">




	<hr/>
	<div id="app30">
	<nba c="奥尼尔" pf="加内特">
	<span slot="sf">皮尔斯</span>
	<span slot="sg">皮尔斯1</span>
	<span slot="pg">皮尔斯2</span>
	</nba>
	</div>

	//组合slot
	Vue.component('nba',{
	props:['c','pf'],
	template:'<div>' +
	'中锋{{ c }}<br/>' +
	'打钱{{ pf }}<br/>' +
	'小钱1<slot name="sf"></slot><br/>' +
	'小钱2<slot name="sg"></slot><br/>' +
	'小钱3<slot name="pg"></slot><br/>' +
	'</div>',
	});

	let app30 = new Vue({
	el:'#app30',

	});
	-----------------------------------------------------------
	<hr/>
	<div id="app29">
	<say-to pname="dong1">
	你真好
	</say-to>
	<say-to pname="dong2">
	你真棒
	</say-to>
	</div>


	//slot插槽显示子组件内容，
	Vue.component('say-to',{
	props:['pname'],
	template:'<div>您好，<strong>{{ pname }}</strong>' +
	'<slot></slot>' +
	'</div>',
	});

	let app29 = new Vue({
	el:'#app29',

	});
	---------------------------------------------------
	<hr/>
	<div id="app28">
	<p>@{{ total }}</p>
	<p>@{{ dong }}</p>
	<button-counter v-on:increment="incrementTotal"></button-counter>
	<button-counter v-on:increment="incrementTotal"></button-counter>
	</div>
	//组件时间监听，子组件传递数据给父组件


	Vue.component('button-counter', {
	template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
	data: function () {
	return {
	counter: 0
	}
	},
	methods: {
	incrementCounter: function () {
	this.counter += 1;
	this.$emit('increment',{
	dong:30
	})
	}
	},
	});

	let app28 =new Vue({
	el: '#app28',
	data: {
	total: 0,
	dong:66,
	},
	methods: {
	incrementTotal: function (pval) {
	this.total += 1;
	this.dong = pval.dong;

	}
	}
	});

	-----------------------------------------------------------
	<hr/>
	<div id="app27">
	<show-info name="kama" :age="25" :detail="{address:'earth',language:'ying'}"></show-info>
	</div>


	//组件验证数据

	Vue.component('show-info',{
	props:{
	name:{
	type:String,
	required:true,
	},
	age:{
	type:Number,
	validator:function (value) {
	return value>= 0 && value <= 130;
	},
	},
	detail:{
	type:Object,
	default:function () {
	return {
	address:'us',
	language:'dong',
	};
	},
	},

	},
	template:'<div>name{{ this.name }}<br/>' +
	'age{{ this.age }}<br/>' +
	'add{{ this.detail.address }}<br/>' +
	'addq{{ this.detail.language }}</div>',

	});


	let app27 = new Vue({
	el:'#app27',
	});

	-----------------------------------------------------------------------
	<hr/>
	<div id="app26">
	<div>请输入您的名字：<input v-model="myname"/></div>
	<say-hello :pname="myname" />

	</div>
	//组件中传递变量

	Vue.component('say-hello',{
	props:['pname'],
	template:'<div>就是{{ pname }}</div>',

	});

	let app26 = new Vue({
	el:'#app26',
	data:{
	myname:'ko',
	},
	});

	-----------------------------------------------------------
	<hr/>
	<div id="app25">
	<h1>您的成绩评价</h1>
	<test-result :score="50"></test-result>
	<test-result :score="60"></test-result>
	<test-result :score="90"></test-result>
	<test-result :score="100"></test-result>

	</div>
	//组件中传递数据
	Vue.component('test-result',{
	//１组件中绑定的数据，传递过来
	props:['score'],
	//3对传递过来的数据以及处理的数据传递给模板
	template:'<div><strong>{{ score }}分{{ testResult }}</strong></div>',
	//２对传递过来的数据进行运算逻辑处理
	computed:{
	testResult:function () {
	let stri = "";
	if (this.score < 60)
	stri = "不及格";
	else if (this.score < 90)
	stri = "中等生";
	else if (this.score <= 100)
	stri = "ppp中等生";

	return stri;
	}
	}
	});



	let app25 =new Vue({
	el:'#app25'
	});

	------------------------------------------------------
	<hr/>
	<div id="app24">
	<div>
	今天是<today-weather/>
	</div>
	</div>

	<hr/>

	/组件传递数据函数

	Vue.component('today-weather',{
	template:'<strong>{{ todayw }}</strong>',
	data:function () {
	return {
	todayw:'雨夹雪',
	};
	}

	});
	let app24 =new Vue({
	el:'#app24'
	});
	-----------------------------------------------------------------
	<div id="app23">
	<h1>最流行游戏</h1>
	<table border="1">
	<tr>
	<td>编号</td>
	<td>游戏名称</td>
	</tr>
	<tr is="my-row1"></tr>
	<tr is="my-row2"></tr>
	<tr is="my-row3"></tr>


	</table>
	</div>
	//表行组件，为表格进行注册组件
	Vue.component('my-row1',{
	template:'<tr><td>1</td><td>哈哈1</td></tr>'
	});
	Vue.component('my-row2',{
	template:'<tr><td>2</td><td>哈哈2</td></tr>'
	});
	Vue.component('my-row3',{
	template:'<tr><td>3</td><td>哈哈3</td></tr>'
	});

	let app23 =new Vue({
	el:'#app23'
	});
	--------------------------------------------------


	<hr/>
	<div id="app22">
	<today-weather></today-weather>
	</div>
	//局部组件
	let Weather ={
	template:'<div>今天也许会下雨吧之局部组件</div>'
	};
	let app22 = new Vue({
	el:'#app22',
	components:{
	'today-weather':Weather
	},
	});

	--------------------------------
	<hr/>
	<div id="app21">
	<today-weather></today-weather>
	</div>
	//组件，基础中的基础,全局组件
	Vue.component('today-weather',{
	template:'<div>今天也许会下雨吧</div>'
	});

	let app21 =new Vue({
	el:'#app21',
	});

	--------------------------------------------
	<hr/>
	<div id="app20">
	<h1>用户注册</h1>
	<div>
	<label for="username">用户名称：</label>
	<input type="text" id="username" v-model.lazy="username" @change="checkUsername">
	<span v-if="checkUsernameOK">可以注册</span>
	</div>
	<div>
	<label for="age">年龄</label>
	<input type="number" id="age" v-model.number="age">
	</div>
	<div>
	<label for="content" >个人简介</label>
	<textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
	</div>
	<h4>信息区域</h4>
	<p>@{{ username }}</p>
	<p>@{{ age }}</p>
	<p>@{{ content }}</p>
	</div>
	//表单修饰符
	let app20 =new Vue({
	el:'#app20',
	data:{
	username:'',
	checkUsernameOK:false,
	age:'',
	content:''
	},
	methods:{
	checkUsername:function () {
	if (this.username.length > 0) {
	this.checkUsernameOK = true;
	console.log(this.checkUsernameOK)
	}


	},

	},
	});

	--------------------------------------------




	<hr/>
	<div id="app19">
	<h3>你最喜欢的NBA明星</h3>
	<select v-model="likedNBA">
	<option>科比1</option>
	<option>科比2</option>
	<option>科比3</option>
	<option>科比4</option>
	<option>科比5</option>
	</select>
	<h3>你最喜欢的NBA明星</h3>
	<select v-model="likedNBAs" multiple>
	<option>科比11</option>
	<option>科比21</option>
	<option>科比32</option>
	<option>科比43</option>
	<option>科比54</option>
	</select>
	<h3>选择结果是</h3>
	<p>球星是@{{ likedNBA }}</p>
	<p>球星ｓ是@{{ likedNBAs }}</p>
	</div>
	//下拉框选择
	let app19 = new Vue({
	el:'#app19',
	data:{
	likedNBA:'',
	likedNBAs:[],
	},
	});

	--------------------------------------------------------------------- --------
	<hr/>
	<div id="app18">
	<h1>绑定单选框</h1>
	<h2>选择性别</h2>
	<input type="radio" id="male" value="男" v-model="pickSex">
	<label for="male">男</label>
	<br/>
	<input type="radio" id="female" value="女" v-model="pickSex">
	<label for="female">女</label>

	<h2>选择爱好</h2>
	<input type="radio" id="game" value="玩游戏" v-model="pickHobby">
	<label for="game">玩游戏</label>
	<br/>
	<input type="radio" id="movie" value="看电影" v-model="pickHobby">
	<label for="movie">看电影</label>
	<h3>选择结果</h3>
	<p>性别@{{ pickSex }}</p>
	<p>爱好@{{ pickHobby }}</p>


	</div>
	//单选框绑定
	let app18 = new Vue({
	el: '#app18',
	data: {
	pickSex: '',
	pickHobby: ''

	}
	});
	-------------------------------------------------------------------


	<hr/>
	<div id="app17">
	<h1>复选框绑定</h1>
	<input type="checkbox" id="生化危机1" value="生化危机1" v-model="checkedGames">
	<label for="生化危机1">生化危机1</label>
	<input type="checkbox" id="生化危机2" value="生化危机2" v-model="checkedGames">
	<label for="生化危机2">生化危机2</label>
	<input type="checkbox" id="生化危机3" value="生化危机3" v-model="checkedGames">
	<label for="生化危机3">生化危机3</label>

	<br/>
	<p>您选择的游戏是@{{ checkedGames }}</p>
	</div>

	//复选框绑定
	let app17 = new Vue({
	el: '#app17',
	data: {
	checkedGames: []
	}
	});
	---------
	-----------------------------------------------------------------------

	<hr/>







	<div id="app16">
	<h1>表单控件绑定</h1>
	<input type="text" v-model="message" placeholder="输入数据">
	<p>@{{ message }}</p>
	</div>
	//表单空间绑定v-model input
	let app16 = new Vue({
	el: '#app16',
	data: {
	message: "hahah",
	},
	});

	---------------------------------------------------------------
	<hr/>
	<div id="app15">
	<h1>事件处理器</h1>
	<input id="texName" v-on:keyup="txtKeyup($event)"/>
	<button id="btnOK" v-on:click="btnClick($event)">OK</button>
	</div>
	//事件处理器v-on
	let app15 = new Vue({
	el: '#app15',
	data: {},
	methods: {
	txtKeyup: function (event) {
	this.debugLog(event);
	},
	btnClick: function (event) {
	this.debugLog(event);
	},
	debugLog: function (event) {
	console.log(
	'id是' + event.target.id,
	'标签名称是' + event.target.tagName,
	'标签内容是' + event.target.innerHTML,
	event.key ? 'key是' + event.key : 'kong',
	);
	},
	},
	});
	-------------------------------------------------------
	<hr/>
	<div id="app14">
	<ul>
	<li v-for="(game, index) in games">
	(@{{ index }})对@{{ game.title }}/@{{ game.price }}
	</li>
	<hr/>
	<li v-for="(value, key, index) in dongg">
	(@{{ index }}) @{{ key }}: @{{ value }}
	</li>
	</ul>
	</div>

	/列表渲染v-for
	let app14 = new Vue({
	el: '#app14',
	data: {
	games: [
	{title: 'dong1', price: 400},
	{title: 'dong2', price: 450},
	{title: 'dong3', price: 460},
	{title: 'dong4', price: 420},
	{title: 'dong5', price: 480},
	],

	dongg: {
	//key:value
	firstName: 'John',
	lastName: 'Doe',
	age: 30,
	},

	},
	});

	---------------------------------------------

	<hr/>

	<div id="app13">
	<h1 class="textd" v-show="day">新一代天堂</h1>
	<button @click="btnClick">是否要主机</button>
	</div>

	//元素显示　v-show

	let app13 = new Vue({
	el: '#app13',
	data: {
	day: true,
	},

	methods: {
	btnClick: function () {
	this.day = !this.day;
	},
	},
	});


	--------------------------------------------------------


	<hr/>
	<div id="app12">
	<h1 v-if="dong == 0">@{{ dong }}成绩没有公布</h1>
	<h1 v-else-if="dong < 60">@{{ dong }}不及格</h1>
	<h1 v-else-if="dong < 80">@{{ dong }}非常好</h1>
	<h1 v-else>@{{ dong }}ok</h1>
	<button @click="btnClick">考试成绩</button>
	</div>

	//条件渲染v-if v-else-if v-else
	let app12 = new Vue({
	el: '#app12',
	data: {
	dong: 0,
	},
	methods: {
	btnClick: function () {
	this.dong = Math.round(Math.random() * 100);
	},
	},
	});




	-----------------------------------------------
	<hr/>
	<div id="app11">
	<div :class ="myClass">文本内容</div>
	<button @click="btnClick">改变class吧</button>
	</div>
	//class 对象绑定绑定多个类
	let app11 = new Vue({
	el: '#app11',
	data: {
	myClass: {
	textd: true,
	big: true,
	},
	},

	methods: {
	btnClick: function () {
	this.myClass.big = !this.myClass.big;
	this.myClass.textd = !this.myClass.textd;
	},
	},
	});


	----------------------------------------------------------------------------
	<hr/>
	<div id="app10">
	<div v-bind:class="{textd:isActive}">我是红色</div>
	<div :class="{textd:isActive}">我是红色2</div>
	<button @click="btnClick">改变颜色吧</button>

	</div>

	//class属性绑定　v-bind:class
	let app10 = new Vue({
	el: '#app10',
	data: {
	isActive: false,
	},
	methods: {
	btnClick: function () {
	this.isActive = !this.isActive;
	},
	},
	});
	--------------------------------------------------- ----------------------
	<hr/>
	<div id="app9">
	今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
	<button @click="btnClick(10000)">含税价格变为10000</button>
	</div>
	<hr/>

	//seter设置计算属性

	let app9 = new Vue({
	el: '#app9',
	data: {
	price: 29999,
	},

	computed: {
	priceIn: {
	get: function () {
	return this.price * 1.08;

	},

	set: function (value) {
	this.price = value / 1.08;
	},
	},

	chinaPrice: function () {
	return Math.round(this.priceIn / 16.75);

	},
	},

	methods: {
	btnClick: function (newPrice) {
	this.priceIn = newPrice;
	}
	},
	});

	------------------------------------------------------------------------
	<div id="app8">
	今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
	<button @click="btnClick(10000)">加价10000</button>
	</div>
	<hr/>

	let app8 = new Vue({
	el: '#app8',
	data: {
	price: 20000,
	priceIn: 0,
	chinaPrice: 0,

	},

	watch: {
	price: function (newVal, oldVal) {
	console.log(newVal, oldVal);
	this.priceIn = Math.round(this.price * 1.08);
	this.chinaPrice = Math.round(this.priceIn / 16.75);

	},
	},

	methods: {
	btnClick: function (Newprice) {
	this.price += Newprice;
	}
	}


	});
	----------------------------------------------------------------
	<div id="app7">
	今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
	</div>
	<hr/>
	//计算属性
	let app7 = new Vue({
	el: '#app7',
	data: {
	price: 3000,
	},

	computed: {
	priceIn: function () {
	return this.price * 1.08;
	},

	chinaPrice: function () {
	return Math.round(this.priceIn / 16.75);
	},
	},
	});


	-------------------------------------------------------------
	<div id="app6">

	<p>@{{ message }}</p>
	<p>@{{ message \| toupper }}</p>
	<p>@{{ num }}</p>
	<p>@{{ num \| topercentage }}</p>

	</div>
	<hr/>

	//过滤器
	let app6 = new Vue({
	el: '#app6',
	data: {
	message: 'haDhah',
	num: 0.3
	},

	filters: {
	toupper: function (value) {
	return value.toUpperCase();
	},

	topercentage: function (value) {
	return value * 100;
	}


	}
	});

	--------------------------------------------------------------
	<div id="app5">
	<ol>
	<li v-for="game in games">@{{ game.title }}</li>
	<meg v-for="item in games" v-bind:game="item" ></meg>
	</ol>

	</div>
	<hr/>
	//组件
	//定义组件
	Vue.component('meg', {
	// 声明 props
	props: ['game'],
	// 就像 data 一样，prop 可以用在模板内
	// 同样也可以在 vm 实例中像“this.message”这样使用
	template: '<li>{{ game.title }}</li>'
	});

	let app5 = new Vue({
	el: '#app5',
	data: {
	games: [
	{title: 'dong1'},
	{title: 'dong3'},
	{title: 'dong7'},
	{title: 'dong5'},
	],
	},


	});


	------------------------------------------------------
	<div id="app4">
	<p>您喜欢的游戏是@{{ game }}</p>
	<button v-on:click="greet('dong')">dong</button>
	<button v-on:click="greet('dong1')">dong1</button>
	<button @click="greet('dong12')">dong12</button>
	</div>
	//v-on 按钮事件,v-on:click="函数名称('传入参数')"
	let app4 = new Vue({
	el: '#app4',
	data: {
	game: 'xiao',
	},
	methods: {
	greet: function (name) {
	this.game = name
	}

	}
	});

	---------------------------------------------------------
	<hr/>
	<div id="app3">
	<input v-model="mygame">
	<p>您输入的是@{{ mygame }}</p>
	</div>
	<hr/>
	//v-model 处理用户输入,将输入的内容绑定到变量v-model
	let app3 = new Vue({
	el: '#app3',
	data: {
	mygame: 'dongdong'
	}

	});
	----------------------------------------------------
	<div id="app2">
	<p v-if="seen">look at me</p>
	<ol>
	<li v-for="game in games">@{{ game.title }}/@{{ game.price }}</li>
	</ol>
	</div>
	<hr/>
	//if and for
	let app2 = new Vue({
	el: '#app2',
	data: {
	seen: true,
	games: [
	{title: 'dong1', price: 300},
	{title: 'dong2', price: 44},
	{title: 'dong3', price: 33},
	{title: 'dong4', price: 66},

	],
	},
	});
	--------------------------------------------
	<div id="app1">
	<p>@{{ message }}</p>
	</div>
	<hr/>

	let app1 = new Vue({
	el: '#app1',
	data: {
	message: 'dong !'
	}

	});










	<script src="{{ asset('/js/vue.js') }}"></script>
	</body>
	</html>
	//to get data
	let app1 = new Vue({
	el: '#app1',
	data: {
	message: 'dong !'
	}

	});

	//if and for
	let app2 = new Vue({
	el: '#app2',
	data: {
	seen: true,
	games: [
	{title: 'dong1', price: 300},
	{title: 'dong2', price: 44},
	{title: 'dong3', price: 33},
	{title: 'dong4', price: 66},

	],
	},
	});

	//v-model 处理用户输入,将输入的内容绑定到变量v-model
	let app3 = new Vue({
	el: '#app3',
	data: {
	mygame: 'dongdong'
	}

	});

	//v-on 按钮事件,v-on:click="函数名称('传入参数')"
	let app4 = new Vue({
	el: '#app4',
	data: {
	game: 'xiao',
	},
	methods: {
	greet: function (name) {
	this.game = name
	}

	}
	});

	//组件
	//定义组件
	Vue.component('meg', {
	// 声明 props
	props: ['game'],
	// 就像 data 一样，prop 可以用在模板内
	// 同样也可以在 vm 实例中像“this.message”这样使用
	template: '<li>{{ game.title }}</li>'
	});

	let app5 = new Vue({
	el: '#app5',
	data: {
	games: [
	{title: 'dong1'},
	{title: 'dong3'},
	{title: 'dong7'},
	{title: 'dong5'},
	],
	},


	});

	//过滤器
	let app6 = new Vue({
	el: '#app6',
	data: {
	message: 'haDhah',
	num: 0.3
	},

	filters: {
	toupper: function (value) {
	return value.toUpperCase();
	},

	topercentage: function (value) {
	return value * 100;
	}


	}
	});

	//计算属性
	let app7 = new Vue({
	el: '#app7',
	data: {
	price: 3000,
	},

	computed: {
	priceIn: function () {
	return this.price * 1.08;
	},

	chinaPrice: function () {
	return Math.round(this.priceIn / 16.75);
	},
	},
	});

	let app8 = new Vue({
	el: '#app8',
	data: {
	price: 20000,
	priceIn: 0,
	chinaPrice: 0,

	},

	watch: {
	price: function (newVal, oldVal) {
	console.log(newVal, oldVal);
	this.priceIn = Math.round(this.price * 1.08);
	this.chinaPrice = Math.round(this.priceIn / 16.75);

	},
	},

	methods: {
	btnClick: function (Newprice) {
	this.price += Newprice;
	}
	}


	});

	//seter设置计算属性

	let app9 = new Vue({
	el: '#app9',
	data: {
	price: 29999,
	},

	computed: {
	priceIn: {
	get: function () {
	return this.price * 1.08;

	},

	set: function (value) {
	this.price = value / 1.08;
	},
	},

	chinaPrice: function () {
	return Math.round(this.priceIn / 16.75);

	},
	},

	methods: {
	btnClick: function (newPrice) {
	this.priceIn = newPrice;
	}
	},
	});

	//class属性绑定　v-bind:class
	let app10 = new Vue({
	el: '#app10',
	data: {
	isActive: false,
	},
	methods: {
	btnClick: function () {
	this.isActive = !this.isActive;
	},
	},
	});

	//class 对象绑定绑定多个类
	let app11 = new Vue({
	el: '#app11',
	data: {
	myClass: {
	textd: true,
	big: true,
	},
	},

	methods: {
	btnClick: function () {
	this.myClass.big = !this.myClass.big;
	this.myClass.textd = !this.myClass.textd;
	},
	},
	});

	//条件渲染v-if v-else-if v-else
	let app12 = new Vue({
	el: '#app12',
	data: {
	dong: 0,
	},
	methods: {
	btnClick: function () {
	this.dong = Math.round(Math.random() * 100);
	},
	},
	});

	//元素显示　v-show

	let app13 = new Vue({
	el: '#app13',
	data: {
	day: true,
	},

	methods: {
	btnClick: function () {
	this.day = !this.day;
	},
	},
	});

	//列表渲染v-for
	let app14 = new Vue({
	el: '#app14',
	data: {
	games: [
	{title: 'dong1', price: 400},
	{title: 'dong2', price: 450},
	{title: 'dong3', price: 460},
	{title: 'dong4', price: 420},
	{title: 'dong5', price: 480},
	],

	dongg: {
	//key:value
	firstName: 'John',
	lastName: 'Doe',
	age: 30,
	},

	},
	});


	//事件处理器v-on
	let app15 = new Vue({
	el: '#app15',
	data: {},
	methods: {
	txtKeyup: function (event) {
	this.debugLog(event);
	},
	btnClick: function (event) {
	this.debugLog(event);
	},
	debugLog: function (event) {
	console.log(
	'id是' + event.target.id,
	'标签名称是' + event.target.tagName,
	'标签内容是' + event.target.innerHTML,
	event.key ? 'key是' + event.key : 'kong',
	);
	},
	},
	});


	//表单空间绑定v-model input
	let app16 = new Vue({
	el: '#app16',
	data: {
	message: "hahah",
	},
	});

	//复选框绑定
	let app17 = new Vue({
	el: '#app17',
	data: {
	checkedGames: []
	}
	});

	//单选框绑定
	let app18 = new Vue({
	el: '#app18',
	data: {
	pickSex: '',
	pickHobby: ''

	}
	});

	//下拉框选择
	let app19 = new Vue({
	el:'#app19',
	data:{
	likedNBA:'',
	likedNBAs:[],
	},
	});

	//表单修饰符
	let app20 =new Vue({
	el:'#app20',
	data:{
	username:'',
	checkUsernameOK:false,
	age:'',
	content:''
	},
	methods:{
	checkUsername:function () {
	if (this.username.length > 0) {
	this.checkUsernameOK = true;
	console.log(this.checkUsernameOK)
	}


	},

	},
	});


	//组件，基础中的基础,全局组件
	Vue.component('today-weather',{
	template:'<div>今天也许会下雨吧</div>'
	});

	let app21 =new Vue({
	el:'#app21',
	});


	//局部组件
	let Weather ={
	template:'<div>今天也许会下雨吧之局部组件</div>'
	};
	let app22 = new Vue({
	el:'#app22',
	components:{
	'today-weather':Weather
	},
	});

	//表行组件，为表格进行注册组件
	Vue.component('my-row1',{
	template:'<tr><td>1</td><td>哈哈1</td></tr>'
	});
	Vue.component('my-row2',{
	template:'<tr><td>2</td><td>哈哈2</td></tr>'
	});
	Vue.component('my-row3',{
	template:'<tr><td>3</td><td>哈哈3</td></tr>'
	});

	let app23 =new Vue({
	el:'#app23'
	});

	//组件传递数据函数

	Vue.component('today-weather',{
	template:'<strong>{{ todayw }}</strong>',
	data:function () {
	return {
	todayw:'雨夹雪',
	};
	}

	});

	let app24 =new Vue({
	el:'#app24'
	});

	//组件中传递数据
	Vue.component('test-result',{
	//１组件中绑定的数据，传递过来
	props:['score'],
	//3对传递过来的数据以及处理的数据传递给模板
	template:'<div><strong>{{ score }}分{{ testResult }}</strong></div>',
	//２对传递过来的数据进行运算逻辑处理
	computed:{
	testResult:function () {
	let stri = "";
	if (this.score < 60)
	stri = "不及格";
	else if (this.score < 90)
	stri = "中等生";
	else if (this.score <= 100)
	stri = "ppp中等生";

	return stri;
	}
	}
	});



	let app25 =new Vue({
	el:'#app25'
	});

	//组件中传递变量

	Vue.component('say-hello',{
	props:['pname'],
	template:'<div>就是{{ pname }}</div>',

	});

	let app26 = new Vue({
	el:'#app26',
	data:{
	myname:'ko',
	},
	});

	//组件验证数据

	Vue.component('show-info',{
	props:{
	name:{
	type:String,
	required:true,
	},
	age:{
	type:Number,
	validator:function (value) {
	return value>= 0 && value <= 130;
	},
	},
	detail:{
	type:Object,
	default:function () {
	return {
	address:'us',
	language:'dong',
	};
	},
	},

	},
	template:'<div>name{{ this.name }}<br/>' +
	'age{{ this.age }}<br/>' +
	'add{{ this.detail.address }}<br/>' +
	'addq{{ this.detail.language }}</div>',

	});


	let app27 = new Vue({
	el:'#app27',
	});

	//组件时间监听，子组件传递数据给父组件


	Vue.component('button-counter', {
	template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
	data: function () {
	return {
	counter: 0
	}
	},
	methods: {
	incrementCounter: function () {
	this.counter += 1;
	this.$emit('increment',{
	dong:30
	})
	}
	},
	});

	let app28 =new Vue({
	el: '#app28',
	data: {
	total: 0,
	dong:66,
	},
	methods: {
	incrementTotal: function (pval) {
	this.total += 1;
	this.dong = pval.dong;

	}
	}
	});

	//slot插槽显示子组件内容，
	Vue.component('say-to',{
	props:['pname'],
	template:'<div>您好，<strong>{{ pname }}</strong>' +
	'<slot></slot>' +
	'</div>',
	});

	let app29 = new Vue({
	el:'#app29',

	});
	//组合slot
	Vue.component('nba',{
	props:['c','pf'],
	template:'<div>' +
	'中锋{{ c }}<br/>' +
	'打钱{{ pf }}<br/>' +
	'小钱1<slot name="sf"></slot><br/>' +
	'小钱2<slot name="sg"></slot><br/>' +
	'小钱3<slot name="pg"></slot><br/>' +
	'</div>',
	});

	let app30 = new Vue({
	el:'#app30',

	});

	//iview,非组件模式

	new Vue({
	el:'#app31',
	data () {
	return {
	loading: false,
	}
	},
	methods: {
	toLoading () {
	this.loading = true;
	},

	}
	});

	//组件模式

	Vue.component('mytem',{

	template:'<Button type="primary">Primary</Button>',
	});

	new Vue({
	el:'#app32',

	});

	//导航栏
	Vue.component('navdong',{

	template:'<Select v-model="model1" style="width:200px">\n' +
	' <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>\n' +
	' </Select>',
	data () {
	return {
	cityList: [
	{
	value: 'beijing',
	label: '北京市'
	},
	{
	value: 'shanghai',
	label: '上海市'
	},
	{
	value: 'shenzhen',
	label: '深圳市'
	},
	{
	value: 'hangzhou',
	label: '杭州市'
	},
	{
	value: 'nanjing',
	label: '南京市'
	},
	{
	value: 'chongqing',
	label: '重庆市'
	}
	],

	}
	}
	});

	new Vue({
	el:'#app33',
	data:{
	model1: ''
	}


	});

	//导航栏
	Vue.component('navdong1',{

	template:' <Menu mode="horizontal" :theme="theme1" active-name="1">\n' +
	' <MenuItem name="1" v-on:click="on-select">\n' +
	' <Icon type="ios-paper"></Icon>\n' +
	' 内容管理\n' +
	' </MenuItem>\n' +
	' <MenuItem name="2">\n' +
	' <Icon type="ios-people"></Icon>\n' +
	' 用户管理\n' +
	' </MenuItem>\n' +
	' <Submenu name="3">\n' +
	' <template slot="title">\n' +
	' <Icon type="stats-bars"></Icon>\n' +
	' 统计分析\n' +
	' </template>\n' +
	' <MenuGroup title="使用">\n' +
	' <MenuItem name="3-1">新增和启动</MenuItem>\n' +
	' <MenuItem name="3-2">活跃分析</MenuItem>\n' +
	' <MenuItem name="3-3">时段分析</MenuItem>\n' +
	' </MenuGroup>\n' +
	' <MenuGroup title="留存">\n' +
	' <MenuItem name="3-4">用户留存</MenuItem>\n' +
	' <MenuItem name="3-5">流失用户</MenuItem>\n' +
	' </MenuGroup>\n' +
	' </Submenu>\n' +
	' <MenuItem name="4">\n' +
	' <Icon type="settings"></Icon>\n' +
	' 综合设置\n' +
	' </MenuItem>\n' +
	' </Menu>\n',
	data () {
	return {
	theme1: 'primary'
	}
	},

	});


	new Vue({
	el:'#app34',


	});