声明式渲染
文本插值
<div id="app">
{{msg}}
</div>
var app=new Vue({
el:'#app',
data:{
msg:'Hello'
}
})
v-bind 指令
注:v-bind:title 将这个元素节点的title特性和Vue实例的msg属性保持一致,title显示的值就是msg的属性值
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。
在没有指定区域的基本使用时,返回使用默认的语言环境和默认选项格式化的字符串。
条件与循环
v-if
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
v-for
<div id="app-4">
// 有序列表
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Vue' },
{ text: 'React' },
{ text: 'Angular' }
]
}
})
处理用户输入
v-on
<div id="app-5">
<p>{{ msg }}</p>
<button v-on:click="reverseMsg">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
msg: 'Hello'
},
methods: {
reverseMsg: function () {
// 先变成数组--翻转数组--转化为字符串
this.msg = this.msg.split('').reverse().join('')
}
}
})
v-model
实现表单输入和应用状态之间的双向绑定
<div id="app-6">
<p>{{ msg }}</p>
<input v-model="msg">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
msg: 'Hello'
}
})
组件化应用创建
在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例
注册组件
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{todo.text}}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
list: [
{ id: 0, text: 'VUE' },
{ id: 1, text: 'REACT' },
{ id: 2, text: 'ANGULAR' }
]
}
})
构建另一个组件模版
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item>
v-for="item in List"
v-bind:todo="item"
v-bind:key="item.id"
</todo-item>
</ol>