Vue.js 指令详解：v-bind、v-if/v-else、v-for 和 v-on-优快云博客

指令带有前缀v- ,以表示它们是Vue提供的特殊性。它们会在渲染的DOM 上应用特殊的响应式行为。这里我们举例几个指令

绑定指令: v-bind

该指令的意思是：将这个元素节点的title 特性和Vue 实例的message 属性保持一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1>基本语法</h1>


<!--view 层 模板-->
<div id="app">
    <!--{{message}}-->
    <span v-bind:title="message">
      鼠标悬停几秒查看此处动态绑定的提示信息！
    </span>
</div>


<!--1.导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 通过元素绑定 el就是元素的意思
        el:"#app",
        // data 是个键值对
        // Model:数据
        data:{
            message:"hello,vue!"
        }

    });
</script>
</body>
</html>

判断-循环指令

if ：v-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 通过元素绑定 el就是元素的意思
        el: "#app",
        data: {
            type: 'A'
        }
    });
</script>
</body>
</html>

for ：v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层 模板-->
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 通过元素绑定, el就是元素的意思
        el: "#app",
        data: {
            // 数组items
            items: [    // 数组里的对象
                {message: '天黑请赶路'},
                {message: '前端'}
            ]
        }
    });
</script>

</body>
</html>

事件:v-on

v-on 指令监听DOM事件，并在触发时运行一些javaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>

<!--view 层 模板-->
<div id="app">
    <button v-on:click="sayhi">click Me</button>

</div>
<!--1.导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 通过元素绑定, el就是元素的意思
        el: "#app",
        data: {
            message: "天黑请赶路",
        },
        methods: {   // 方法必须定义在Vue的Methods 对象中,v-on:事件
            sayhi: function (event){
                alert(this.message);
            }
        }
    });
</script>

</body>
</html>

基本语法还有多个，欢迎补充~