Vue.js 是一套构建用户界面的渐进式框架
快速开始 引入vue.js 即可
<script src="https://unpkg.com/vue/dist/vue.js"></script>
下载下来 保存到本地 运行更快
声明式渲染
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
v-bind:属性="变量"
<span v-bind:title="message"></span>
data: {
message: '页面加载于 ' + new Date()
}
条件 v-if
<p v-if="seen">现在你看到我了</p>
data: {
seen: true
}
<li v-for="todo in todos">{{ todo.text }}</li>
绑定点击事件
<button v-on:click="reverseMessage"></button>
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
v-model 指令 实现表单输入和应用状态之间的双向绑定
<p>{{ message }}</p>
<input v-model="message">
data: {
message: 'Hello Vue!'
}
<div id="app">
<p>{{ message }} </p>
<input type = "text" v-on:keyup="test" ref="input"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
test: function () {
this.message = this.$refs.input1.value;
}
var vm = new Vue({
// 选项
})
在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
扩展 Vue 构造器
var MyComponent = Vue.extend({
// 扩展选项
})
var myComponentInstance = new MyComponent()
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
created 这个钩子在实例被创建之后被调用
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
mounted、updated、destroyed