Vue内置指令v-if v-on v-bind v-text v-html v-for v-if v-show

1、v-model
说明：双向数据绑定
写法：v-model=“” 或者 v-model:value=“”
注意：v-model和v-bind只能在表单类元素中使用（表单类元素：就是含有value值的元素标签，如：input，select）
代码：

<div id="app">
        <input type="text" v-model="name">
    div>

    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                name: 'v-model指令'
            }
        });
    script>

网页：
（F12点击“控制台”，输入vm.name可以查看name值）
因为数据双向绑定，
修改input中的值，能使name值变化
或者通过控制台vm.name=123这种方式，改变name

2、v-bind
说明：单向数据绑定
写法： v-bind:value=“name” 或者 :value=“name” （省略v-bind）
注意：一旦加了v-bind：,后面“”中的值(本来视为字符串)会被视为JS执行，可以指定data中任意属性
就如同插值表达式{{}}一样，里面的代码被视为JS执行。
代码：

<div id="app">
        <input type="text" v-bind:value="name">
    div>

    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                name: 'v-model指令'
            }
        });
        
        vm.msg="asd";
        console.log(vm.$data.msg);
    script>

网页：
（F12点击“控制台”，输入vm.name可以查看name值）
因为数据单向绑定
可以通过控制台vm.name=123这种方式，改变name
但修改input中的值，vm.name值不会变化

3、v-text和v-html
v-text说明：插入文本内容
v-html说明：插入html内容
代码：

<div id="app">
    <p v-text="name">p>
    <div v-html="name">div>
div>
<script>
    var vm=new Vue({
        el: '#app',
        data: {
            name: '
我是v-html
'
        }
    })
script>

网页：
v-text只是将name值视为文本内容
而v-html将name值视为一句html代码

4、v-on
说明：监听事件
代码：

 
    <div id="app">
        <p>{{name}}p>
        <button v-on:click="showInfo">请点击button>
        <button v-on:click="show">请点击button>
    div>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                name: '名字'
            },
            methods:{
                showInfo(){
                    this.name = '我是showInfo方法，在button上用v-on绑定click'
                },
                show(){
                    this.name='wow,你好棒'
                }
            }
        })
    script>

网页：
点击不同的按钮，触发不同的方法

5、v-show
说明：显示隐藏
代码：

   <div id="app">
        <div v-show="isShow" style="background-color: #ccc">我是V-ifdiv>
        <button @click="isShow=!isShow">显示/隐藏button>
    div>

    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        });
    script>

网页：
isShow为true就显示，为false就不显示

6、v-if
说明：条件渲染
代码：

 <div id="app">
        <button @click="updateName" v-text="name01">隐藏图片button>
        <p><img v-if="isShow" src="./leigu.jpg">img>p>
        
    div>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                isShow: true,
                name01: '显示图片'
            },
            methods:{
                updateName(isShow){
                    this.isShow=!this.isShow;
                    // console.log(vm.$data.isShow);
                    if(vm.$data.isShow==true){
                        vm.$data.name01='显示图片'
                        // console.log('显示图片');
                    }else{
                        vm.$data.name01='隐藏图片'
                        // console.log('隐藏图片');
                    }
                    
                }
            }
        })
    script>

7、v-else
说明：配合v-if，就是常见的if else 语句
代码：

<div id="app">
    <p v-if="score>90||score==90">刘星的成绩优秀p>
    <p v-else-if="score>75||score==75">刘星的成绩良好p>
    <p v-else-if="score>=60">刘星的成绩及格p>
    <p v-else>刘星的成绩不及格p>
div>
<script type="text/javascript">
    var vm=new Vue({
        el: '#app',
        data: {
            score: 85
        }
    });
script>

8、v-for
说明：列表渲染
代码：

   <div id="app">
        <div v-for="(item,index) in list" data-id="index">
            索引是：{{index}},元素内容是:{{item}}
        div>
    div>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                list: ['a','b','c']
            }
        });
    script>