Vue基础语法和组件传参

基础语法

Vue是一个 MVVM 的框架,数据驱动和 组件化是Vue的中心头脑。简朴的讲MVVM框架就是：我们只须要在数据层做数据操纵，显现层会检测到我们每次的数据变化，然后做出相应的转变，监测数据这个事情就是中心的ViewModel。经由过程这类形式，我们就能够不必再直接操纵DOM节点来举行数据的转变。

一、插值

{{data}} 在模板里能够完成data数据的展现，假如data数据转变，展现的数据也会相应式的转变。相应式的转变意味着我们不须要强迫革新页面就能够完成数据的变化。这类语法为请输入代码Mustache语法

<template>
    <div class="main">
         <h3>这里是title的值：{{title}}</h3>
    </div>
</template>

export default {
    name:'phonerisk',
    data(){
        return{
            title:'testTitle'
        }
    }
}

网页上就会显现出来data内里title的值。

二、v-html

v-html能够将一段HTML的代码字符串输出成HTML片断而不是一般的文本。

<template>
    <div class="main">
        <p >这里是<span v-html='html'></span></p>
    </div>
</template>

export default {
    name:'phonerisk',
    data(){
        return{
            html:'<span style="color:blue;font-size:23px;">v-if</span>'
        }
    }
}

网页大将html字符串衬着成色彩为蓝色的一般文本。

三、v-bind

Mustache·语法不能用于HTML上，所以我们须要绑定一些属之类的须要运用v-bind。v-bind就是将data内里的数据绑定到HTML上面，从而完成属性的变化。

<template>
    <div class="main">
        <img :src="imgUrl" />
    </div>
</template>

export default {
    name:'phonerisk',
    data(){
        return{
             imgUrl:"../../static/img/KFC.e66b2f8e.png"
        }
    }
}

v-bind 能够简写成 :

四、v-model

v-model是用于表单输入的数据双向绑定。所谓双向绑定就是视图层的数据变化会引起数据层数据的转变，相反的，数据层的变化也会致使视图层展现数据的变化。

<template>
    <div class="main">
        <input type="text" v-model="name">
        {{name}}
        <button @click='changeName'>转变名字</button>
    </div>
</template>

export default {
    name:'phonerisk',
    data(){
        return{
            name:'小明'
        }
    },
    methods:{
        changeName(){
            this.name = "小花";
        }
    }
}

input输入框绑定name,输入框初始显现‘小明’,在输入框里变动信息的时刻，name同时发作转变，点击按钮转变name数值的时刻，输入框内里的数据同时发作转变。

五、v-on

v-on 用于监听DOM事宜，如按钮的点击事宜、双击事宜等。v-on 的简写为 @,以下面的 @click 就等价为 v-on:click。

template>
    <div class="main">
       
        <button @click='yes'>你敢点我吗？</button>
    </div>
</template>

  methods:{
        yes(){
            alert("我有啥不敢的！！！");
        }
    }

这个案例是监听按钮的点击事宜，点击以后挪用 yes 函数，然后弹出正告框。

在日常平凡的开辟过程当中我们能够会运用到 event.preventDefault() 或许 event.stopPropagation() 来阻挠事宜的继承流传，然则这个是直接操纵DOM节点，不相符Vue的头脑。所以Vue采纳修饰符来举行相干的操纵。下面我例举几个经常使用的，如相识更过，能够检察Vue的官网举行更细致的进修。

1. .stop

   没有加修饰符

   <div class="main" @click="div">
           <button @click.stop='yes'>你敢点我吗？</button>
       </div>

    methods:{
           yes(){
               alert("我有啥不敢的！！！");
           },
           div(){
               alert("我会DIV");
           }
       }

   效果以下图：
   

   加了
   .stop 修饰符以后的效果

   <button @click.stop='yes'>你敢点我吗？</button>

   效果以下图：
   
   .stop 修饰符阻挠了事宜的继承流传，所以子节点的 click事宜没有冒泡到父节点，所以div的点击监听没有监听到内容。

2. .prevent

   没有加修饰符

     <form @submit="onSubmit">
           <button @click="onSubmit">提交</button>
       </form>

   运转效果以下图：
   

   加了
   .prevent 修饰符以后的效果

   <form @submit.prevent ="onSubmit">
       <button @click="onSubmit">提交</button>
   </form>

   

   .prevent 提交表单以后页面不在从新衬着。能够看到没加修饰符的时刻页面从新加载，然则在加修饰符以后，页面不在从新加载。

3. .keyup

   <input v-on:keyup.13="submit">
   <input @keyup.enter="submit">

   绑定到输入框里，能够直接按enter键就动身提交的要领，和点击提交按钮一样的效果，官网还供应了其他按键的别号

六、v-if

v-if用于做前提化的衬着，当组件的推断前提发作转变，这个组件会被烧毁并重修。

<template>
    <div class="main">
    <span v-if="display">我叫001</span>
    <span v-if="!display">我叫002</span>
    <button @click="changeShow">切换</button>
    </div>
</template>

```javascript
    data(){
        return{
            display:true
        }
    },
    methods:{
        changeShow(){
          this.display = !this.display;
        },
    }

```
运转效果以下图：

v-if绑定的变量为 true 的时刻，其地点的元素会被衬着出来，反之亦然。

七、v-else、v-else-if

v-else 和C语言中的else一样的语法效果。假如前提变量不满足 v-if ,则实行 <v-else> 的内容

    <div class="main">
    <span v-if="display">我叫001</span>
    <span v-else>我叫002</span>
    <button @click="changeShow">切换</button>
    </div>

运转效果和上图一致。

