Vue常用的指令

    <!-- 使用vue指令钱都需要先导包 -->
    <script src="./vue.js"></script>

• v-text：设置元素的文本 innerText(或使用 {{ }} )；

• v-htm：设置元素的innerHTML(可包含标签样式)；

• v-on：给元素绑定事件； 

        语法： 

            标准语法：     v-on:事件名 = "方法名"
            简洁语法：     @事件名 = "方法名"
        注意点：
            事件名就是原生事件名去掉on；
            事件方法定义在vue实例的methods对象中。

<div id="app">
        <button v-on:click="doClick">点我</button>
        <div class="box" v-on:mouseenter="doEnter" v-on:mouseleave="doLeave"></div>
        <hr>
        <div class="box" @mouseenter="doEnter" @mouseleave="doLeave"></div>
</div>
<script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {

            },
            //method:注册事件的方法名
            methods: {
                doClick() {
                    alert('我被点击了')
                },
                doEnter() {
                    console.log('鼠标移入我了')

                },
                doLeave() {
                    console.log('鼠标移出我了')
                }
            },
        })
    </script>

vue事件修饰符：vue事件修饰符官方文档传送门 ： 事件修饰符使用

   作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
   语法： @事件名.修饰符 = "方法名"

• v-bind：设置HTML标签原生属性的值 ：src title href class style

         语法：

            标准语法：     v-bind:原生属性名 = "属性值"
            简洁语法：     :原生属性名 = "属性值"

<!-- HTML结构 -->
    <div id="app">
        <!--
            默认情况下，HTML标签原生属性无法获取vue中的数据 
            如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令
         -->
        <img v-bind:src="imagePath" v-bind:title="imageTitle"  alt="">
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                imagePath:'./images/logo.png',//文件路径
                imageTitle:'桥本环奈'
            }
        })
    </script>

*vue样式绑定

    class与style样式绑定官方文档传送门： Class 与 Style 绑定 — Vue.js

   <!-- 样式 -->
    <style>
        div>div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin-top: 20px;
        }

        .red-box {
            background-color: red;
        }

        .blue-box {
            background-color: blue;
        }

        .greenBorder {
            border: 10px solid green;
        }
    </style>


<!-- HTML结构 -->
    <div id="app">
        <!-- 本小节内容：Vue设置元素CSS样式的3种方式 -->

        <!--  v-bind:class="{ '类名': bool, '类名': bool ......}"
                如果值为true 该类样式就会被应用在元素身上, false则不会
                注意点：如果类名有 - ，则需要使用引号包起来
        -->
        <button @click="changeClass">切换样式</button>
        <div :class="{ greenBorder: true, 'blue-box': flag }"></div>
        <hr>
        <div :style="{ width:width , height , 'background-color':bgc}"></div>
        
    </div>
    

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                flag:true,
                width:'200px',
                height:'200px',
                bgc:'cyan'
            },
            methods: {
                changeClass(){
                    this.flag = !this.flag;
                }
            },
        })
    </script>

• v-for：列表渲染

         v-for指令官方文档传送门：列表渲染 — Vue.js

1. 遍历数组语法：v-for="(value,index) in arr"(value:数组元素 index:数组下标)
2. 遍历对象语法：v-for="(value,key,index) in obj"(该语法使用较少，了解即可 )

<!-- HTML结构 -->
    <div id="app">
        <li v-for="(item,index) in list" @click="doClick(item)">
           这是第{{index}}个li元素： {{ item }}
        </li>
    </div>
    <!-- 
        1.学习目标：  v-for 指令
        2.学习路线
            (1)作用：遍历数组，并重复生成对应长度的相同标签
            (2)语法： v-for="item in 数组名"
                遍历下标：   v-for="(item, index) in items"
                
            (3)细节： 这个指令写在哪一个元素身上，就重复生成哪一个元素
     -->


   <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                list:[
                    '小明',
                    '小强',
                    '小花',
                    '小坤',
                    '小老弟'
                ]
            },
            methods: {
              doClick(item){
                alert(item)
              }  
            },
        })
    </script>

• v-model：多用于表单元素实现双向数据绑定（同angular中的ng-model）；

        v-model指令官方文档传送们：API — Vue.js

<body>

    <!-- HTML结构 -->
    <div id="app">
        <input type="text"  v-model="name">
        <p>我的名字是: <span>{{ name }}</span></p>
        <button @click="doClick">点我修改model</button>
    </div>
    <!-- 
        1.学习目标 ： v-model 指令
        2.学习路线 
            (1)作用 ： 双向数据绑定
                a. 表单元素的值进行了修改，这个变量的值也会跟着修改
                b. 这个变量的值进行了修改，表单元素的值也会跟着修改
            (2)语法：  v-model="变量名"
            (3)注意点： 
                a.   v-model只能用于表单元素
                b.   变量名要定义在data对象中
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name:''
            },
            methods: {
                doClick(){
                    this.name = '只因'
                }
            },
        })
    </script>
</body>

*v-model绑定其他表单元素

    官方文档：表单输入绑定 — Vue.js

1. 默认情况下, v-model指令绑定的是表单元素的value值 (复选框checkbox除外)
2. 如果遇到复选框checkbox：非数组 : 一般用于单个复选框,此时绑定的是checked属性；数组 : 一般用于多个复选框，此时绑定的是value属性。

• v-if：指令根据条件渲染数据

    官网文档： API — Vue.js

    语法： 
            单分支：     v-if="条件语句"
            双分支：     v-else
            多分支:      v-else-if="条件语句"

    注意点：
            v-else与v-else-if的前面  必须要有  v-if 或者 v-else-if

<!-- HTML结构 -->
    <div id="app">
        <!-- lazy :懒加载，输入框失去焦点vue才会渲染数据  -->
        <input type="text" v-model.lazy="score" placeholder="请输入考试分数">
        <h2>你的考试分数为：{{ score }}</h2>
        <hr>
        <h3 v-if="score>=90">爸爸给你买法拉利</h3>
        <h3 v-else-if="score>=80">爸爸给你买保时捷</h3>
        <h3 v-else-if="score>=60">爸爸给你买奥迪</h3>
        <h3 v-else>爸爸给你爱的掌声</h3>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                score: '',
            }
        })
    </script>

•  v-show：设置元素的display

• 官网文档：API — Vue.js

•         语法： v-show="属性值"
              属性值为true:   元素的display:block
              属性值为false:   元素的display:none

         v-show与v-if区别
              v-if  : 条件渲染。  如果不满足条件，则该元素不会添加到DOM树中
              v-show: 显示与隐藏。 只是修改元素的display属性值

<!-- HTML结构 -->
    <div id="app">
        <p v-if="num>=30">我是v-if渲染出来的</p>
        <p v-show="num>=30">我是v-show渲染出来的</p>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                num: 20,
            }
        })
    </script>

 v-if和v-show在功能上有什么区别？

        v-show:一定会渲染，只是修改display属性

        v-if:根据条件渲染