1.v-html
The double brace syntax does not render HTML tags, so we need to use V-HTML.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app01">
<div v-html="vue"></div>
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01".data: {
vue: 'Hello Vue!
'}})</script>
</body>
</html>
Copy the code2.v-text
Another way to render data with a syntax similar to the double brace syntax is to use V-text
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app01">
<div v-text="name"></div>
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01".data: {
name: "dogfa"}})</script>
</body>
</html>
Copy the code3.v-for
For array and object rendering (v-for and V-if need to be used separately)
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src=".. /vue template syntax interpolation /vue.js"></script>
</head>
<body>
<div id="app01">
<h2>Dogfa hobby</h2>
<ul>
<li v-for="item in qianqian">{{ item }}</li>
</ul>
<h2>Students' hobbies</h2>
<ul>
<li v-for="stu in students">{{stu.name}} is {{stu.hobby}}.</li>
</ul>
</div>
<script>
let app01 = new Vue({
el: "#app01".data: {
qianqian: [
"Learning"."Go shopping"."Nail"].students: [{name: "dogfa".hobby: "girls"
},
{
name: "djb".hobby: "girls"
},
{
name: "oldniu".hobby: "study"}]}})</script>
</body>
</html>
Copy the code3.v-if
When rendering data, you can also use conditional judgments to control the display of tags. V-if adds tags through judgments. The underlying implementation is appendChild
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<div v-if="role == 'shanshan'">
<h2>Welcome little beauty</h2>
</div>
<div v-else-if="role == 'longting'">
<h2>Welcome xiaolongnu</h2>
</div>
<div v-else>
<h2>Roll ~ ~ ~</h2>
</div>
</div>
<script>
// Notice that the HTML tag element is implemented using appendChild at the bottom of v-if
let app01 = new Vue({
el: "#app01".data: {
role: "shanshan"}})</script>
</body>
</html>
Copy the code4.v-show
Unlike V-if, V-show controls the display of the label through style display
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<h1 v-show="isShow">Hello Vue!</h1>
</div>
<script>
// V-show is implemented by controlling the style of display
let app01 = new Vue({
el: "#app01".data: {
isShow: true}})</script>
</body>
</html>
Copy the code5.v-bind
Binding properties, so without further ado, notice that the colon is followed by the attribute of the tag, and the equals sign after the attribute refers to the data, which can be abbreviated as :class, :href.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style>
.active {
background-color: #2b84da;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<a v-bind:href='link' v-bind:class="{active: isActive}">Go to baidu</a>
</div>
<script>
// Bind attributes, short colon:
let app01 = new Vue({
el: "#app01".data: {
link: "https://www.luffycity.com".isActive: true}})</script>
</body>
</html>
Copy the code6.v-on
Another very important instruction is v-on. With V-ON we can bind events to tags. Notice that in our new vue instance app01 we have added a property called methods
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<! -- Bind an event -->
<a v-bind:href='link'
v-bind:class="{active: isActive}"
v-on:click="myClick"
>Go to baidu</a>
<! -- Bind multiple events -->
<button v-on="{click: myClick, mouseenter: mouseEnter, mouseleave: mouseLeave}">I'll have chicken tonight</button>
</div>
<script>
// Bind attributes, short colon:
let app01 = new Vue({
el: "#app01".data: {
link: "https://www.baidu.com".isActive: false
},
methods: {
myClick: function () {
console.log("Good luck, chicken tonight ~~~")},mouseEnter: function () {
console.log("Here comes the mouse.");
},
mouseLeave: function () {
console.log("Mouse gone ~~~"); }}})</script>
</body>
</html>
Copy the code7.v-model
After we modify the data, the modified data in a timely manner (officially called reactive) rendering the template layer, so, if you have such demand, such as an input tag, when the user modify the rendering of the original data, print the revised data, in a nutshell, we need the vue instance can help us to render data and responsive to monitor data changes, At the same time, we also need to monitor the user behavior. If the user has modified the data on the tag (the previous modification refers to the data modification made by vUE instance APP01), we need to obtain the data. For this requirement, we can use the V-mode command.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app01">
<p>Please choose your gender</p>
<br>
<input v-model="name"/>
<p><input type="text" v-model="name"/></p>
<p>
<input type="checkbox" value="Male" v-model="gender"/>
<input type="checkbox" value="Female" v-model="gender"/>
</p>
<br>
{{ name }}
{{ gender }}
<p>Please choose your girlfriend</p>
<select name="" id="" v-model="girlFriends">
<option>dogfa</option>
<option>djb</option>
<option>oldniu</option>
</select>
<br>
{{ girlFriends }}
<p>
<textarea v-model="article"></textarea>
</p>
<br>
{{ article }}
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01".data: {
name: "dogfa".gender: [].girlFriends: [].article: "This is an article.",}})</script>
</body>
</html>
Copy the code8. Instruction modifiers
The user can enter any data type, but sometimes we need to restrict the data type that the user enters by adding the number modifier to the instruction.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<table border="1">
<thead>
<tr>
<th>discipline</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python based</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>The front end</td>
<td><input type="text" v-model.lazy="web"/></td>
</tr>
<tr>
<td>Django</td>
<td><input type="text" v-model.trim="django"/></td>
</tr>
</tbody>
</table>
</div>
<script>
let app01 = new Vue({
el: "#app01".data: {
python: 75.web: 98.django: 88}})</script>
</body>
</html
Copy the code