Vue的一些小零碎

1、两个缩写

<a v-bind:href = "url" ></a>  //完整写法
　　
<a :href = "url" ></a>　　 　　//缩写写法


<a v-on:click = "doSomething"></a> //完整写法

<a @click = "doSomething"></a>　　　//缩写写法

 

2、v-if和v-else

<h1 v-if= "ok" >YES</h1>
<h1 v-else>NO</h1>
//上面这两个语句同一时刻，只能出现一个！
//并且v-else元素必须紧跟在v-if 或者 v-else-if 后面 ，不然不能识别！
//v-else-if 同理

 

3、神奇的<template>

<template v-if = "true">
　　<input placeholder = "a">
</template>
<template v-else>
　　<input placeholder = "b">
</template>
//像这样，用template包着的这两个模板，切换的时候，input里面已填的内容是不会变的，
//Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
//因为这两个模板里的都是只用了一个input，这个他被复用了
//如果不想被复用，那就在input里加一个属性节点key
//例如：<input placeholder = "b" key = "bIn">
//反而<div>不会导致这样的复用情况！

 

4、v-if 和 v-show

　　带有 v-if 的元素是名副其实的“条件渲染”，也就是初始渲染时，如果条件为假，那就什么也不做，直到第一次变为真，才开始渲染条件块！

　　带有 v-show 的元素始终会被渲染，并且保留在DOM中。（他只是简单低切换元素的CSS属性 display）

　　( v-for的优先级 > v-if )

 

5、v-for

　　【语法格式】

　　v-for指令需要以 item in items  形式的特殊语法！（in 换成 of 也是一样滴~！）

　　——其中，items是源数据数组，并且item是数组元素迭代的别名！

 

　　【迭代下标】

　　另外，如果想知道这次迭代的下标的话，这样来：

　　　　v-for = "(item , index) in items"，然后直接读取index就行了

 

　　【items的各种情况】

　　如果items是：

　　　　一个整数，那么每次迭代，会从1-10依次迭代出来；

　　　　一个有很多个属性的对象，那么每次迭代，会迭代一条属性出来；（这时候，可以指定三个参数，分别是value、key、index）

　　　　一个有很多个对象的数组，那么每次迭代，会迭代一个对象出来；

　　

　　【用到组件上】

　　<zujian v-for = "item in items "></zujian>

　　//如果想要v-for一个我们自定义的组件，那么在组件内部想要获得item、index这些数据，我们可以用props来将他们传递，
　　//例如：
　　<zujian v-for = "(item , index) in items " v-bind:item = "item" v-bind:index = "index"></zujian>
　　//然后在我们自定义的组件内部，用props:['title']读取，然后{{title}}显示出来！

 

5、变异方法 与 非变异方法

　　变异方法是改变原数组的方法，他们是：

　　　　push()

　　　　pop()

　　　　shift()

　　　　unshift()

　　　　splice()

　　　　sort()

　　　　reverse()

　　非变异方法不会改变原数组，但是会返回一个新数组，他们有：

　　　　filter()

　　　　concat()

　　　　slice()

 

6、过滤器filter的使用方法

　　①先定义一个原数组nums（过滤前）

export default{
   data(){
     return{
       nums:[1,2,3,4,5]  
     }
   }  
}

　　②然后在computed计算属性计算“过滤后”要用的一个新数组finalNums

computed:{
  finalNums(){
    return this.nums.filter(function(num){
      return num % 2 ===0
      })
//在filter里面是一个"返回true/false的回调函数"

//这个回调函数的参数是这个数组里依次迭代的各项
//当迭代到的那个num的时候，返回的是true，那么这个数就能“存活”下来
  }
}

7、@click

　　@click=" " 里边可以放 “ 方法（） ”，也可以直接放 “ 方法名 ”

　　　放 “ 方法（） ”，意味着括号里边要传参了，也可以为空

　　　放 “ 方法名 ”，意味着不打算传参，即和 “ 方法（空括号） ”一样

 

8、按键修饰符

　　　

<div @keyup.alt.enter="say()">a</div>
//意味着，同时按下这两个键才触发

 

