Vue学习一（本地应用vue指令v-text,v-html,v-on,v-show,v-if,v-bind,v-for,v-model）

一、第一个Vue程序

<div id="app1">
        {{message}}

        <h2>{{school.name}}</h2>
        <h3>{{school.tel}}</h3>
        <h4>{{campus[1]}}</h4>
    </div>

<script>
        // el属性：挂载点
        // data：数据对象
        var app1 = new Vue({
            el: "#app1",
            data: {
                message: "你好VUE",
                school: {
                    name: "SICAU",
                    tel: 11111111,
                },
                campus: ["成都校区", "雅安校区", "都江堰校区"],
            },
        })
    </script>

二、本地应用vue指令：v-text

<div id="app2">
        <h2 v-text="message">成都</h2>
        <h2>{{message}}成都</h2>
        <h2 v-text="message+'!'">成都</h2>
        <h2>{{message+'!'}}成都</h2>
    </div>

<script>
        var app2 = new Vue({
            el: "#app2",
            data: {
                message: "这里是App2",
            },
        })
    </script>

可以看到，使用v-text的时候其中的文字会被全部替换掉。两种方法都可以使用字符串的拼接。

三、本地应用vue指令：v-html

<div id="app3">
        <h2 v-html="textContent">成都</h2>
        <h2 v-html="htmlContent">成都</h2>
        <h2 v-text="textContent">成都</h2>
        <h2 v-text="htmlContent">成都</h2>
    </div>

<script>
        var app3 = new Vue({
            el: "#app3",
            data: {
                textContent: "这里是App3",
                htmlContent: "<a href='https://www.baidu.com'> 百度</a>"
            },
        })
    </script>

运行出来的结果可以看到v-text和v-html的区别在于：v-html指令的作用是设置元素的innerhtml，内容中有html结构就会被解析成标签；而v-text指令无论内容是什么，只会解析为文本。

四、本地应用vue指令：v-on

1.v-on指令的作用是为元素绑定事件
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中
5.方法内部通过this关键字可以访问定义在data中的数据

<div id="app4">
        <input type="button" value="事件绑定" v-on:click="doIt">
        <input type="button" value="事件绑定" v-on:mouseenter="doIt">
        <input type="button" value="事件绑定" v-on:dblclick="doIt"> 
        <-- 在vue中，支持将v-on替换成：@，即下面的写法：--!>
        <input type="button" value="事件绑定" @click="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>

<script>
        var app4 = new Vue({
            el: "#app4",
            data: {
                message: "这里是App4",
                food: "火锅"
            },
            methods: {
                doIt: function() {
                    console.log("doIt")
                },
                changeFood: function() {
                    this.food += "好好吃"
                }
            }
        })
    </script>

v-on补充：

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

<div id="app42">
        <input type="button" value="click" @click="doIt(000,'it')">
        <input type="text" @keyup.enter="sayHi">
    </div>

 <script>
        var app42 = new Vue({
            el: "#app42",
            methods: {
                doIt: function(p1, p2) {
                    console.log(p1);
                    console.log(p2)
                },
                sayHi: function() {
                    alert("吃了吗");
                }
            }
        })
    </script>

五、本地应用vue指令：v-show

1.v-show指令的作用是：根据真假切换元素的显示状态
2.原理是修改元素的display，实现显示隐藏
3.指令后面的内容，最终都会被解析成布尔值
4.值为true元素显示，值为false元素隐藏
5.数据改变之后，对应元素的显示状态会同步更新

<div id="app5">
        <h5 v-show="isShow">
            啊啦啦啦啦啦啦你看得见我吗！
        </h5>
        <input type="button" @click="changeIsShow" value="点击来切换div是否显示"></div>
        <h5 v-show="age>18">
        我满十八岁啦！！！啊啦啦啦啦啦啦你看得见我吗！
        <br>v-show属性里面还可以写条件来使其显示或隐藏。
    </h5>

 <script>
        var app5 = new Vue({
            el: "#app5",
            data: {
                isShow: false,
                age: 19,

            },
            methods: {
                changeIsShow: function() {
                    this.isShow = !this.isShow;
                },
            }
        })
    </script>

六、本地应用vue指令：v-if

<div id="app6">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">v-if</p>
        <p v-show="isShow">v-show</p>
    </div>

<script>
        var app6 = new Vue({
            el: "#app6",
            data: {
                isShow: false,
            },
            methods: {
                toggleIsShow: function() {
                    this.isShow = !this.isShow;

                }
            }
        })
    </script>

通过观察控制台的element可以发现，if和show的区别是：v-if属性为false的时候是直接将元素节点从dom树上移除了，而v-show是设置元素样式style的display为none。所以实际工作中会考虑到性能来选择用哪种属性。

七、本地应用vue指令：v-bind

1.v-bind指令的作用是：为元素绑定属性。
2.完整的写法是v-bind：属性名。
3.简写的话可以直接省略v-bind，只保留 ：属性名。
4.需要动态的增删class建议使用对象的方式。

<div id="app7">
        <img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle">
        <br>
        <img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :class={active:isActive} @click="toggleActive">
    </div>

.active {
            border: 10px solid brown;
        }

<script>
        var app7 = new Vue({
            el: "#app7",
            data: {
                imgSrc: "https://b-ssl.duitang.com/uploads/item/201901/13/20190113171459_ytzrp.jpg",
                imgTitle: "李易峰微博之夜",
                isActive: false,
            },
            methods: {
                toggleActive: function() {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>

八、本地应用vue指令：v-for

1.v-for指令的作用是：根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是（item，index）in 数据
4.item和index可以结合其他指令一起使用
5.数组长度的更新会同步到页面上，是响应式的。

<div id="app8">
    <ul>
        <li v-for="(item,index) in arr" :title="item">
            {{index+"___"}}{{item}}
        </li>
        <li v-for="(item,index) in objArr">
            {{item.name}}
        </li>
    </ul>
</div>

<script>
    var app8 = new Vue({
        el: "#app8",
        data: {
            arr: [1, 2, 3, 4, 5],
            objArr: [{
                name: "jack"
            }, {
                name: "rose"
            }, ]
        }
    })
</script>

九、本地应用vue指令：v-model

1.v-model指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素值相关联
3.绑定的数据和表单数据的值是双向绑定的，无论修改谁的值都会被修改

<div id="app9">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h6>{{message}}</h6>

<script>
    var app9 = new Vue({
        el: "#app9",
        data: {
            message: "这里是app9"
        },
        methods: {
            getM: function() {
                alert(this.message)
            },
            setM: function() {
                this.message = "这里是新的app9"
            }
        }
    })
</script>