A detailed introduction to common template syntax in Vue.js

This article mainly introduces the detailed explanation of the common template syntax of Vue.js study notes. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

This article introduces the common template syntax of Vue.js and shares it with everyone. The details are as follows:

1. Text rendering

Vue supports dynamic rendering of text, that is, rendering text content in real time while modifying properties. At the same time, in order to improve rendering efficiency, it is also supported to render only once, that is, after the text is rendered for the first time, the text content will no longer change with the change of the attribute value.

Real-time rendering

 <p class="row">
  <h2>文本 - 实时渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </p>

The v-model instruction dynamically binds the value of the input tag to the attribute msg. Displayed on the page via {{ msg }} expression. When the content of the text box is modified, the content of the subsequent pages will change in real time and remain consistent with the content of the text box.

One rendering

 <p class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </p>

Add attributes to the vm object

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       msg_once: "once..."
     }
   });
 });

When the page is loaded for the first time, the page displays once.... When the span tag is added with the v-once instruction, the page content will not change no matter how the text box content is modified. .

HTML code rendering

In some cases, the page needs to dynamically insert a piece of HTML code

Add attributes to the vm object, the attribute value is A piece of HTML code

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       html: "<span>This is a html tag.</span>"
     }
   });
 });

After adding the v-html directive to the page element, the corresponding element

# in the attribute value will be displayed at the corresponding position of the element.

##

 <p class="row">
  <h2>文本 - HTML</h2>
  <p v-html="html"></p>
 </p>

2. Expression

Already introduced above

{{ msg }} is a simple expression. In addition, there are some commonly used expressions.

Operation expression

Operators can be used in the above simple expressions, and Vue will render the result after the operation on the page

 <p>
  <h4>运算表达式</h4>
  <span v-pre>{{ Number(number)+ }}：</span>
  <input v-model="number" type="text" />
  <span>运算结果：{{ Number(number)+ }}</span>
 </p>

Enter a number in the text box, and Vue will calculate the result in real time through the operators in the expression and display it. Because the text box content is a string, the number attribute needs to be type-converted into a number in the expression.

Ternary operation expression

Vue supports the use of ternary operator within expressions

 <p>
  <h4>三元运算表达式</h4>
  <span v-pre>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}：</span><span>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}</span>
 </p>

Javascript method

Basic methods supported by Javascript can also be used in expressions. Vue will dynamically execute the method and display the final result

 <p>
  <h4>Javascript方法</h4>
  <span v-pre>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}：</span><span>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</span>
</p>

This example is to rearrange the characters of the msg_once attribute value in reverse order and then reassemble them.

3. Filter

Filters are often used to format and display content. Vue supports custom filters

First, add filter methods in the

vm object

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       filter_msg: 'base'
     },
     filters: {
       filter: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter1';
       },
       filter2: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter2';
       },
       filter_arg: function (value, arg1, arg2) {
         if (!value) {
           return '';
         }
 
         return value + ' ' + arg1 + ' ' + arg2;
       }
     }
   });
 });

All filter methods are To be defined in the

filters attribute, the first parameter value of the method is the original content passed in that needs to be processed, and the return value of the method is the new content that has been processed.

The custom filter is used as follows

<p>
  <h4>单一过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
 </p>

In the above example, the filter passes the pipe symbol " |" is connected to the content that needs to be processed, and the

filter_msg attribute value is passed through the filter1 filter, and the content is appended and displayed.

At the same time, Vue also supports connecting multiple filters

 <p>
  <h4>串联过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>
 </p>

In this example, through the pipe symbol "| ”, multiple filters can be connected, and the output of each previous filter will be used as the input of the following filter until the final result is displayed.

When the filter has multiple parameters, Vue also supports calling with parameters

 <p>
  <h4>过滤器参数</h4>
  <span v-pre>{{ filter_msg | filter_arg(&#39;arg1&#39;, &#39;arg2&#39;) }}：</span><span>{{ filter_msg | filter_arg(&#39;arg1&#39;, &#39;arg2&#39;) }}</span>
 </p>

 四、常用指令

指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。

常用的指令如下：

• v-bind

• v-on

• v-for

• v-if

• v-else-if

• v-else

• v-show

v-bind

该指令用来给元素绑定一个或多个特性

 <p>
  <h>v-bind（属性绑定）</h>
  <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/>
  <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/>
  <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button>
 </p>

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       btn_enabled: true
     }
   });
 });

在上面的例子里，给 vm 对象增加一个名称为 btn_enabled 的布尔属性，在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值

页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。

v-on

该指令绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用在普通元素上时，只能监听原生 DOM 事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性。

在 vm 对象的 methods 属性里添加自定义方法

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     methods: {
       btn_click: function () {
         console.log("button click!");
       },
       btn_clickWithEvent: function($event){
         console.log($event);
       },
       btn_clickWithMsg: function (msg) {
         console.log("Message is:" + msg);
       }
     }
   });
 });

通过属性 v-on:click="btn_click" 在按钮上添加 click 事件

 <p>
  <h4>v-on（事件绑定）</h4>
  <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/>
  <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/>
  <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)")：</span><button v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)" type="button">点我！</button><br/>
  <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button>
 </p>

页面效果如下

v-on指令也支持缩写，用@符号代替，比如： @click="btn_click" 。

v-for

该指令用来基于源数据多次渲染元素或模板块。

在 vm 对象里添加一个数组类型的属性 books

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       books: ["深入浅出node", "C#本质论", "编程珠玑"]
     }
   });
 });

通过 v-for 指令实现一个简单列表

 <p>
  <h4>v-for（循环）</h4>
  <ul>
    <li v-for="item in books">
     {{ item }}
    </li>
  </ul>
 </p>

页面效果如下

 v-for 属性值是一个 item in expression 结构的表达式，其中 item 代表 expression 运算结果的每一项。最终的HTML代码如下

v-if、v-else-if、v-else

条件渲染指令，通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用，而 v-else-if 、 v-else 必须和 v-if 一起使用。

下面是一个简单用法的例子

 <p>
  <h4>v-if、v-else-if、v-else（分支）</h4>
  <span>分支示例：</span>
  <input type="text" v-model="number" />
  <span v-if="number>10">大于10</span>
  <span v-else-if="number==10">等于10</span>
  <span v-else>小于10</span><br/>
 </p>

页面显示如下

当文本框里输入小于10的数字时，右侧只显示“小于10”的文本内容。

查看源码发现，只有“小于10”的内容的 span 标签存在，另外两个标签被插入到页面中。

同样，在输入大于10的数字时，右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。

v-show

该指令也是条件渲染指令，但是与上述的 v-if 有不同。这可以通过一个例子来说明。

 <p>
  <h4>v-show（条件渲染）</h4>
  <span>v-show示例：</span>
 <input type="text" v-model="number" />
  <span v-show="number>10">大于10</span>
  <span v-show="number==10">等于10</span>
  <span v-show="number<10">小于10</span><br/>
 </p>

将上面例子里的指令都换成 v-show ，页面显示如下

从页面显示的结果上看，没有任何区别。但是查看源码会发现，符合表达式结果判断的元素内容将被显示，不符合结果判断的元素将被隐藏，即被加上 display: none; 的样式。

It can be seen from the comparison of the above two examples

1. v-if: dynamically insert or delete elements

2. v-show: Dynamically show or hide elements

The above is the detailed content of A detailed introduction to common template syntax in Vue.js. For more information, please follow other related articles on the PHP Chinese website!