Rumah  >  Artikel  >  hujung hadapan web  >  一些简单的Vue.js的指令总结

一些简单的Vue.js的指令总结

零到壹度
零到壹度asal
2018-04-21 11:16:491331semak imbas

这篇文章介绍的内容是一些简单的Vue.js的指令总结,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

HTML页面:

<p id="app">{{message}}</p>

页面中的数据就是data中的数据

模版指令:控制模块的内容

v-text (控制元素的文本内容)  

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

v-html(控制元素的内容,包括内部结构 )

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

控制模块隐藏    
v-if

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

v-show

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

渲染循环列表  v-for  

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

     </li></ul>

事件绑定v-on      

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

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

属性绑定

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>

实例:

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);  

    }

    }

  });


相关推荐:

Vue.js自定义指令的用法与实例

Vue.js入门-内置指令v-html 

Vue.js知识总结——指令

vue.js使用注意事项

Atas ialah kandungan terperinci 一些简单的Vue.js的指令总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn