Vue (pronounced /vjuː/, similar to view ) is a progressive framework for building user interfaces . Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries , Vue is also fully capable of powering complex single-page applications.
Vue is declarative rendering (1) var passes a new vue object to obtain el through the id in html to obtain the #id value app date to obtain the massage attribute This forms a simple vue text insertion (2) We can also bind The way to obtain vue is also through var through a new vue object to obtain the id through html. In html, through span v-bind: title=“massage” hovering over the mouse to view the dynamic binding prompt information It is best to obtain the message through date new date().tolocalestring in get the time in the way of binding elements we apply the v-bind special instruction
Directives are prefixed v-to indicate that they are special features provided by Vue. As you might have guessed, they apply special reactive behaviors on the rendered DOM. Here, the directive means: "align the properties of this element node with the title properties of the Vue instance message ".
If you open your browser's JavaScript console again, type app2.message = '新消息', you'll again see that title the HTML with the attribute bound has been updated.
conditional loop
In the same way, generate a new vue through var and obtain it through html. Create an attribute through v-if and obtain the id value date through el { obtain the attribute in v-if and judge true flase}
Continue typing in the console app3.seen = falseand you will find that the previously displayed message disappears.
This example demonstrates that we can bind data not only to DOM text or attributes, but also to DOM structure . In addition, Vue also provides a powerful transition effect system, which can automatically apply transition effects when Vue inserts/updates/removes elements .
v-for Directives can bind array data to render a list of items:
v-for through the html list tag tode in todes{ tode.text}
Handling user input
In order for the user to interact with your application, we can v-on add an event listener with the directive, which calls a method defined in the Vue instance:
<div id="app-5"> <p>{{ message }}</p><buttonv-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('') } }}) |
Hello Vue.js!
reverse newsNote that in the reverseMessage method, we update the state of the application without touching the DOM - all DOM manipulation is handled by Vue, and the code you write only needs to focus on the logic level.
Vue also provides v-model directives that make it easy to implement two-way binding between form inputs and application state.
