Vue基本语法

时间  2019-11-10
标签 vue 基本 语法 繁體版
原文   原文链接

Vue基本语法和组件传参

基本语法

Vue是一个 MVVM 的框架,数据驱动和 组件化是Vue的核心思想。简单的讲MVVM框架就是：咱们只须要在数据层作数据操做，显示层会检测到咱们每次的数据变化，而后作出相应的改变，监测数据这个工做就是中间的ViewModel。经过这种模式，咱们就能够不用再直接操做DOM节点来进行数据的改变。javascript

1、插值

{{data}} 在模板里能够实现data数据的展现，若是data数据改变，展现的数据也会响应式的改变。响应式的改变意味着咱们不须要强制刷新页面就能够实现数据的变化。这种语法为请输入代码Mustache语法css

<template>
    <div class="main">
         <h3>这里是title的值：{{title}}</h3>
    </div>
</template>
export default {
    name:'phonerisk',
    data(){
        return{
            title:'testTitle'
        }
    }
}

{{}}插值图片
网页上就会显示出来data里面title的值。html

2、v-html

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

<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>'
        }
    }
}

v-html图片
网页上将html字符串渲染成颜色为蓝色的普通文本。java

3、v-bind

Mustache·语法不能用于HTML上，因此咱们须要绑定一些属之类的须要使用v-bind。v-bind就是将data里面的数据绑定到HTML上面，从而实现属性的变化。web

<template>
    <div class="main">
        <img :src="imgUrl" />
    </div>
</template>
export default {
    name:'phonerisk',
    data(){
        return{
             imgUrl:"../../static/img/KFC.e66b2f8e.png"
        }
    }
}

v-bind
v-bind 能够简写成 :数组

4、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 = "小花";
        }
    }
}

v-model图片

input输入框绑定name,输入框初始显示‘小明’,在输入框里更改信息的时候，name同时发生改变，点击按钮改变name数值的时候，输入框里面的数据同时发生改变。ide

5、v-on

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

template>
    <div class="main">
       
        <button @click='yes'>你敢点我吗？</button>
    </div>
</template>
methods:{
        yes(){
            alert("我有啥不敢的！！！");
        }
    }

-on
这个案例是监听按钮的点击事件，点击以后调用 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");
        }
    }

    效果以下图：
    v-on.stop

    加了 .stop 修饰符以后的效果 
    <button @click.stop='yes'>你敢点我吗？</button>

    效果以下图：
    v-on.stop1
    .stop 修饰符阻止了事件的继续传播，因此子节点的 click事件没有冒泡到父节点，因此div的点击监听没有监听到内容。

  2. .prevent

    没有加修饰符 
    <form @submit="onSubmit">
        <button @click="onSubmit">提交</button>
    </form>

    运行结果以下图：
    v-on.prevent

    加了 .prevent 修饰符以后的效果 
    <form @submit.prevent ="onSubmit">
    <button @click="onSubmit">提交</button>
</form>

    v-on.prevent1

    .prevent 提交表单以后页面不在从新渲染。能够看到没加修饰符的时候页面从新加载，可是在加修饰符以后，页面不在从新加载。

  3. .keyup

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

    绑定到输入框里，能够直接按enter键就出发提交的方法，和点击提交按钮同样的效果，官网还提供了其余按键的别名

6、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

v-if绑定的变量为 true 的时候，其所在的元素会被渲染出来，反之亦然。

7、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-else-if

8、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-show

9、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

v-for 屡次渲染了li 里面的内容，循环遍历了names 数组，并将结放入 {{name}} 里面。

10、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";
    }
  }

运行效果以下图：
v-once

在点击按钮后, msg 会增长，可是上面有v-once指令的元素等则不会从新渲染。

11、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;
}

运行效果以下图：
conpare

从上图咱们能够看出当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 属性，生成不一样的渲染树。
    compare1
    通常来讲， v-if须要更高的开销，每次都会改变DOM树，可是v-show 只须要改变元素的 display ，开销更低。

12、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]
    };

运行结果以下图：
v-if-v-for

跳过了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>

运行结果以下图：
v-if-v-for2

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程