Vue.js 前端框架学习笔记（二）

v-html 指令

   <script src="https://npmcdn.com/vue/dist/vue.js">

        new Vue({
        el: '#app',
        data: {
      message :'哎呦，不错哦',       
                }
        })

    </script>

 <div id="app">
   <div v-html = "message">
   </div>
</div>

v-bind 指令

<script src="https://npmcdn.com/vue/dist/vue.js">

new Vue({
    el: '#app',
    data: {
        h: true
    }
})

</script>

 <div id="app">
  
 <label for="r1">修改颜色</label><input type="checkbox" v-model="h" id="r1">
  <br><br>
  <div v-bind:class="{'h': h}">
   看我七十二变
  </div>  
</div>

 

<script src="https://npmcdn.com/vue/dist/vue.js">

new Vue({
    el: '#app',
    data: {
        url: 'www.baidu.com'
    }
})

</script>

 <div id="app">
  <pre><a v-bind:href="url">百度一下</a></pre>
</div>

 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

<!-- 缩写 -->
<a :href="url"></a>

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上

点击事件

<script src="https://npmcdn.com/vue/dist/vue.js">

new Vue({
    el: '#app',
    data: {
        messsage:"欢迎来到王者荣耀",
    },
    methods: { 
    test: function () {
      alert(this.messsage);
      }
    }
})

</script>

 <div id="app">
  <button v-on:click="test">快点我</button>

</div>

<!-- 缩写 -->
<a @click="doSomething"></a>

条件判断

<script src="https://npmcdn.com/vue/dist/vue.js">

new Vue({
    el: '#app',
    data: {
    test : true,
    }
})

</script>

 <div id="app">
<p v-if="test">现在你看到我了</p>

</div>

 v-if 指令将根据表达式  的值(true 或 false )来决定是否插入 p 元素。

v-for   迭代对象

<script src="https://npmcdn.com/vue/dist/vue.js">

new Vue({
    el: '#app',
    data: {
       son:{
          name :'vue.js',
          url:'http://www.runoob.com/vue2/vue-loop.html',
          title:'发家致富道道多'
       
       }
    }
})

</script>

<div id="app">
  <ul>
     <li  v-for="(value,key) in son">
       {{key}} : {{value}}
     </li>
  </ul>
</div>