9、v-model的双向绑定

　　首先不得不说的是，v-model他很聪明！它会根据控件类型（input的type属性节点）自动选取正确的方法来更新元素

　

　【最普通的输入框】

　　当input的type是默认的时候，也就是：最普通的输入框

<input v-model = "message">
<p>{{message}}</p>
//当然了，input改成textarea也是可以的！
//但是要注意，如果要换行的话就在css属性加多一个 white-space: pre
//顺便科普一下，white-space这个属性，如果值是nowrap，那就是文本不换行显示；如果值是pre，那么文本就是换行显示

　

　【多选框】

　　然后，当input的type是checkbox的时候，也就是：多选框

　　多选框也有2种情况：

　　　　　　①一种是不给每个input分配value的：

<input type="checkbox" v-model="checked">
//这时候的“checked”只有两个值了：true/false

　　　　

　　　　　　②另一种是给每个input分配value，并且v-model是一个数组变量：

<input type="checkbox" v-model="checked" value="heshiyu">
……
export default{
  data(){
    return{
　　　checked:[]
    }
  }
}
//这时候的“checked”的值，如果他选中的话，那他的值就是“heshiyu”
//如果v-model不是一个数组变量，那么，他的值只会是true/false

　

　【单选按钮】

　　其次，当input的type是radio的时候，也就是：单选按钮

<input type="radio" v-model="picked" value="hsy">
……
export default{
  data(){
    return{
　　　picked:''//看清楚啦，picked是一个字符串变量
    }
  }
}
//这时候的“picked”的值，如果他选中的话，那他的值就是“hsy”
//如果没有设置value这个属性节点，那么picked是没有东西的

 

　【下拉列表】

　　最后，用到select标签的时候，也就是：下拉列表

<select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
……
export default{
　　data(){
　　　　return{
　　　　　　selected:null//记住！一开始将selected设置为null，空字符串变量也行
　　　　}
　　}
}

如果要变成多选列表（也就是按住CTRL可以进行多选）的话，
　　① 在select标签加多一个 multiple
　　② 将selected变量变成数组变量就OK了


对了,上面的option标签可以用v-for来哦：

<option v-for = "item in items" v-bind:value="item.value">
    {{item.text}}
</option>
//在这个例子里面，items是一个装有好多个对象的数组，而item每次迭代的是这个数组里的一个个对象（一次一个）

 

　　如何将v-model绑定到value？

　　　　①:value="a"，其中“a”是一个变量，他有自己的值

　　　　② v-model="pick"

　　　　③当选中的时候，v-model的值会变成“a”的值，另外“a”的值是不变滴~

 

　　v-model的一些修饰符（用管道方式，紧跟在v-model后面的）

　　　　.lazy（？？？？不会）

　　　　.number（它可以自动将用户的输入值转为Number类型）

　　　　.trim（它可以自动过滤掉用户输入的首尾空格）

 

10、父子双向通信

　　在 Vue.js 中，父子组件的关系可以总结为 props down, events up ，即父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

　　props （父 → 子）

　　　　和data()同级。也有动态props，加个v-bind就行了，这样在父组件里面，数据一变动，就会立马再次传给子组件。

　　　　props是单向绑定的，因为他防止子组件无意修改了父组件的状态！另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。

　　　　所以！我们不应该在子组件里修改props！

　　　　一般是（二选一）：

　　　　　　① 在data()里边，创建一个新的变量，然后用props来初始化他

　　

props:['zujian'],
data(){
   return{
　　  countr : this.zujian
   }
}

 

　　　　　　② 在computed计算属性里，计算一个新的变量，然后处理props的值然后赋值给这个新变量就行

props:['zujian'],
computed:{
　　counter(){
　　　　return this.zujian.toLowerCase()
　　}
}

　　　　　　注意！在JavaScript里，对象和数组是引用类型的，所以！如果你props的是一个对象或者数组，那么在子组件内部改变，那么他也会影响父组件！

 

　　给子组件props验证机制！

　　

