Vue插值语法：

　　总结：插值语法使用{{}}传入变量，相当于形参

　　　　 script中data中传入变量值，相当于实参，vue将data的值传给{{}}中

　　　　html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/vue.js"></script>
</head>
<body>

<div id="app">
    <p>字符串：{{name}}</p>
    <p>整形：{{age}}</p>
    <p>数组：{{hobby}}</p>
    <p>对象：{{wife}}</p>
    <p>标签形式字符串：{{a}}</p>
    <hr>
        么么么么么哒
    </div>
    <hr>

</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'ydh',
            age: 20,
            hobby: ['篮球', '足球', 'spa'],
            wife: {name: '刘亦菲', age: 38},
        }
    })
</script>
</html>

　　　前端页面展示效果：

文本指令：

　　指令系统：写在标签上，v-开头的标签，称之为指令，每个指令都有特殊用途
　　　　v-指令名='写原来插值能写的东西'
　　　　v-指令名='name' ------> 变量

　　v-text:把变量渲染在标签内部
　　v-html：把标签类型的字符串直接渲染成标签
　　v-if: 控制标签显示与否，直接删除或加入标签
　　v-show:控制标签显示与否，通过样式的display: none;控制显示与否

　　　html中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    文本指令之 v-text，把变量渲染在标签内部：<span v-text="a"></span>
    <br>
    插值语法：<span>{{a}}</span>
    <br>
    文本指令之v-html,把标签类型的字符串直接渲染成标签：<span v-html="a"></span>
    <h2>v-if的使用,只能写条件，或布尔类型的变量</h2>
    <div v-if="is_show">
        我是个div---v-if的使用
    </div>
    <br>
    <h2>v-show的使用</h2>
    <div v-show="is_show">
        我是个div---v-show的使用
    </div>
    <br>

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a: '<a href="http://www.baidu.com">点我看美女</a>',  // 标签形式字符串
            is_show: false,

        }
    })


</script>
</html>

　　前端页面：

事件指令：

　　v-on:点击事件

　　v-on：可以简写成@

　　语法：v-on:click='定义的函数名'

　　执行流程：一旦点击，触发click事件，执行script里的methods内的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/vue.js"></script>

</head>
<body>
<div id="app">
    <button v-on:click="handleClick">点我</button>
    <button v-on:click="handleClick1">点我</button>
    <hr>
    <div>
        <button @click="han">点我看美女</button>　　
    </div>
    <div>
         <img src="/img/OIP-C.jpg" alt="" v-if="is_show">
    </div>
    <hr>

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {is_show: true},
        methods: {
            handleClick() {
                alert('看我看我')
            },
            handleClick1() {
                alert('看你看你')
            },
            han() {
                this.is_show = !this.is_show
            },

        }
    })

</script>
</html>

属性指令v-bind：

　　案例：使用事件指令点击事件，将img内src属性的地址改变，达到更换图片的效果

　　实现思路：v-bind：将img内src属性变为变量，将img中的地址赋给data，再使用事件指令改变data达到效果

　　v-bind：可以简写成简写成： :属性名='变量'

　　　　html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div    id="app">
        <div>
            <button @click="hans">点我看美女</button>
        </div>

        <img v-bind:src="url" alt="">

    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                url:'https://ts1.cn.mm.bing.net/th?id=OIP-C.eTZqATgN81MJbDla4gbQNQHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
            },
            methods:{
                hans(){
                    this.url='https://ts1.cn.mm.bing.net/th?id=OIP-C.Fb_kkG34JhBqxDQAKuo8hwHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
                }
            },
        })
    </script>
</body>
</html>