Home > Web Front-end > JS Tutorial > body text

Summary of some simple Vue.js instructions

零到壹度
Release: 2018-04-21 11:16:49
Original
1343 people have browsed it

The content introduced in this article is a summary of some simple Vue.js instructions, which has a certain reference value. Now I share it with you. Friends in need can refer to it

HTML page:

<p id="app">{{message}}</p>
Copy after login

The data in the page is the data in data

Template instructions: control the content of the module

v-text (Control the text content of the element)

eg: <p  v-text="a"></p>   --> a 是data中的a
Copy after login

v-html (Control the content of the element, including internal structure)

eg:<p v-html="a"></p>
Copy after login

Control module hidden
v-if

 eg:<p v-if="isShow"></p>    -->isShow的值是布尔值,true:显示, false,隐藏
Copy after login

v-show

eg:<p v-if="isShow"></p>    -->isShow的值是布尔值,true:显示, false,隐藏
Copy after login

Rendering loop list v-for

eg: 
<ul>     <li v-for="item in items">         <p v-text="item.label"></p>  
    -->item是items里的每一个对象,items是data里的数组

     </li></ul>
Copy after login

Event binding v-on

eg:<button v-on:click="doSomething"></button>  click 可以是hover,focus等事件

eg: <button @click="doSomething"></button>  简写形式
Copy after login

Attribute binding

v-bind   eg:<img  v-bind:src="imageSrc">    src属性赋值 imgSrc

(简写)eg:  <p :class="{red:isRed}"></p>    isRed:true:加上类red,false:不加类red

eg:  <p :class="[classA, classB]"></p>  绑定多个类名

eg:  <p :class="[classA,{classB: isB, classC: isC}]"></p>
Copy after login

Example:

js:var app = new Vue({

  el:"#app",

  data:{ 这里填写数据,以键值对的形式

     a:"heollo",

     demo:1,         items:[{label:"vue1"},{label:"vue2"}]

     },

  methods:{这里可以写自己定义的函数,

    doSomething:function(){

       console.log(this.a);   --> this指代的是vue的对象, a 是data里的a       }

   },

  watch:{ 监听,监听demo的变化, 参数是变化前后的值变化

    &#39;demo&#39;:function(val, oldVal){      console.log(val,  oldVal);  

    }

    }

  });
Copy after login


Related recommendations:

Usage and examples of Vue.js custom instructions

Vue.js Getting Started - Built-in Instructions v-html

Vue.js Knowledge Summary - Instructions

vue.js usage notes

The above is the detailed content of Summary of some simple Vue.js instructions. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template