介绍
Vue.js是什么
Vue是一套用于构建用户界面的渐进式框架。Vue被设计为自底向上逐层应用，Vue的核心库只关注视图层。
起步
使用Vue首先引入
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染 {{}}
Vue.js的核心是一个允许采用模板语法声明式地将数据渲染进DOM
<div id="app-1">
{{message}}
</div>
// 现在数据和 DOM 已经被建立了关联，所有东西都是响应式的
var app1 = new Vue({
el:"#app-1",
data:{
message:"Hello Vue"
}
})
绑定元素属性 v-bind
<div id="app-2">
<span v-bind:title="message2">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
// v-bind 特性被称为指令。指令带有前缀 v- ， 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
var app2 = new Vue({
el:"#app-2",
data:{
message2:"页面加载于" + new Date().toLocaleString()
}
})
条件与循环 v-if 和 v-for
<div id="app-3">
<p v-if="message3">true显示，false隐藏</p>
</div>
var app3 = new Vue({
el:"#app-3",
data:{
message3:true
}
})
// app4.todoList.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
<div id="app-4">
<ol>
<li v-for="item in todoList">
{{item.text}}
</li>
</ol>
</div>
// v-for 指令可以绑定数组的数据来渲染一个项目列表
var app4 = new Vue({
el:"#app-4",
data:{
todoList:[
{text:"1"},
{text:"2"},
{text:"3"}
]
}
})
绑定事件监听 v-on:click
<div id="app-5">
<p>{{message5}}</p>
<button v-on:click="clickButton"></button>
</div>
// v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
var app5 = new Vue({
el:"#app-5",
data:{
message5:"Hello Vue"
}
methods:{
clickButton:function(){
this.message5 = "Hello Vue Js"
}
}
})
数据双向绑定 v-model
<div id="app-6">
<p>{{message6}}</p>
<input v-model="message6">
</div>
// v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
var app6 = new Vue({
el:"#app-6",
data:{
message6:"Hello Vue"
}
})
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
网友评论