Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
Vue 的核心只关注视图层。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM,指令带有前缀 v-,以表示它们是Vue 提供的特殊属性。
{{…}}(双大括号) | 文本插入值 |
v-html | 输出html 代码 |
v-bind | HTML 属性中的值 |
v-if | true 或false 决定是否插入值 |
v-on | 监听DOM 事件,并对用户的输入进行相应。 |
v-model | 双向数据绑定 |
{{ message | capitalize }} | 过滤器 |
缩写 | a v-bind:href=”url” —-a :href=”url” / v-on:click —@click |
<div id="app" v-bind:title="titleMessage">
{{message}}
<p v-if="seem">如果true 可见,false 隐藏</p>
<label for="r1">change background</label>
<input type="checkbox" id=r1 v-model="check">
<br><br>
<div v-bind:class="{'changeColor':check}">
add background
</div>
<!-- Vue.js 提供完全的JavaScript 表达式支持 -->
{{message.split('').reverse().join('')}}
<!-- v-model 双向绑定 -->
<br>
<input v-model="modelMessage"><br>
{{modelMessage}}
<button v-on:click="reverseMessage">reverse</button>
</div>
<script>
new Vue({
el: '#app',
data:{
message: "Hello Vue.js",
modelMessage: "hello",
titleMessage: "loding "+new Date(),
seem:true,
check:false
},
methods:{
reverseMessage:function(){
this.modelMessage = this.modelMessage.split('').reverse().join('')
}
}
})
</script>
组件化应用构建
组件系统是Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、自包含合通常可复用的组建构建大型应用。
<div id="app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
b-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item',{
props: ['todo'],
template: '<li>{{todo.text}}</li>'
})
var app=new Vue({
el: '#app',
data:{
groceryList:[
{id:0,text:'蔬菜'},
{id:1,text:'奶酪'},
{id:2,text:'随便'}
]
}
})
</script>
props 接口实现了与父单元很好的解耦