Vue学习-本地应用 基本属性

一、vue简介：

1.是JavaScript框架，需要遵守规则才能使用

2.简化DOM操作

3.响应式数据驱动

二、vue属性

1.el：挂载点：设置Vue实例挂载（管理）的元素

（1）el命中的元素范围内都是作用范围，可以嵌套其他双标签（最好不要挂在body、HTML标签上，尽量使用div）
（2）可以用类选择器、标签选择器，但一般使用id选择器

2.data属性

<div id="app">
        {{message}}
        <h2>{{school.name}}</h2>
        {{campis[0]}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello xiaominmin!',
                school: {
                    name: "小敏敏",
                    mobile: "110"
                },
                campis: ["四川", "福建"]
            }
        })
    </script>

三、本地应用

1.v-text：设置标签的文本值，会替换标签内所有的文本，插值表达式{{message}}只替换大括号内的。

<!-- 导入开发版本的VUE.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
    	<!-- 引号里可以是表达式 -->
        <h2 v-text="message"></h2>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello 小敏敏'
            }
        })
    </script>

2.v-html:设置标签的innerHTML，对于普通文本效果和v-text相同，但对于htm结构可以把值解析为相应的结构

<!-- 导入开发版本的VUE.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <!-- 引号里可以是表达式 -->
        <h2 v-text="message"></h2>
        <p v-html="content"></p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello 小敏敏',
                content: "<a href='https://www.bilibili.com/video/BV12J411m7MG?p=8&spm_id_from=pageDriver'>Hello 小敏敏</a"

            }
        })
    </script>

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

.修饰符对绑定事件进行修饰，例如.enter是限制按下enter键才触发事件
v-on:可以用@替换，message与data、el平级

<!-- 导入开发版本的VUE.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on指令" @click="doIt">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            methods: {
                doIt: function() {
                    alert("揍你！");
                }
            }
        })
    </script>

4.v-show：根据表达式值的真假，切换元素的显示和隐藏。

v-show的值可以是变量、表达式，只要能得到布尔值（true/false）就行。

<!-- 导入开发版本的VUE.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="button" value="切换" id="" @click="changeIshow">
        <br>
        <img src="https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg" alt="" v-show="ishow">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                ishow: false

            },
            methods: {
                changeIshow: function() {
                    this.ishow = !this.ishow
                }
            }
        })
    </script>

5.v-if：根据表达式真假切换元素的显示状态（直接操作元素，不是改变样式）

用法与v-show一样，不过v-if隐藏时直接把元素从结构（dom树中）中去除
频繁切换用v-show，反之用v-if

6.v-bind：设置元素的属性（src、img等）

v-bind:可以用:代替,常用于点击时被选中元素改变样式：设置class值，可以使用三元表达式或对象形式

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

<!-- 导入开发版本的VUE.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <ul>
            <li v-for="item in arr">你好</li>//生成arr.length个你好的li
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: [1, 2, 3, 4, 5]
            },
            methods: {
                // }
            }
        })
    </script>

8.v-model：获取和设置表单元素的值（双向数据绑定：绑定的数据回合表单元素相关联，更改任意一边都会改变）

<div id="app">
        <input type="text" v-model="message">
        <!-- 改变input里时下面message同步更新 -->
        <h2>{{message}}</h2>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "xiam"
            },
            methods: {
            }
        })
    </script>