vue.js(vue简单指令)

HTML页面： <div id="app">{{message}}</div>

页面中的数据就是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:  <div :class="{red:isRed}"></div>    isRed:true:加上类red，false：不加类red

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

　　　　　　　　　eg:  <div :class="[classA,{classB: isB, classC: isC}]"></div>

   

 

 

 

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的变化， 参数是变化前后的值变化

　　　　'demo':function(val, oldVal){

　　　　　　console.log(val,  oldVal);　　

　　　　}

　　  }

  });

转载于:https://www.cnblogs.com/Hibiscus-xuan/p/6429478.html