Vue基本语法

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 的基本语法......撒花✿✿ヽ(°▽°)ノ✿