Vue.js之Hello Vue！
2017-01-08 本文已影响164人
dongwenbo
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
引入Vue.js
在<head>中加入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>中为
<div id = "app">
{{msg}}
</div>
js文件中为
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!'
}
})
打开html文件
Hello Vue!
el中为一个选择器，表示id为app的DOM元素，{{msg}}是一个模板标签，和data中的msg绑定，打开后，{{msg}}内容会被替换成Hello Vue!，这种绑定是双向绑定。所有元素都是响应式的。
除了绑定文本标签{{msg}}，还可以绑定html标签的属性
html中
<div id="app">
<span v-bind:title="msg">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
js中
var app = new Vue({
el: '#app',
data: {
msg: 'You loaded this page on ' + new Date()
}
})
打开html
v-bind属性称为指令，v-开头。这个指令的简单含义是说：将这个元素节点的 title属性和 Vue 实例的 msg属性绑定到一起。
条件和循环
使用v-if来控制元素的是否显示
<div id="app">
<span v-if="seen">
你看不见我
</span>
</div>
var app = new Vue({
el: '#app',
data: {
seen: false
}
})
打开html
什么都没有
我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据
使用v-for进行元素循环
<div id="app">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
1、Learn JavaScript
2、Learn Vue
3、Build something awesome
处理用户输入
使用v-on绑定事件
<div id="app">
<p>{{msg}}</p>
<button v-on:click="reverseMsg">点击</button>
</div>
var app = new Vue({
el: '#app',
data: {
msg:"Vue.js!"
},
methods:{
reverseMsg:function () {
this.msg = "Hello " + this.msg
}
}
})
在
reverseMsg方法中，我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。
使用v-model进行双向绑定
<div id="app">
<p>{{msg}}</p>
<input v-model="msg">
</div>
var app = new Vue({
el: '#app',
data: {
msg:"Hello Vue.js!"
}
})
