Basic syntax for vUE introductory tutorial

Welcome to pay attention to the blogger public number “Java master”, focus on sharing the Java field dry goods article, pay attention to reply to “resources”, free to receive the network’s hottest Java architect study PDF, reproduced please specify the source www.javaman.cn/vue/vue-if-…

In the last section we looked at the MVVM framework and the Hello-Vue example that implements the simplest VUE. Today we continue with the basic syntax of Vue

1. V-model (V-model directive to achieve bidirectional binding between form elements and data. Listen for user input and update the data)

(1) Introducing vue.js–Vue. Min.js is introduced through CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>- the CDN is introduced into the vue. Min. JsCopy the code
(2) the HTML code

Bind data’s message via v-model

(3) The running results are shown as follows:

Conditional statement (v-if v-else-if v-else)

(1) Introducing vue.js–Vue. Min.js is introduced through CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>- the CDN is introduced into the vue. Min. JsCopy the code
(2) the HTML code

According to the score, the examinee is judged to be excellent, pass or fail

	<div id="app">
        <p v-if="score>=90"> good < /p>
        <p v-else-if="score>=60&&score<90< / "> to pass the examp>
        <pV-else > fail </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> #app", data:{ score:94 } }); Copy the code
(3) The running results are shown as follows:

(4) Dynamically modify the contents of the viewModel, and the page elements change accordingly

3. Loop statements (V-for)

(1) Introducing vue.js–Vue. Min.js is introduced through CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>- the CDN is introduced into the vue. Min. JsCopy the code
(2) the HTML code

According to the score, the examinee is judged to be excellent, pass or fail

	<div id="app">
        <li v-for="item in courses">{{item}}</li>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> #app", data:{select * from (select * from (select * from (select * from (select * from (select * from (select * from)))}}); Copy the code
(3) The running results are shown as follows: