vue基础语法学习

vue基础语法

vue与react相似之处：以数据驱动视图的前端框架，改变数据，页面视图同时发生改变。

v-if与v-show的区别：

<template v-if="loginType == 'username'">    <!-- template作为包装元素，不会渲染到dom结构中 -->
    <label>用户名</label>
</template>
<template v-if="loginType == 'email'">
    <label>邮箱</label>
</template>

<!-==================->
<h1 v-show="ok">hello</h1>  <!-- 当ok为true时，h1的display属性为block，否则为none，但始终存在在dom结构中 -->

v-show的元素会始终渲染并保持在dom中，v-show是简单的切换元素的display属性；
v-if 的元素则根据if的条件判断语句来选择渲染在dom中，当条件语句为true时添加到dom中，否则移除

---

v-for

用v-for指令根据一组数组的选项列表进行循环渲染

<ul id="example">
    <li v-for="item in array">{{item.title}}</li>
</ul>

var vm=new Vue({
    el: '#example',
    data: {
        array: [
            {
                title:'first'
            },
            {
                title:'second'
            }
        ]
    }
});

渲染结果:

first
second

利用v-for迭代一个对象的属性

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  <li>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

结果如下：

John
Doe
30

组件和v-for

在自定义的组件中，可以像普通元素一样使用v-for，但是不能直接传递数据到子组件中，因为组件有自己独立的作用域，需要用props传递：

<my-component v-for="(item,index) in items" v-bind:data="item" v-bind:index="index"></my-component>

数组的变异方法(会改变原始数组)：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

非变异方法（不会改变原始数组）

• filter()
• concat()
• slice()

这些非变异方法不会改变原始数组，但是总是会返回一个新的数组

注意事项：
由于javascript的限制，vue不能检测以下变动的数组：

1. 当利用索引直接设置一个项时，如：vm.items[indexOfItem] = newValue
2. 当修改数组的长度时，如：vm.items.length = newLength;

避免第一种情况：以下两种方式将达到效果，同时触发状态更新：

<!--Vue.set-->
Vue.set(example1.items,indexOfItem, newValue);

<!--Array.prototype.splice-->
example1.items.splice(indexOfItem,1,newValue);

避免第二种情况：

example1.items.splice(newLength);

事件修饰符：在事件处理程序中调用event.preventDefault()或者event.stopPropagate()
- .stop
- .prevent
- .capture
- .self
- .once

<a @click.stop="doThis"></a>    <!--阻止单击事件冒泡-->
<form v-on:submit.prevent="onSubmit"></form>  <!--提交事件不再重载页面-->
<a v-on:click.stop.prevent="doThat"></a>   <!-- 修饰符可以串联  -->
<form v-on:submit.prevent></form>      <!-- 只有修饰符 -->
<div v-on:click.capture="doThis">...</div>    <!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.self="doThat">...</div>  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->