The main content of this weekly diary is Vue js
Including Vue JS and Vue JS template syntax
1, Vue JS start
① Each Vue application needs to be implemented by instantiating Vue.
The syntax format is as follows:
var vm = new Vue({
//Options
})
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "Rookie tutorial",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - Learning is not only technology, but also a dream!";
}
}
})
</script>
</body>
</html>
Operation results
As can be seen from the above example, there is an el parameter in the Vue constructor, which is the id in the DOM element.
In the above example, the id is vue_det, in div element:
< div id = "vue_det">< /div>
② When a Vue instance is created, it adds all the attributes that can be found in its data object to Vue's responsive system. When the values of these attributes change, the html view will also change accordingly.
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// Our data objects
var data = { site: "Rookie tutorial", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
// They reference the same object!
document.write(vm.site === data.site) // true
document.write("<br>")
// Setting properties also affects the original data
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
// ... and vice versa
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
</body>
</html>
Operation results
③ In addition to data properties, Vue instances also provide some useful instance properties and methods. They are prefixed with $, to distinguish them from user-defined attributes.
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// Our data objects
var data = { site: "Rookie tutorial", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
</body>
</html>
Operation results
2, Vue JS template syntax
1. Interpolation
① Text interpolation
The most common form of data binding is text interpolation using {{...}} (double braces)
example
<html>
<head>
<meta charset="utf-8">
<title>Vue example</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
Operation results
② HTML interpolation
Use the v-html instruction to output HTML code
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>use v-html Instruction for output html code</h1>'
}
})
</script>
</body>
</html>
Operation results
③ Attribute interpolation
The value in the HTML attribute should use the v-bind instruction
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example - Rookie tutorial(runoob.com)</title>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">Modify color</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class instructions
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
</body>
Operation results
The instance judges the value of use. If it is true, use the style of class 1; otherwise, do not use this class.
2. Instruction
Instructions are special attributes with a v-prefix.
Directive is used to apply certain behaviors to the DOM when the value of an expression changes.
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">Now you see me</p>
<template v-if="ok">
<h1>example</h1>
<p>function</p>
<p>Ha ha ha</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
Operation results
Here, the v-if instruction will decide whether to insert the p element according to the value of the expression see (true or false).
① Parameters
Parameters are indicated by a colon after the instruction. For example, the v-bind instruction is used to update HTML attributes in response.
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<pre><a v-bind:href="url">Rookie tutorial</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
</body>
</html>
Operation results
Click to jump to this page
Here, href is a parameter that tells the v-bind instruction to bind the href attribute of the element to the value of the expression url.
② Modifier
The modifier is a half angle period Indicates the special suffix used to indicate that an instruction should be bound in a special way. For example The prevent modifier tells the v-on instruction to call event for the triggered event preventDefault():
< form v-on:submit.prevent="onSubmit">< /form>
3. User input
In the input box, we can use the v-model instruction to implement bidirectional data binding.
example
<html>
<head>
<meta charset="utf-8">
<title>Vue Test example - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
</body>
</html>
Operation results
The v-model instruction is used to create two-way data binding on form control elements such as input, select, textarea, checkbox and radio, and automatically update the value of the bound element according to the value on the form.