标签：输入 index ges 库文件 https 效果 onload bar images
一、什么是Vue.js
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
二、入门
引入类库文件：<script src="https://unpkg.com/vue/dist/vue.js"></script>
第一个demo:
html:
<div id="app">
<p>{{ message }}</p>
</div>
js:
onload = function () {
new Vue({
el:"#app",
data:{
message:"hello world"
}
});
}
结果： hello world
三、使用
1、双向绑定
html:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js同上。
效果：当文本框里面的东西改变时，p标签的内容也改变。
2、列表渲染
html:
<ul id="example-1">
<li v-for="item in items">
{{item.message}}
</li>
</ul>
js:
onload = function () {
var example1 = new Vue({
el: ‘#example-1‘,
data: {
items: [
{ message: ‘Foo‘ },
{ message: ‘Bar‘ }
]
}
})
}
结果：
3、处理用户输入
html:
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverseMessage">翻转</button>
</div>
js：
onload = function () {
new Vue({
el: "#app",
data: {
message: "hello world"
},
methods: {
reverseMessage: function () {
this.message=this.message.split(‘‘).reverse().join(‘‘)
}
}
});
}
结果：当点击按钮的时候字母就可以翻转
4、以上综合
html：
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo" />
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
js:
onload = function () {
new Vue({
el: "#app",
data: {
newTodo: "",
todos: [
{ text: "add some todos" }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ""
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)//splice(删除的位置，删除的数量)
}
}
});
}
效果：
标签：输入 index ges 库文件 https 效果 onload bar images
原文地址：http://www.cnblogs.com/ruanmou/p/6413368.html
