Vue
采用简洁的模板语法来，声明式地将数据渲染进去DOM系统：
< div id = "app">
{ {message} }
</div>
let app = new Vue ({
el : '#app',
data:{
message:' Hello Vue! '
}
})
这就创建了一个 VUE 应用！ 看起来这跟 渲染一个 字符串模板 非常类似，但是 Vue 做了大量的工作，现在数据和DOM 已经被建立了关联，所有东西都是响应式的。
在 javaScript 控制台，并修改 app.message 的值，上面例子的 值 也会发生改变。
绑定元素的 特性
v - bind
<div id = ' app - 2 '>
<span v - bind:title = ' message '>
//鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el : '#app2',
data : {
message : ' 页面加载与 ' + new Date() . toLocaleString()
// 现在的时间 转换了 时间格式。
}
})
条件 与 循环
控制切换一个元素是否显示。
v - if
<div id = "app-3">
<p v - if = "seen"> 现在你看到我了 </p>
</div>
let app3 = new Vue({
el : ' #app - 3 ',
data:{
seen : true
}
})
// 在 控制台 输入 app3.seen = false.
显示的信息消失、
vue 不仅可以 把 数据 绑定到 DOM 文本或特性， 还可以 绑定到 DOM 结构，此外，Vue 也提供，一个强大的 过渡效果系统，可以在 Vue 插入 更新 移除 元素 时 自动应用，过渡效果。
指令 ：
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 : ' 学习 JavaScript ' },
{ text : ' 学习 Vue ' },
{ text: '整个牛项目 ' }
}
}
})
在控制台 ，输入 app4.todos.push( text: ' 新项目 ' ) ， 添加了新项目。
处理用户输入
v-on 添加一个事件监听器， 调用 它在 Vue 中 定义的方法：
<div id = "app-5">
<p>
{{ message }}
</p>
<button v - on : click = ' reverseMessage '>
逆转消息
</button>
</div>
let app5 = new Vue({
el : '#app-5',
data: {
message: ' Hello Vue.js! '
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
v - model 指令 ， 它能轻松实现 表单输入 和 应用状态之间的 双向绑定。
<div id = "app-6">
<p> {{message}}</p>
<input v-model =" message ">
</div>
let app6 = new Vue({
el : ' #app-6 ',
data : {
message : ' Hello Vue ! '
}
})
组件化应用构建
<ol>
// 创建 一个 todo - item 组件的 实例
<todo-item></todo-item>
</ol>
Vue.component ( 'todo-item',{
template : ' <li> 这是谁啊？ </li>'
} )
网友评论