VUE12.16
VUE框架
vue导入
vue挂载点
<div id='app'></div>
<script>
new Vue (){
el:'#app',
}
</script>
// el 为挂载点，采用css3选择器与页面标签进行绑定，决定该vue对象控制的页面范围
// 挂载点只检索也i按中第一个匹配到的结果，所以挂载点一般都采用id选择器
// html与body标签不可以作为挂载点
vue变量
类似于Django中的模板语法
<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页面模板提供数据变量的
// 访问实例成员可以用 vue实例.$成员名
vue事件
实例1：给P1标签添加点击事件，记录点击次数
实例2：给P2标签添加鼠标悬停、移除鼠标、点击等事件
<div id="app">
<p class="p1" v-on:click="fn">这是一个段落，被点击了{{ count }}下</p>
<p class="p2" @mouseover="over" @mouseout="out" @click="hit">点我：{{ action }}</p>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
count:0,
action:'别点我'
},
methods:{
func(){
this.count++;
console.log(this.count);
},
over(){
this.action = '你被盯上了'
},
out(){
this.action = '你安全了'
},
hit(){
this.action = '你真的点我了，你完了'
}
}
});
</script>
// 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>
vue过滤器
<div id="app">
// 默认将msg作为参数传给ff过滤器
<p>{{ msg|ff }}</p>
// 过滤器可以嵌套，(num|f1)|f2，在num基础上先用f1过滤器，再用f2过滤器
<p>{{ num|f1|f2 }}</p>
// 过滤器括号内可以传参，过滤器方法接受所有传入的参数，按传入的位置进行接收
<p>{{ msg,num|f3(1,2) }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '你不是真正的快乐',
num: 1
},
// 过滤器使用vue实例成员filters来指定过滤器函数
filters:{
ff(x,y){
console.log(x);
console.log(y);
return `<b>${x}</b>`;
},
f1(x){
return x + 10
},
f2(x){
return x*5
},
f3(x,y,p,q){
console.log(x);
console.log(y);
console.log(p);
console.log(q);
},
},
})
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>
