vue.js学习笔记

vue.js组件的重要选项

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

<script>
new Vue({
  el:'#app',
  data:{
    message:'Hello Vue.js'
  }
})
</script>

1. data

vue所有的数据都是放在data里的

<p>{{a}}</p>

<script>
new Vue({
  data:{
    a: 1,
    b: []
  }
})
</script>

2. methods

new Vue({
  data： {
    a: 1,
    b: []
  },
  methods: {
    doSomething: function(){
      console.log(this.a)
    }
  }
})

3. watch

监听

new Vue({
  data： {
    a: 1,
    b: []
  },
  methods: {
    doSomething: function(){
      console.log(this.a)
    }
  },
  watch: {
    'a':function(val,oldVal) {  //监听data域里a的变化
      console.log(val,oldVal)
    }
  }
})

4. 模板指令 —— html和bue对象的粘合剂

数据渲染：v-text、v-html、{{ }}

在字符串中有html标签的时候，v-text会把所有的内容当做字符串来渲染，但是v-html会渲染字符串中的html标签。

<p>{{a}}</p>
<p v-text="a"></p>  <!--methods方法对data域的a进行数据处理的话，会随之改变 -->
<p v-html="a"></p>

<script>
    new vue({
      data: {
        a: 1,
        b: []
      }
    })
</script>

5.模板指令 —— v-if 和 v-show

控制模块隐藏：v-if 、v-show

<p v-if="isShow"></p>   <!-- v-if不渲染dom元素 -->
<p v-show="isShow"></p> <!-- v-show通过css的display来控制隐藏，能够看到dom元素 -->

<script>
    new vue({
      data: {
        isShow: true
      }
    })
</script>

6. 模板指令——v-for

渲染循环列表：v-for

<ul>
  <li v-for="item in items">    <!--items 是data域里的对象 -->
    <p v-text="item.label"></p>
  </li>
</ul>

<script>
    new vue({
      data: {
        items: [
          {label:'apple'
          },
          {label:'banana'
          }
        ]
      }
    })
</script>

7. 模板指令 —— v-on

事件绑定：v-on

<button v-on:click="doThis"></button>
<button @click="doThis"></button>   <!-- @与v-on等价, 是一种简写形式 -->

<script>
    new vue({
      methods: {
        doThis: function(someThing) {
          //...
        }
      }
    })
</script>

8. 模板指令—— v-bind

属性绑定：v-bind

<img v-bind:src="imageSrc"> <!-- 也可以写作 :src ,v-bind与:等价--> <!-- 字符串 -->

<div :class="{ red: isRed }"></div>     <!-- 布尔值 -->
<div :class="[classA, classB]"></div>   <!-- 字符串 -->
<div :class="[classA, {classB: isB, classC:isC }]"></div>   <!-- classA字符串, isB和isC是用来判断classB与classC是否展现的，classB与classC就是展现出来的字符串，就是key最终展现出来的样子，而不是被赋了什么值 -->

9. 小结

• new 一个vue对象的时候可以设置他的属性，其中最重要的包括三个：分别是data、methods、watch。
• 其中data代表vue对象的数据（model层），methods代表vue对象的方法，watch设置了对象监听的方法。
• vue对象里的设置通过html指令进行关联
• 重要的指令包括
  
  • v-text 渲染数据
  • v-if 控制显示
  • v-on 绑定事件
  • v-for 循环渲染 等