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<
·
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>
运行结果如图:
更多推荐
已为社区贡献11条内容
所有评论(0)