您的位置：首页 > 产品设计 > UI/UE

初识Vue.js

2017-02-24 20:35 363 查看

前端的优秀框架有许多，这里我选了一个比较容易入门的Vue.js来玩一下，第一次接触的话，发现这个框架非常的简单实用，使用起来非常的方便。

这里我们只要上官网上下载一个Vue.js就可以直接利用 <script src="./vue-dev/dist/vue.min.js"></script>来引用了。

<html>
<head>

</head>
<body>
<!--这里直接可以使用模板-->
<div id="app">
{{message}}
</div>
<!--这里直接可以使用v-bind绑定title元素
而且是响应式的-->
<div id="app2">
<span v-bind:title="message">
ni hao!
</span>
</div>
<!--这里直接可以通过js代码来控制是否显示这个
p标签-->
<div id="app3">
<p v-if="seen">Now you see me</p>
</div>
<!--这里直接可以通过js里面定义一个数组数据，直接就可以
在这里使用模板提取-->
<div id="app4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<!--这里直接绑定click事件-->
<div id="app5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<!--这里直接绑定message变量来达到数据的双向流动-->
<div id="app6">
<p>{{message}}</p>
<input v-model="message">
</div>
<!--这里直接可以根据循环和绑定来达到动态的显示一组数据-->
<div id="app7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
</body>
<script src="./vue-dev/dist/vue.min.js"></script>
<script src="./index.js"></script>
</html>

var app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
});

var app2 = new Vue({
el: '#app2',
data:{
message:'You loaded this page on '+new Date()
}
});

var app3 = new Vue({
el:'#app3',
data:{
seen:true
}
});

var app4 = new Vue({
el:'#app4',
data:{
todos:[
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});

var app5 = new Vue({
el:'#app5',
data:{
message:'Hello Vue.js'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('');
}
}
});

var app6 = new Vue({
el:"#app6",
data:{
message:'Hello Vue'
}
});

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

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

效果如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 框架 vuejs 前端

相关文章推荐

新的分享

章节导航