Vue基础代码学习

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome my docker test and vue</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div id="app">
    {{message}}
    <ul>
        <li v-for="(item,index) in movies">{{index}} {{item}}</li>
    </ul>
    <h1>當前計數 {{counter}}</h1>
    @*<button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>*@

    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <button v-on:click="eventTest('aaa',$event)">event</button>
    @*<button v-on:click.stop="eventTest('aaa',$event)">event</button>*@

    <h1>{{url}}</h1>
    <h1 v-html="url"> v-html </h1>
    <h2 v-text="message">v-text </h2>
    <h2 v-pre>v-pre {{message}}</h2>
    <img v-bind:src="imageurl" style="width:150px;height:100px" />
    <a :href="ahref">百度一下   </a>
    <h2>{{fullName}}</h2>
    <h2>{{fullName1}}</h2>
    <h2> 總價格  {{totalPrice}}</h2>

    <h2 v-show="isShow" class="bg-danger">v-show {{messageShow}}</h2>

    <h2 v-if="isShow" class="bg-danger">v-if  {{messageShow}}</h2>

    <h2 v-else class="bg-primary">{{messageHide}}</h2>

    <span v-if="isUser">
        <label for="UserName">用戶帳號</label>
        <input type="text" id="UserName" placeholder="用戶帳號" />
    </span>
    <span v-else>
        <label for="UserMail">用戶郵箱</label>
        <input type="text" id="UserMail" placeholder="用戶郵箱" />
    </span>
    <button v-on:click="isUser = !isUser">更換賬號</button>

    <ul>
        <li v-for="(value,key,index) in info ">{{index+1}}  {{key}}  {{value}}</li>
    </ul>

    <input type="text" v-model="message" />
</div>

<div id="echartColock" style="width: 900px;height:900px;">

</div>

<script src="~/js/vue.js"></script>
<script src="~/js/echarts.js"></script>

<script>
    const obj = {
        counter:0
    }
    const nums = [10, 30, 102, 150, 23, 400, 43, 55, 156]
    let newNums = nums.filter(function (n) {
        return n < 100
    })
    console.log(newNums)

    let NewNums1 = nums.filter(n=> n<100)
    console.log(NewNums1)

    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello easyboot',
            movies: ['大話西遊', '盜夢空間', '黑客帝國', '美麗人生'],
            counter: 0,
            url: '<a href="www.baidu.com">百度一下</a>',
            imageurl: '/image/chinaflag.jpg',
            ahref: 'https://www.baidu.com',
            firstName: 'easy',
            lastName: 'boot',
            books: [
                { Name: 'C#高級編程', price: 120 },
                { Name: 'asp.net core 核心揭祕', price: 140 },
                { Name: 'bootstrap入門到精通', price: 110 },
                { Name: 'vue項目實踐', price: 130 },
            ],
            isShow: true,
            messageShow: 'v-if 爲true 顯示',
            messageHide: 'v-if 爲false 顯示',
            isUser: true,
            info: {
                name: 'easyboot',
                age: 18,
                height:1.88
            }
        },
        computed: {
            fullName: function () {
                return this.firstName + this.lastName;
            },
            fullName1: {
                get: function () {
                    return this.firstName + this.lastName;
                }
            },
            totalPrice: function () {
                let total = 0;
                //for (let i = 0; i < this.books.length; i++) {
                //    total += this.books[i].price;
                //}

                for (let book of this.books) {
                    total += book.price;
                }
                return total;
            },

        },
        methods: {
            add: function () {
                console.log('aaa')
                this.counter++
            },
            sub: function () {
                this.counter--
            },
            eventTest: function (abc, event) {
                console.log('aaaa', abc, event)
            },
            changeUser(){
                console.log('changeUser')
                 this.isUser = !this.isUser;
               // return isUser;
            }
        }
    })
</script>