Vue基础简介
目录
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>
