Vue.js, pronounced like view, is a progressive framework for building user interfaces. It concerns itself with the view layer and follows a bottom-up, incremental design. The goal is to enable reactive data binding and composable view components through APIs that stay as simple as possible.
The first instance is a good place to see those pieces at work. A root instance is attached to an element through el; its data object holds values the template can render and bind, and its methods object holds functions that event handlers can call.
<!-- Development build, includes helpful command-line warnings -->
<script src="https://suiyan.cc/assets/plugins/vue.js"></script>
<div id="v1" v-bind:title="title">
{{ msg }}
<p v-text="vtext"></p>
<div v-html="vhtml" v-on:click="alt"></div>
<input type="text" v-model="tx">
<p v-text="tx"></p>
</div>
<script>
var v = new Vue({
el: "#v1",
data:{
msg:"Hello Vue!",
title:"试试把鼠标放上去。",
vtext:"我是通过v-text绑定的数据",
vhtml:"<h1>哈哈哈字是不是好大？",
tx:"v-model绑定数据，修改试试吧"
},
methods:{
alt :function(){
alert("是不是有提示了？")
}
}
})
</script>
In the template, {{ msg }} is declarative rendering. Instead of manually updating the DOM, you put a template-style binding into the HTML and let the Vue instance provide the value. v-text and v-html are two other forms of data binding: one renders text, the other treats the bound value as HTML. v-bind:title is a Vue directive for binding an attribute, and it has a shorthand form, :title. v-on:click binds a click event; here it invokes the alt method. v-model sets up two-way binding for the text input, so editing the input changes the data and editing the data changes the input.
That small example also hints at MVVM. MVVM is an architectural pattern rather than a framework. It is a way of thinking about and organizing code, using features such as data binding, property dependency, routed events, and commands to produce an architecture that is both efficient and flexible. In MVVM, the View and the View Controller are tied together and can be treated as one component. Neither the View nor the View Controller directly references the Model; instead, they reference a ViewModel. The ViewModel is where the data needed by the View Controller lives—if the View Controller asks for something, the ViewModel is expected to provide it. MVVM adds a little code, but it generally reduces complexity and coupling.
The declaration in a first Vue instance is tiny, yet it already separates the view, the data that drives it, and the behavior attached to it. That separation is what makes the pattern worth understanding before adding more directives, components, or application structure.