Home >Web Front-end >JS Tutorial >Discussion on components and templates in Vue.js

Discussion on components and templates in Vue.js

黄舟Original: 2017-10-28 09:29:281568browse

Abstract:

Directive is an important feature in Vue.js. It mainly provides a mechanism to map data changes to DOM behavior. What changes in data are mapped to DOM behaviors? Vue.js is driven by data, so we will not directly modify the DOM structure, and there will be no similar $('ul').append('

one

') such an operation, when the data changes, the instruction will modify the DOM with a set operation, so that you can only focus on the data changes without having to manage DOM changes and Status,

Vue’s built-in instructions

1. v-bind

v-bind It is mainly used to bind DOM element attributes (attributes).

That is, the actual value of the element attribute is provided by the data attribute in the vm instance.

For example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo">
  <span v-bind:cutomId="id">{{message}}</span>
</p>
<script>
  //数据
  let obj ={
    message:"Hello World",
    id:&#39;123&#39;
  };
 //声明式渲染
  var vm = new Vue({
    el:&#39;#demo&#39;,
    data:obj  });
</script>
</body>
</html>

v-bind can be abbreviated as ":",

The above example can be abbreviated as

The implementation effect is as follows:

2. v-on

Bind event listener , abbreviated as @.

We also used it yesterday, let’s abbreviate it to see the effect

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!-- HTML模版 -->
  <p id="demo">
    <span @click="clickHandle">{{message}}</span>
  </p>
  <script>
    //数据
    let obj = {
      message:"hello Vue"
    };
    //声明式渲染
    var vm = new Vue({
      el:"#demo",
      data:obj,
      methods:{
        clickHandle(){
            alert("click")
            }
      }
    });
  </script>
</body>
</html>

The effect is as follows:

##3.v- html

v-html, the parameter type is string,

is used to update innerHTML,

accepted

string

will not be compiled Wait for the operation,

Process it as normal HTML

The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo" v-html="HTML"></p>
<script>
  //数据
  let obj = {
    HTML:"<p>Hello World</p>"
  };
  var vm = new Vue({
    el:"#demo",
    data:obj  })
</script>
</body>
</html>

The effect is as follows

For more built-in instructions, please check the official website: Vue.js instructions

template

html template

DOM-based templates, templates are all available Parse valid html

Interpolation

Text: Use "Mustache" syntax (double curly brackets) {{value}}

Function: Replace the attribute value on the instance,

When the value changes, the interpolated content will automatically update

Native html: double curly braces output text and will not parse html

Attributes: use v-bind Binding can respond to changes

Use JavaScript

Expression: You can write simple expressions String template

template string

-- Attribute of template option object

’ s ’ ’ s ’ s ’ s through through ’s ’ using ’s ’ using ’s ’ through through ’s through through ’s' ’ ‐ to ‐‐‐‐‐‐mn to Content hanging from the element will be ignored.

The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <p id="demo"></p>
  <script>
    //数据
    let obj = {
      html:"<p>String</p>",
      abc:1
    };
    var str = "<p>Hello</p>";
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:str    })
  </script>
</body>
</html>

Have you noticed any surprising changes

There can only be one root node

Write the html structure in a pair of script tags, set type="X-template"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <p id="demo">
    <span>vue</span>
  </p>
  <script type="x-template" id="temp">
    <p>
      Hello,{{abc}},
      <span>sunday</span>
    </p>
  </script>
  <script>
    //数据
    let obj = {
      html:"<p>String</p>",
      abc:1
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:"#temp"
    });
  </script>
</body>
</html>

The effect is as follows:

Writing in script tags is still relatively limited.

If other files also have this structure,

this cannot be reused.

Template render function

render function

Attributes of render option object

createElement(tag name, {data object}, [child element]);

The child elements are text or arrays

Let’s use a piece of code to demonstrate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>render函数</title>
  <script src="../vue.js"></script>
  <style type="text/css">
    .bg{
      background: #ee0000;
    }
  </style>
</head>
<body>
  <p id="demo"></p>
  <script>
    //数据
    let obj = {
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      render(createElement){
        return createElement(
          //元素名
          "ul",
          //数据对象
          {
            class:{
              bg:true
            }
           },
          //子元素
          [
            createElement("li",1),
            createElement("li",2),
            createElement("li",3)
          ]
        );
      }
    })
  </script>
</body>
</html>

The effect is as follows

Summarize

The above is the detailed content of Discussion on components and templates in Vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of usage definition of doubly linked list in JavaScript data structureNext article：Example of usage definition of doubly linked list in JavaScript data structure

See more

Discussion on components and templates in Vue.js

Related articles