Vue.js 第2篇学习笔记

vue.js最强大的，应该是自动更新DOM了。

只要把变量包裹在{{ }}里面，就会在处理完毕后，直接显示处理后的结果。

貌似所有变量都可以放在一个vue对象的data属性里面，

然后就可以在储存函数的computed , methods 属性里面通过this关键字来使用这些变量。this 就是vue对象了。

至于绑定属性，可以:link=“varHref”  :style=“{height: varHeight +px}” 这种简单的操作来做。其实是v-bind的简写。

甚至可以@click 代替 v-on:click 。可以用 @click="true= !true"在 true false 之间快速切换，可以 @click="counter++" 这样来操作。

还有 ：class =" "这样绑定 。看起来接近HTML。但是被绑定的值是变量或者函数，也就是说，处理后的值才会被绑定。

而 watch 属性里面呢，还可以设置为：当某变量的值改变，做某反应。超好用的样子。

v-module呢，可以绑定到变量上，直接通过客户端输入的方式，操作变量的值。

如果给一个元素绑定 v-if =“boolean”，则可以决定它是否在DOM中存在。v-else 是v-if 的延伸。

　　也可以用template包裹元素。

如果只是隐藏元素，可以用v-show,它和v-if是一样的，true 则显示。但是，只是加display:none ，而不是移除DOM元素。

　

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style> </style>
</head>
<body> 
<div id="app">
  <p>{{ counter }}</p>
   <p v-if="show">hello</p>
    <p v-else>hi </p>
    <template v-if="show">
        <p>there</p>
        <span>lol</span>
    </template>
    <p v-show="show">how have you been </p>
    <hr>
     <button @click="counter++" >Increase</button>
    <button @click="show = !show"> alternation </button>
</div>
 <script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    counter:0,
      show:true,
      
  },
  watch:{
  },
  computed: { 
    },
    methods:{
}
})
</script> 
</body>
</html>

　　

　

　　

posted @ 2017-11-28 13:24  Esther_Cheung  阅读(155)  评论(0)    收藏  举报