Vue基础指令

1. v-text：设置标签的内容

<div id="app">
<h2 v-text="message+'!'">好好学习，天天向上</h2>
</div>
<script>        
    var app = new Vue({           
        el: '#app',            
        data: {                
            message: "小朋友就要有小朋友的亚子"
        }        
    })    
</script>

默认的写法会替换全部内容，使用差值表达式{{}}可以替换指定内容，内部支持写表达式

2. v-html：设置标签的innerHTML

内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<div id="app">
    //百度
    <p v-html="content"></p>
    //百度
    <p v-text="content"></p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            content:"百度"
        }
    })
</script>

3. v-on：为元素绑定事件

• 事件名不需要写on

<input type="button" value="v-on指令" v-on:click="doIt">

• 指令可以简写为@

<input type="button" value="v-on简写" @click="doIt">

• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中的数据

补充：

• 事件绑定的方法写成函数调用的形式，可以传入自定义参数
• 定义方法时需要定义形参来接受传入的实参
• 事件的后面跟上 .修饰符 可以对事件进行限制
• .enter可以限制触发的按键为回车
• 事件修饰符有多种

<div>
    <input type="button" value="点击" @click="doIt('老铁'，666)">
    <input type="text" @keyup.enter="sayHi">
</div>
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            doIt:function(p1,p2){
                console.log("做it");//做it
                console.log(p1);//老铁
                console.log(p2);//666
            },
            sayHi:function(){
                alert("吃了没？")；
            }
        }
    })
</script>

4. v-show：指令的作用是根据真假切换元素的显示状态（操作的是样式）

原理是修改元素的display，实现显示隐藏

<input type="button" value="切换显示状态" @click="changeIsShow">
<img v-show="isShow" src="../images/1.jpg" alt="">
<script>        
    var app = new Vue({            
        el: "#app",
        data: {
            isShow: false
        },
        methods: {
            changeIsShow: function () {
                this.isShow = !this.isShow;
            }                                           
        }        
    })    
</script>

指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

5. v-if：根据表达式的真假，切换元素的显示和隐藏（操作的是dom）

本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除

注：频繁的操纵元素用v-show，反之使用v-if，前者的切换消耗小

6. v-bind：为元素绑定属性

完整写法是v-bind:属性名
简写的话可以省略v-bind，只保留:属性名
需要动态的增删class建议使用对象的方式

<div id="app">
<img v-bind:src="imgSrc" alt=""><br>
<!-- :简写  class第一种写法 -->
<img :src="imgSrc" alt="" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive"><br>     
<!-- class第二种写法  建议写法 -->        
<img :src="imgSrc" alt="" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            imgSrc: "1.jpg",
            imgTitle: "只想当个懒惰的快乐鬼",
            isActive: false
        },
        methods: {
            toggleActive: function () {
                this.isActive = !this.isActive;
            }
        }
    })
</script>

7. v-for：根据数据生成列表结构

数组经常和v-for结合使用
语法是（item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
key的作用：帮助Vue区分不同的元素，从而提高性能

<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            {{index+1}} 不想{{item}}
        </li>
        <li :key='item.id' v-for='(item,index) in list'>
            eat {{item.name}}
        </li>
    </ul>
    <h2 v-for="item in food" v-bind:title="item.name">
        {{item.name}}
    </h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            arr: ['起床', '学习', '工作', '还花呗'],
            food: [{ name: "辣椒炒肉" }, { name: "青椒炒肉" }],
            list: [{ id: 1, name: 'apple' }, { id: 2, name: 'orange' }]
        }
    })
</script>

8.v-model：便捷的设置和获取和表单元素的值

绑定的数据会和表单元素值相关联
绑定的数据和表单元素的值是双向绑定的

<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{{message}}</h2>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "学习"
        },
        methods: {
            getM: function () {
                alert(this.message);
            },
            setM: function () {
                this.message = "工作";                
            }
        }
    })
</script>