Two small cases
for loop in Vue
We want to achieve a function like this:
The text in an array is traversed and a corresponding number of li tags are created. Then, the text is assigned to the li tag:
Native JS imperative writing:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test Vue The second example</title>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul id="ul"></ul>
</div>
<script type="text/javascript">
var infos = [
'The Dream of Red Mansion',
'Romance of the Three Kingdoms',
'Water Margin',
'Journey to the West'
]
var mUl = document.getElementById('ul')
for(var i = 0 ;i < infos.length ;i++){
var li = document.createElement('li')
li.innerText = infos[i]
mUl.appendChild(li)
}
</script>
</body>
</html>
Using the Vue Response Formula:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test Vue The second example</title>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="info in infos">{{info}}</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
infos: [
'The Dream of Red Mansion',
'Romance of the Three Kingdoms',
'Water Margin',
'Journey to the West'
]
}
})
</script>
</body>
</html>
Click events in Vue
We want to achieve such a function:
Click the Add button to add the number on the page.
Click the Reduce button to reduce the number in the page:
Implementing native JS imperative:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test Vue First example</title>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="app">Current quantity <span style="color:red">0</span></h1>
<button type="button">increase</button>
<button type="button">reduce</button>
<script type="text/javascript">
var mSpan = document.getElementById('app').children[0]
var button = document.getElementsByTagName('button')
button[0].onclick = function() {
mSpan.innerText = parseInt(mSpan.innerText) + 1
}
button[1].onclick = function() {
mSpan.innerText = parseInt(mSpan.innerText) - 1
}
</script>
</body>
</html>
Look again at the implementation of the Vue response:
Core code:
<div id="app">
<h1>Current quantity <span style="color:red">{{count}}</span></h1>
<button type="button" v-on:click="count++">increase</button>
<button type="button" v-on:click="count--">reduce</button>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
count: 0
}
})
</script>
Well, is it much simpler? Or is the amount of code written much less?
After that, I will continue to share some learning notes and so on.
END