vue基础

一、导入vue

补充：vue的语句以及导入js文件一般写在</body>和</html>中间。

二、vue挂载点

<div id='app'></div>
<script>
    new Vue (){
        el:'#app',
    }    
</script>

// el是element的缩写。为挂载点，采用css3选择器与页面标签进行绑定，决定该vue对象控制的页面范围，控制范围包括内部所有子标签
// 挂载点只检索el中第一个匹配到的结果，所以挂载点一般都采用id选择器，有唯一性
// html与body标签不可以作为挂载点

三、vue变量

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ info }}</p>
    <h3>{{ msg }}</h3>
</div>
<script>
    new Vue (){
        el:'#app',
        data:{
            msg:'信息',
            info:'渲染'
        }
    }
    console.log(app.$el);
    console.log(app.$data);
</script>

// 实例成员中的data为挂载点内部提供数据
// 访问实例成员可以用 vue实例.$成员名

// 声明的实例是否用一个变量接收
// 1、在实例内部不需要，用this就代表当前vue实例本身
// 2、在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例

四、vue事件

实例1：给P1标签添加点击事件，记录点击次数

<body>

<div id="app">
    <p class="p1" @click="fn">这是一个段落，被点击了{{ count }}下</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
        },
        methods: {
            fn() {
                this.count++;
                console.log(this.count);
            }
        }
    });
</script>

实例2：给P2标签添加鼠标悬停、移除鼠标、点击等事件

<body>
<div id="app">
    <p @click="f1" @mouseover="f2" @mouseout="f3" @mousedown="f4" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
  new Vue({
        el: '#app',
        data: {
            action: '鼠标事件',
        },
        methods: {
            f1 () {
                this.msg = '点击了'
            },
            f2 () {
                this.action = '悬浮';
            },
            f3 () {
                this.action = '离开'
            },
            f4 () {
                this.action = '按下'
            },
            f5 () {
                this.action = '抬起'
            },
            f6 () {
                this.action = '移动';
            },
            f7 () {
                this.action = '右键';
            }
        }
    })
</script>
</html>

补充: v-on:事件 = ”变量“ | @事件=”变量“ | @事件=“变量()” | @事件=“变量($event,...)”

事件变量，不添加()，默认会传事件对象: $event
事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象
methods就是为vue实例提供事件函数的
this代表当前该vue实例对象
绑定事件用 v-on:事件名="触发函数名"，也可使用简写：@事件名="触发函数名"

五、vue文本指令

<!--v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!--v-html：可以解析html语法标签的文本 -->
<p v-html="'<b>' + msg + '</b>'"></p>
<p v-html="`<b>${msg}</b>`"></p>
<!--  v-once：只解析一次的文本 -->

六、vue事件指令

<p @click="f1">被点击了{{ count }}下</p>
// 当事件函数没有传参数，默认传入事件对象
<div class="box" @click="f2(10, $event)"></div>
// 事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event

methods: {
    f1(ev, b) {
        this.count ++;
        console.log(ev); // MouseEvent
        console.log(b); // undefined
    },
    f2(num, ev) {
        console.log(num); // 10
        console.log(ev); // MouseEvent
    }
},

七、vue属性指令

<!--1.下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--2.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量" -->
<!--只要是属性指令，属性值就为一个变量，需要在data成员中初始化 -->

<!--class可以写两份，一份写死，一份有vue控制-->
<div class="box1" :class="c2"></div>

<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box2:true, circle:cable}"></div>

<!--[]控制多个类名-->
<div :class="[c3, c4]"></div>