Code specification
The indent is usually 4 Spaces, and the front end is usually 2 Spaces. The indent varies from company to company, and more than 50% of companies require 2 Spaces. This article and the rest of the code use 2 Spaces for indentation.
In the CLI, editConfig is also 2 Spaces.
2. Vue template Settings in WebStorm
Here is an example of a template:
Mustache’s simple grammar
3.1. Mustache syntax enables simple text and number rendering as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{firstName+lastName}}</h2>// Mustache syntax statements that are long can also be implemented using computed in options<h2>{{firstName+' '+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '.firstName: 'Kobe'.lastName: 'Bryant'.counter: 100}})</script>
</body>
</html>
Copy the code3.2 v – once the instructions
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<! The V-once directive is used to address the requirement that when the server changes the data or the console changes the page response content, the corresponding DOM does not change, i.e., non-response mode.
<h2 v-once>{{message}}</h2>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '}})</script>
</body>
</html>
Copy the codeCorresponding renderings and console operation display:
3.3 v – HTML commands
Examples of all code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html = "url">{{}}</h2>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '.url: '}})</script>
</body>
</html>
Copy the codeCorresponding renderings:
3.4 v – text commands
Examples of all code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}} I am Wei Chun.</h2>
<! -- The contents of div will be overwritten by message -->
<h2 v-text="message"> I am Wei Chun.</h2>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '}})</script>
</body>
</html>
Copy the code
3.5 v – pre order
Examples of all code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<! Display the contents of the element as they are -->
<h2 v-pre>{{message}}</h2>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '}})</script>
</body>
</html>
Copy the code
3.6 v – cloak instructions
Prior to the style demo control and the V-cloak command, mustache primitive tags would appear at the beginning of the page display, and the content would be displayed after a delay
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<! -- -->
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
Before vue pars, there is an attribute v-cloak in div
// After vue parsing, there is no attribute v-cloak in div
// Disguise the display, without the original mustache syntax tag, for user-friendly purposes, but rarely used
setTimeout(function(){
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '}})},1000)
</script>
</body>
</html>
Copy the code3.7 v – the bind command
The main function of the previous instructions is to insert values into the contents of our template.
But in addition to content being determined dynamically, there are certain properties that we want to bind dynamically. Such as:
The href attribute of element A is dynamically bound.
2. Dynamically bind the SRC attribute of the IMG element.
In this case, use the V-bind command ↓
What it does: Dynamically bind properties
Abbreviations: :
Expectation: any (with argument) | Object (without argument)
Parameters: attrOrProp (optional)
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<! Mustache syntax is used directly inside the tag (content), not in the source.
<! -- <img src="{{message}}" alt="">-->
<! "-- this is no different in essence from the wrong use of mustache grammar above --
<! -- <img src="imgURL" alt="">-->
<! -- Dynamically binding image source: When the image source changes, the browser will automatically change it -->
<img v-bind:src="imageURL" alt="">
<img :src="imageURL" alt="">
<a v-bind:href="aHref">The baidu</a>
<! -- v-bind syntax sugar -->
<a :href="aHref">Baidu twice</a>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '.imageURL: 'https://img14.360buyimg.com/img/s100x100_jfs/t1/165712/18/9083/56369/603f3fa7E94c2bc8e/063831e5edec7f4d.jpg! cc_100x100.webp'.aHref: 'http://www.baidu.com',}})</script>
</body>
</html>
Copy the code
3.7.1. V-bind Dynamically bind class(1)
Listen for mouse clicks through mouse listening events and perform actions.
The front end often uses mouse click to switch a button or div style display, for example:
An element tag has a default style that switches to the given style when clicked, returns to default when clicked again, and so on.
There are two ways to bind classes: ① Object syntax; ② Array syntax
Object syntax: Class is followed by an object.
There are several common uses of object syntax:
Usage ① : Bind a class directly with {}
<h2 :class="{'active': isActive}">Hello World</h2>
Copy the codeUsage ② : You can also pass in more than one value by judgment
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
Copy the codeUsage ③ : There is no conflict with the existence of a normal class
Note: If isActive and isLine are true, there will be title/active/line classes
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
Copy the codeIf it is too complicated, use methods or computed
Note: Classes is a calculated property
<h2 class="title" :class="classes">Hello World</h2>
Copy the codeComprehensive use of object syntax:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: #ff0000;
}
</style>
</head>
<body>
<div id="app">
<! -- <h2 class="active">{{message}}</h2>-->
<! -- <h2 :class="active">{{message}}</h2>-->
<! {} is an object, not mustache -->
<! Add (true) and remove (false) the active attribute of the tag by controlling true and false -->
<! - < h2: class = "{name of the class 1: true, the name of the class 2: false}" > {{message}} < / h2 > -- >
<! The following case does not overwrite the attribute, but merges it.
<h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
<! -- function calls should actually be parentheses, e.g.eftbtnClick ()-->
<h2 class="title" :class="getClasses()">{{message}}</h2>
<button @click="leftBtnClick">change color</button>
<button @click="rightBtnClick">change property</button>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '.isActive: 'true'.isLine: 'true',},methods: {
leftBtnClick: function () {
this.isActive = !this.isActive
},
rightBtnClick: function () {
this.isLine = !this.isLine
},
getClasses: function () {
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</body>
</html>
Copy the code
3.7.2. V – bind binding class (2)
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<! -- Single quotes will be parsed as strings, not as variables -->
<h2 class="title" :class="['active', 'line']">{{message}}</h2>
<h2 class="title" :class="[active, line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src=".. /js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app'.data: {
message: 'Hello, world! '.active: 'aaa'.line: 'lll',},methods: {
getClasses: function () {
return [this.active, this.line]
}
},
})
</script>
</body>
</html>
Copy the code