2-vue basic grammar 1

1, Interpolation operation

1,Mustache

Mustache syntax (that is, double braces);

<body>
<div id="app">
  {{message}}
  <h2>{{message}},tom</h2>
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'How do you do',
     firstName: 'kobe',
     lastName: 'bryant',
     counter: 100
   }
 })
</script>


2,v-once

However, in some cases, we may not want the interface to follow changes at will

At this time, we can use a Vue instruction

v-once:

This instruction does not need to be followed by any expression (for example, the previous v-for is followed by an expression)

This instruction indicates that elements and components (which will be learned later) are rendered only once and will not change with the change of data.


<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'How do you do'
   }
 })
</script>
</body>


3,v-html

In some cases, the data we request from the server itself is an HTML code

If we output directly through {}}, the HTML code will also be output.

However, we may want to parse in HTML format and display the corresponding content.

If we want to parse the HTML presentation:

You can use the v-html instruction

This instruction is often followed by a string type

The html of string will be parsed and rendered


<body>
<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'How do you do',
     url: '<a href="https://www.baidu. Com "> Baidu < / a > >'
   }
 })
</script>
</body>


4,v-text

The function of v-text is similar to Mustache: it is used to display data in the interface;

v-text usually accepts a string type; v-text is not as flexible as mustache syntax;

<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-text="message"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'How do you do'
   }
 })
</script>
</body>


5,v-pre

v-pre is used to skip the compilation process of this element and its child elements, and to display the original Mustache syntax.

For example, the following code:

The content in the first h2 element will be compiled and parsed to the corresponding content

The second h2 element displays {{message}} directly

<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'How do you do'
   }
 })
</script>
</body>


6,v-cloak

In some cases, our browser may directly display the uncompiled Mustache tag.

This is not very friendly. We need to cover it for the time being and display it after parsing;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-vloak] {
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <h2 v-cloak>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: 'How do you do'
      }
    })
  }, 2000)
</script>
</body>
</html>


2, Binding properties

1. Basic use of v-bind

The main function of the instruction we learned earlier is to insert values into the contents of our template.

However, in addition to the dynamic determination of content, we also want to bind some properties dynamically.

For example, dynamically bind the href attribute of a element

For example, dynamically bind the src attribute of the img element

At this time, we can use the v-bind instruction:

Role: dynamically bind attributes

Abbreviation:

Expected: any (with argument) | Object (without argument)

Parameter: attrOrProp (optional)


<body>
<div id="app">
  <img v-bind:src="imgurl">
  <hr>
  <a v-bind:href="a">use Baidu Search</a>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'How do you do',
     imgurl: 'https://cn.vuejs.org/images/logo.png',
     a: 'https://www.baidu.com'
   }
 })
</script>
</body>


2. v-bind syntax

Abbreviated as a colon:

< A: href = "a" > Baidu Click</a>


3. v-bind binding css

Many times, we want to dynamically switch class es, such as:

When the data is in a certain state, the font displays red.

When the data is in another state, the font is displayed in black.

There are two ways to bind a class:

Object syntax

Array syntax


Object syntax case:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 class="active">{{message}}</h2>
  //Object syntax, that is, when v-bind:class binds an object, the value inside will affect the final value
  //For example, if the value of isActive here is true, it will be rendered as class='active '. If it is false, class will not exist
  <h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <button v-on:click="btnclick">Button</button>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'hello',
     isActive: true,
     isLine: true
   },
   methods: {
     btnclick: function () {
       this.isActive = !this.isActive
     }
   }
 })
</script>
</body>
</html>


In addition, the v-bind:class instruction can coexist with the ordinary class attribute and will be merged with the v-bind bound class during parsing:

<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>


If the class is too complex, it can be placed in one method:

<body>
<div id="app">
  <h2 class="active">{{message}}</h2>
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getclass()">{{message}}</h2>   //Same as the above line
  <button v-on:click="btnclick">Button</button>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'hello',
     isActive: true,
     isLine: true
   },
   methods: {
     btnclick: function () {
       this.isActive = !this.isActive
     },
     getclass: function () {   //Added a method
       return {active: this.isActive, line: this.isLine}
     }
   }
 })
</script>



Array syntax case:

<body>
<div id="app">
  <h2 class="active">{{message}}</h2>
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getclass()">{{message}}</h2>    
  <button v-on:click="btnclick">Button</button>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'hello',
     isActive: true,
     isLine: true
   },
   methods: {
     btnclick: function () {
       this.isActive = !this.isActive
     },
     getclass: function () {   //It can also be written in the method
       return {active: this.isActive, line: this.isLine}
     }
   }
 })
</script>


4. v-bind binding style

We can use v-bind:style to bind some CSS inline styles.

When writing CSS attribute names, such as font size

We can use camel case fontsize

Or kebab case (remember to enclose it in single quotation marks) 'font size'

There are two ways to bind a class:

Object syntax

Array syntax


Object syntax:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .title {
      font-size: 50px;
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <!--50 here px Use single quotation marks, otherwise it will be parsed as a variable-->
<!--  <h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
  <h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: 'How do you do',
     finalSize: '100',
     finalColor: 'red'
   }
 })
</script>
</body>
</html>


If it is too complex, it can also be placed in a method;


Array syntax:

nstyle is followed by an array type. Multiple values can be divided by;

<div v-bind:style="[baseStyles, overridingStyles]"></div>

Tags: Vue

Posted by driver on Sat, 21 May 2022 22:28:54 +0300