Preface
Vue.js is a data-driven web interface library. Vue.js focuses only on view layers and can be easily integrated with other libraries. The code is only 24kb after compression.
The following code is the simplest example of Vue.js. When the content in input changes, the content of the p node will change accordingly.
<!-- html --><div id="demo"> <p>{{message}}</p> <input v-model="message"></div>new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' }})Basic syntax of vue.js
Insert text
<span>Message: {{ text }}</span>Insert text in html format and display it in html format on the page
<span>Message: {{{ html }}}</span>Content does not follow the changes in data
<span>Message: {{ * text }}</span>Bind data on properties
<div id="item-{{ id }}"></div>Using js expressions in {{}}
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}Using js statements in {{}}
{{ var a = 1 }}{{ if (ok) { return message } }}if command
<p v-if="greeting">Hello!</p> Here the v-if directive will delete/insert the <p> element according to the authenticity of the expression greeting value.
href directive
<a v-bind:href="url"></a>or <a href="{{url}}"></a>Click command
<a v-on:click="doSomething">
Enter command
<input v-model="newTodo" v-on:keyup.enter="addTodo">
Abbreviation
v-bind
<!-- Complete syntax--><a v-bind:href="url"></a><!-- Abbreviation--><a :href="url"></a><!-- Complete syntax--><button v-bind:disabled="someDynamicCondition">Button</button><!-- Abbreviation--><button :disabled="someDynamicCondition">Button</button>
v-on
<!-- Complete syntax--><a v-on:click="doSomething"></a><!-- Abbreviation--><a @click="doSomething"></a>
Summarize
Expressions in templates are very convenient, but they are actually only used for simple operations. The template is to describe the structure of the view. Putting too much logic into a template can make the template too heavy and difficult to maintain. This is why Vue.js restricts binding expressions to one expression. If more than one expression is required, computed properties should be used. The editor will update how to use the computed attributes later. Interested friends, please continue to pay attention to Wulin.com.