v-else-if 是Vue2.1.0版本新增的一个属性。v-else-if 必需用在 v-if 和 v-else 之间才有效果。

<template>
    <div class="main">
    <span v-if="display === 1">我叫001</span>
    <span v-else-if="display === 2">我叫002</span>
    <span v-else>我叫003</span>
    <button @click="changeShow">切换</button>
    </div>
</template>

 data(){
        return{
            display:1
        }
    },
    methods:{
        changeShow(){
            this.display = (this.display + 1)%3;
        },
    }

运转效果以下图：

八、v-show

v-show 是切换元素的 display 属性的。

<template>
    <div class="main">
    <span v-show="display">我叫001</span>
    <span v-show="!display ">我叫002</span>
    <button @click="changeShow">切换</button>
    </div>
</template>

 data(){
        return{
            display:true
        }
    },
    methods:{
        changeShow(){
            this.display = !this.display;
        },
    }

运转效果以下图：

九、v-for

v-for 用于屡次衬着统一模板或许元素。

<div class="main">
        <ul v-for="(name, index) in names" :key="index">
            <li>{{index}}、我的名字叫{{name}}</li>
        </ul>
    </div>

 data(){
        return{
           names:['jack','joe','Nancy', 'lily']
        }
    },

运转效果以下图：

v-for 屡次衬着了li 内里的内容，轮回遍历了names 数组，并将结放入 {{name}} 内里。

十、v-once

v-once 只衬着元素和组件一次，假如内容转变，也会将元素、组件视为静态元素跳过。

<div class="main">
    <!-- 单个元素 -->
    <span v-once>This will never change:{{msg}}</span>
    <!-- 有子元素 -->
    <div v-once>
      <span>comment:::</span>
      <span>{{msg}}</span>
    </div>
    <!-- 轮回 -->
    <ul>
      <li v-for="i in names" v-once :key="i">{{i}}</li>
    </ul>
    <hr>
    <span>This will change:</span>
     <!-- 单个元素 -->
    <span>This will never change:{{msg}}</span>
    <!-- 有子元素 -->
    <div >
      <span>comment:::</span>
      <span>{{msg}}</span>
    </div>
    <!-- 轮回 -->
    <ul>
      <li v-for="i in names"  :key="i">{{i}}</li>
    </ul>
    <button @click="changValue">testChange</button>
  </div>

data() {
    return {
      msg: 111,
      names: ["jack", "joe", "Nancy", "lily"]
    };
  },
  methods: {
    changValue() {
      this.msg += 111;
      this.names[2] = "web";
    }
  }

运转效果以下图：

在点击按钮后, msg 会增添，然则上面有v-once指令的元素等则不会从新衬着。

十一、v-if和v-show的区分

前面讲了v-if 和 v-show,两个指令都是用在元素之间的显现和隐蔽的切换，那末，这两个指令终究有什么差别呢？接下来我将用一个示例来解说他们之间的差别。

<template>
  <div class="main">
    <h3>v-if</h3>
    <div class="content" v-if="display">1</div>
    <div class="content" v-else>2</div>
    <h3>v-show</h3>
    <div class="content" v-show="display">1</div>
    <div class="content" v-show="!display">2</div>
    <h3>对照</h3>
    <div class="content">1</div>
    <div class="content">2</div>
    <button @click="changeValue">点击我啦</button>
  </div>
</template>

data() {
    return {
      display: true
    };
  },
  methods: {
    changeValue() {
      this.display = !this.display;
    }
  }

.content {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: solid 1px black;
  background-color: red;
}
.content + .content {
  margin-left: 20px;
}

运转效果以下图：

从上图我们能够看出当display 为 false 的时刻，v-if 和v-show显现位置不一样。

1. 起首我们解读一下这个代码的css:content类设置了div的长宽和背景色，dispaly属性为 inline-block,
   .content + .content 设置了假如有两个content 类在一起的时刻，背面一个的左侧距为20个像素。
2. 在dispaly 为 true 的时刻，两个div都靠左显现。
3. 在 display 为 false 的时刻，上面的div在本来的位置从新衬着，然则下面的div却有一个20像素的左侧距。
4. 所以v-if衬着的时刻，不会将不相符前提的元素加载到DOM树内里，而v-show则会将一切的节点都加载到DOM树，然后依据前提，变动节点的display 属性，天生差别的衬着树。
   
   一般来说， v-if须要更高的开支，每次都邑转变DOM树，然则v-show 只须要转变元素的 display ，开支更低。

十二、v-for和v-if优先级题目

当v-for 和v-if 在统一个蒜素里的时刻，前者比后者有更高的优先级，所以我们在开辟中一定要注重优先级的题目。

1. 假如我们是想有前提的跳过轮回中的某些项的时刻：

<template>
  <div class="main">
   <ul >
       <li v-for="(count, index) in counts" :key="index" v-if="count >30">
           {{index + 1}}、我花费了{{count}}元
        </li>>
       {{index + 1}}、我花费了{{count}}元
       </li>
   </ul>
  </div>
</template>

data() {
    return {
      counts:[11,22,33,44,55,66]
    };

运转效果以下图：

跳过了count 小于 30 的项

2.假如我们是盘算有前提的跳过轮回的话那末我们应当将推断写在轮回的表面，先推断前提。

<template>
  <div class="main">
   <ul  v-if="counts.length >3">
       <li v-for="(count, index) in counts" :key="index">
           {{index + 1}}、我花费了{{count}}元
        </li>
   </ul>
  </div>
</template>

运转效果以下图：

至此，讲完了Vue 的基础语法……撒花✿✿ヽ(°▽°)ノ✿