Vue基础

模板指令 v-if v-show 控制隐藏模板

区别：v-if是不渲染这个元素 v-show是通过css的display：none和show来控制显示隐藏的

vue实时计算computed
vue的computed就是实时计算使用，vue检测到数据发生变动时就会执行对应数据有引用的函数

如何让css只在当前组件中起作用
只需要在style中写scoped

<style scoped></style>

vue循环插入图片

<div :for="item in items">
    <img :src="item.src"/>
</div>

$remove
vuejs为观察数组添加了$remove方法，用于从目标数组中查找并删除元素，内部调用了splice( )，因此，不必：

var index = this.items.indexOf(item)
if (index !== -1) {
    this.item.splice(index, 1)
}
// 用$remove只需要
    this.items.$remove(item)  

指令v-el的使用
有时候我们想像jq一样去访问一个元素，这时候就可以用v-el指令了。给元素注册一个索引，然后通过$els去访问这个元素

//  这里注意没有引号，本人老是加上。。。。
<span v-el:msg>hello</span>
this.$els.msg.textContent      //  hello

关于vuejs中使用事件名
在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用@:click=”event”,这时event的名字不要出现大写，因为在1.x中不区分大小写，所以如果我们在HTML写@:click=”myEvent”而在js中写myEvent就出错误，所以在vuejs的1.x绑定事件时候，要尽量避免使用大写字母。在2.0中没有该限制

父组件调用子组件的方法
v-ref:xxx
this.$refs.xxx.xx调用

eg:
<div @click="selectedFood">测试</div>
<food v-ref:food></food>
methods: {
    selectedFood () {
        this.$refs.food.show() //这个show方法是food组件的
    }
}

v-for也可以迭代对象
v-for块中，我们拥有对父级作用域的完全访问权限，v-for支持一个可选的第二个参数作为当前的索引。
但是在对象中，第一个默认为键值，第二个参数为键名，也可以加第三个参数为索引

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>
0. firstName: John
1. lastName: Doe
2. age: 30