props:{
　//必须是数字
  'zujian' :Number,

　//必须是String或者Number
　'zujian2':[String,Number],
　
　//一定要传，而且传的一定是字符串
　'zujian3':{
　　type : String,
　　required:true
　},

　//传数字，不传的话默认为100
　'zujian4':{
　　type : Number,
　　default : 100
　},

　'zujian5':{
　　type:Object,
　　default:function(){
　　　return{
　　　　message :'hello'
　　　}
　　}
　},

　'zujian6':{
　　validator : function(value){
　　　　return value > 10
　　}
　}

}

　　传的不符合规则，则会有警告：

 

　　自定义事件（子 → 父）

　　　　$on(event) 监听事件，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

　　　　$emit(event)触发事件，子组件发送给父组件的一个消息手段

　　　　步骤差不多是这样的：

　　　　　　① 在父组件里，找到调用子组件的那个地方，用$on加一个事件监听

        <child v-on:IAmOk="getChild">haha</child>
　　　　　//不要小看这个“IAmOk”，他其实是负责父子之间通信的一个“对接口令”！等下在子组件里要通过$emit来确认喔！

 

　　　　　　② 在父组件里，设置一个响应函数（也就是如果子组件发来消息，你父组件应该执行什么函数），也就是上面的 “getChild”

     　　getChild(val){//父亲收到儿子传来消息，要改变的东西写在这里
     　　  this.parentWords = val
     　　}//这个val等下再看，是从子组件传过来的~

 

　　　　　　③ 在子组件里，看看在哪个地方来 发送消息给父亲 ,比如我就随便写一个，当用户keyup后执行的一个函数来做这件事吧！

    <input v-on:keyup="childMethod(($event.target.value))">
　　……

　　　　childMethod(val){
　　　　　　this.$emit('IAmOk',val)
　　　　}//这里意思就是，每次keyup之后，会通过$emit向父组件发送一个对接口里“IAmOk”的消息，并且传过去一个val，

　　　　 //也就是刚刚在这个输入框里输入的 $event.target.value

 

　　　　　　④ 再看看②里面父亲的getChild(val)函数，这样，父亲的这个parentWords变量，就可以获得子组件的值，从而实现了父子之间通信啦！

 

　　非父子之间的通信

　　　　看了网上的都是直接在main.js注册这些组件（包括A、B、中转空组件）的，因为用的是cli，所以。。。是有指向的！　　　　　

var Hub = new Vue() //　比如，在main.js里边，实例化了一个空组件hsy　　

　new Vue({
　　Hub,　　　　　　　　//然后，把这个空组件放到Vue实例里边
　　components:{
　　foo,
　　bar
　　}
　}).$mount('#app')　　//因为组件要挂载到某个具体的Vue实例才会生效，否则没用！

　　　　然后调用就是麻烦事了！直接用官网的那个 Hub.$emit 和 Hub.$on 是没用的，因为对子组件来说，Hub是不可见的!

　　　　有个办法可以把它（Hub）调出来：   this.$root.$options.Hub

　　　　然后在官网给的例子当中，将 Hub.$emit 改成上面那个“寻址”就可以了，$on同理

　　　　这是我在F12后台找了好久才找到的。。。不过应该有更简单的方法！所以啊，开发的时候要经常打开F12看看，他暴露的一些方法，这样会让开发轻松很多吧！

 

 

11、Vue组件的API来自三部分

　　　　　　-props   ：允许父组件传递数据给子组件

　　　　　　-events ： 允许组件触发事件，传消息给父组件

　　　　　　-slots　　：允许外部环境将额外的内容组合在组件中。

 

12、子组件的紧急索引

　　　　虽然有props和events，但是有时候如果需要JavaScript直接访问女子组件，那么可以使用ref为子组件制定一个索引ID。

　　　　例如：

　　　　

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

　　var parent = new Vue({ el: '#parent' })

　　// 访问子组件

　　var child = parent.$refs.profile

 

13、调用子组件的简单写法

　　　　在父组件里面，一般这样调用子组件：

　　　　<child></child>

　　　　或者<child/>就可以了