学习自vue官网
vue:构建用户界面的渐进式框架 。
<script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </script >
<script src ="https://cdn.jsdelivr.net/npm/vue" > </script >
*声明式渲染
文本插值
<div id ="app" >
{{ message }}
</div >
var app = new Vue({
el: '#app' ,
data: {
message: 'Hello Vue!'
}
})
v-bind
<div id ="app-2" >
<span v-bind:title ="message" >
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span >
</div >
var app2 = new Vue({
el: '#app-2' ,
data: {
message: '页面加载于 ' + new Date ().toLocaleString()
}
})
*条件与循环
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 : '学习 JavaScript' },
{ text : '学习 Vue' },
{ text : '整个牛项目' }
]
}
})
*处理用户输入
v-on :添加一个事件监听器。
<div id ="app-5" >
<p > {{ message }}</p >
<button v-on:click ="reverseMessage" > 逆转消息</button >
</div >
var 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 >
var app6 = new Vue({
el: '#app-6' ,
data: {
message: 'Hello Vue!'
}
})
*组件化应用构建
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
Vue.component('todo-item' , {
template: '<li>这是个待办项</li>'
})
<ol >
<todo-item > </todo-item >
</ol >
现在是渲染的相同文本,升级一下
<div id ="app-7" >
<ol >
<todo-item
v-for ="item in groceryList"
v-bind:todo ="item"
v-bind:key ="item.id" >
</todo-item >
</ol >
</div >
Vue.component('todo-item' , {
props: ['todo' ],
template: '<li>{{ todo.text }}</li>'
})
var vw = new Vue({
el: '#app-7' ,
data: {
groceryList: [
{ id : 0 , text : '蔬菜' },
{ id : 1 , text : '奶酪' },
{ id : 2 , text : '随便其它什么人吃的东西' }
]
}
})