MVC4使用VueJS入门

Home视图文件夹

Index.cshtml

@{
    ViewBag.Title = "主页";
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET是一个免费的Web框架，用于构建使用HTML，CSS和JavaScript的优秀Web站点和Web应用程序。</p>
</div>

<div class="row">
    <h1>测试</h1>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <hr />
    <div id="app-1">
        <span v-bind:title="message">
            这是我的消息
        </span>
    </div>
    <hr />
    <div id="app-2">
        <p v-if="vsee">
            vsee: true 时，现在你看到我了！
        </p>
    </div>
    <hr />
    <div id="app-3">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>
    <hr />
    <div id="app-4">
        <p>{{message}}</p>
        <button v-on:click="reseverMessage">反向消息</button>
    </div>
    <hr />
    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message" />
    </div>
    <hr />
    <div id="app-7">
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item">

            </todo-item>
        </ol>
    </div>
    <hr />

</div>

<script>

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li> {{ todo.text }} </li>'
    });

    var v7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { text: 'Vegetables' },
                { text: 'Cheese' },
                { text: 'Whatever else humans are supposed to eat' }
            ]
        }
    })


    var v6 = new Vue({
        el: '#app-6',
        data: {
            message: 'hello vuejs!'
        }
    });
    //-----------------------
    var v4 = new Vue({
        el: '#app-4',
        data: {
            message: 'Hello Vue.js'
        },
        methods: {
            reseverMessage: function () {
                this.message = this.message.split('').reverse().join('');
            }
        }
    });
    //----------------------
    var v3 = new Vue({
        el: '#app-3',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '建立一些炫酷的东西' }
            ]
        }
    });
    //----------------------
    var v2 = new Vue({
        el: '#app-2',
        data: {
            vsee: true
        }
    });
    //-------------------------
    var v1 = new Vue({
        el: '#app-1',
        data: {
            message: '你加载了这个页面在' + new Date()
        }
    });
    //--------------------------
    var v0 = new Vue({
        el: '#app',
        data: {
            message: 'Hello world ^_^'
        }
    });

</script>

DemoVueController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace VueJSDemo.Controllers
{
    public class DemoVueController : Controller
    {
        // GET: DemoVue
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Demo1()
        {
            return View();
        }
    }
}

DemoVue视图文件夹

Index.cshtml

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<h2>观察 Watchers</h2>
<p>watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。</p>
<hr />
<div>
    <div id="watch-example">
        <p>
            询问yes/no问题:
            <input v-model="question">
        </p>
        <p>{{ answer }}</p>
    </div>
</div>

@*既然已经有一个丰富的ajax生态系统和通用有效方法的集合，Vue核心就能通过不重新发明来保持较小的水平。 这也使您可以自由地使用您熟悉的内容。*@
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

<script>
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: '在你提出问题之前，我不能给你答案!'
        },
        watch: {
            //每当问题发生变化时，此功能将运行
            question: function (newQuestion) {
                this.answer = '等待你停止打字...'
                this.getAnswer()
            }
        },
        methods: {
            // _.debounce 是一个通过 lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
            // ajax请求直到用户输入完毕才会发出
            // 学习更多关于 _.debounce function (and its cousin
            // _.throttle), 参考: https://lodash.com/docs#debounce
            getAnswer: _.debounce(
                function () {
                    if (this.question.indexOf('?') === -1) {
                        this.answer = '问题通常包含一个问号. ;-)'
                        return
                    }
                    this.answer = '思索...'
                    var vm = this
                    axios.get('https://yesno.wtf/api')
                        .then(function (response) {
                            vm.answer = _.capitalize(response.data.answer)
                        })
                        .catch(function (error) {
                            vm.answer = '错误！无法访问API. ' + error
                        })
                },
                // 这是我们为用户停止输入等待的毫秒数
                500
            )
        }
    })
</script>

Demo1.cshtml

@{
    ViewBag.Title = "Demo1";
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>


<h2>列表渲染</h2>
<div>
    <ul id="example-1">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </ul>
</div>
<hr />
<div>
    <ul id="repeat-object">
        <h1>对象迭代 v-for</h1>
        <li v-for="pro in myObject">
                {{pro}}
            </li>
        <hr />
        <h2>提供第二个的参数为键名：</h2>
        <li v-for="(value, key) in myObject">
            {{key}} : {{value}}
        </li>
        <h2>第三个参数为索引：</h2>
        <li v-for="(value, key, index) in myObject">
            {{ index }}. {{ key }} : {{ value }}
        </li>
    </ul>
</div>

<hr />

<div>
    <input placeholder="输入任何你想要的东西" />
</div>
<div id="todo-list-example">
    <input v-model="newTodoText"
           v-on:keyup.enter="addNewTodo"
           placeholder="添加一个todo">
    <ul>
        <li is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:key="todo"
            v-bind:title="todo"
            v-on:remove="todos.splice(index, 1)"></li>
    </ul>
</div>
<script>

    Vue.component('todo-item', {
        template: `
        <li>
          {{ title }}
          <button v-on:click="$emit('remove')">X</button>
        </li>
      `,
    props: ['title']
    })
    var vtodo = new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                '做菜',
                '把垃圾带出去',
                '割草坪'
            ]
        },
        methods: {
            addNewTodo: function () {
                this.todos.push(this.newTodoText)
                this.newTodoText = ''
            }
        }
    })
    //---------------------------------------------
    var myVue = new Vue({
        el: '#repeat-object',
        data: {
            myObject: {
                姓: '东',
                名: '特兰坦',
                age: 32,
                是否结婚: true,
                小孩: 1
            }
        }
    })

    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })

</script>

运行结果如图:

---

---