【vue笔记】2.vue.js模板语法

vue.js的指令是一些v-开头的属性：

指令	功能
v-if	根据表达式的值（true/false）来进行判定，每次都会重新创建或删除新的元素有较高的切换性能消耗
v-show	功能和v-if差不多，但是不会进行DOM的创建和删除操作，只是切换了元素的display:none样式有较高的初始渲染性能消耗
v-bind	数据的单向绑定，从模型层（M）绑定到视图层（V），缩写形式为":"
v-on	监听DOM事件，有缩写形式
v-model	数据的双向绑定，用于input、select、text、checkbox、radio 等表单控件元素
v-for	循环指令

v-if:

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

data中设置seen的值为true,v-if判定seen的值为true后会显示段落中的内容。

v-if、v-else、v-else-if的同时使用：

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-bind

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

语句：

<a v-bind:href="url">菜鸟教程</a>

的缩写形式为：

<a :href="url"></a>

这里将url的值绑定到href，显示的效果为一个建立一个链接：
在这里插入图片描述

v-on

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

语句：

<button v-on:click="reverseMessage">反转字符串</button>

的缩写形式为：

<button @click="reverseMessage">反转字符串</button>

监听按钮事件：翻转字符串。当用户点击按钮时，响应reverseMessage函数，最终将变量message的数值反过来显示：
在这里插入图片描述

v-model

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

这里将input输入框中的数据和变量message的值绑定在一起，当改变输入框中的内容时，message中的数值也会改变：
在这里插入图片描述

迭代数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p v-for="(item,i) in list">序号：{{i}}   值：{{item}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                list:[12,23,34,45,56]
            }
        })    
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p v-for="map in list">序号：{{map.id}}   值：{{map.value}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,value:'12'},
                    {id:2,value:'23'},
                    {id:3,value:'34'},
                    {id:4,value:'45'}
                ]
            }
        })    
    </script>
</body>
</html>

这两段代码显示效果均为：
在这里插入图片描述

迭代对象中的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p v-for="(value,key) in user">key：{{key}}   value：{{value}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'AXIMI',
                    gender:'male'
                }
            }
        })    
    </script>
</body>
</html>

显示效果为：
在这里插入图片描述
需要注意，这里选取键值的顺序为值在前，键在后，即：

<p v-for="(value,key) in user">key：{{key}}   value：{{value}}</p>

而不是：

<p v-for="(key,value) in user">key：{{key}}   value：{{value}}</p>

迭代数字：

<template>
  <div id="app">
    <ol>
      <li v-for="n in 10">
        {{n}}
      </li>
    </ol>
  </div>
</template>

显示效果为：
在这里插入图片描述