vue.js的简单应用

test.cshtml

@{
    ViewData["Title"] = "Test";
    Layout = null;
    // Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/plugins/vue/vue.js"></script>
<h1 class="text-white">Test</h1>
<div id="app" class="text-white">
    <p>
        <span>{{message}}</span>
    </p>
    <p>
        <span>{{name}}</span>
    </p>
    <p>
        <span>{{counter}}</span>
    </p>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            message: "this is a test",
            name: "test",
            counter:0
        },
        methods: {
            add: function () {
                this.counter++;
            },
            sub: function () {
                this.counter--;
            }
        }
    })
</script>

另外一种写法 

其中有v-bind v-on 的使用方法

@{
    ViewData["Title"] = "Test";
    Layout = null;
    // Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/plugins/vue/vue.js"></script>
<h1 class="text-white">Test</h1>
<div id="app" class="text-white">
    <p>
        <span>{{name}} {{message}}</span>
    </p>
    <p>
        <span v-bind:class="text_bg">{{name}}</span>
    </p>
    <p>
        <span>{{name+counter}}</span>
    </p>
    <img :src="image" style="width:200px;height:200px" />
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <button v-on:click="change">change</button>
</div>
<script type="text/javascript">
    const obj = {
        message: "this is a test",
        name: "test",
        counter: 0,
        image: "https://cn.bing.com/th?id=OHR.MontBlancPeak_ZH-CN0459151326_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
        text_bg:"text-red",
    }
    const app = new Vue({
        el: "#app",
        data: obj,
        //{
        //    message: "this is a test",
        //    name: "test",
        //    counter:0
        //},
        methods: {
            add: function () {
                this.counter++;
            },
            sub: function () {
                this.counter--;
            },
            change: function () {
                if (this.text_bg != "text-green") {
                    this.text_bg = "text-green";
                } else {
                    this.text_bg = "text-red";
                }
                
            }
        },
        created: function () {
            console.log('created')
        },
        mounted: function () {
            console.log('mounted')
        }
    })
</script>