[TOC]
Vue基础
基础
首先我们要知道Vue是什么,他是一种框架,一种渐进式的JavaScript框架,JavaScript我们都知道,是一种非常神奇的东西,主要用于渲染网页,可以给网页赋予很多动态的效果,当然还有很多别的用处,这里只是简单说说一下,毕竟我们的重点应该是介绍Vue,而不是JavaScript.
所以,在我们知道Vue是一种基于JavaScript的框架,那么他肯定有自己的优势,主要体现为以下几点:
- Vue可以独立的完成前后端分离的web项目
- Vue被设计为是可以自底向上逐层应用
- Vue的核心库只关注视图层,不仅易于上手而且便于和很多的第三方库结合.
- Vue和各种类库结合使用的时候,完全可以为复杂的单页应用起到一个驱动的作用,这是非常关键的.
当然这些单纯的理论可能会非常的无聊,所以我们只有在真正使用起来这个框架之后,才会理解到为什么要使用他,当然这是建立在你有别的框架使用经验的情况下.
导入
使用非常的简单,我们可以用两种方法来导入vue的文件,一种在线的cdn,或者把Vue的js文件下载下来,直接在本地导入的方法.Vue的在线CDN如下:
开发环境版本:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本,减少了空格和格式,加载速度会更快:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
如果要要本地导入,和导入JS的方法完全一样,举例如下:
<script src="js/vue.js"></script>
在导入了正确的Vue之后,我们就可以开始正式使用它了.
1. 挂载
通常情况下,我们的Vue是需要挂载的,挂载的目的是为了将css3的语法和我们页面中的标签进行绑定,进而通过vue来控制页面中的某个或者某些或者所有的标签.
要注意的一点是,挂载点只会检索到页面中匹配到的第一个结果,如果你是单个匹配的话,所以一般挂载点会选择用id选择器来挂载,因为id通常是唯一的,而类名不是唯一的,容易重复,通过类来取标签就会有误差.
还有一点就是html和body标签不可以作为挂载点,这是vue内部规定的,我们要牢记.
new Vue({
el:'#app'
})
# 或者我们可以直接将其赋给一个变量,比如
let app = new Vue({
el:'#app'
})
在挂载完成之后,我们就可以做一些简单的测试和操作了.
2. 插值表达式
顾名思义,就是往中间插入值,实际上用的还是模板语法{{}},只不过换了一种叫法
比如,我们这么定义
<body>
<div id="app">
<p>{{ msg }}</p> <!--这里就是定义在body里面的变量,双大括号包裹可以从后面定义的vue的data里面直接取值-->
<p>{{ info+'拼接内容' }}</p>
<h3>{{ msg[1] }}</h3> <!--插值表达式里面我们可以完成变量的渲染,基础运算,调用,以及很多基础的功能-->
<h3>{{ msg.slice(2,4) }}</h3>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 实例成员中的data就是为vue页面模板准备的,可以任意调用
let app = new Vue({
el: '#app',
data: {
msg: 'message',
info: 'vue变量信息'
}
});
console.log(app.info);
// 创建vue实例（new Vue）传进去的字典(对象)的key，被称为vue的实例成员,访问实例成员时,用 vue实例.$成员名,比如下面的例子,在取第一层的时候要加$符,点出来第二层就不再需要
console.log(app.$el);
console.log(app.$data);
console.log(app.$data.msg);
</script>
3. 事件
我们知道事件是一个非常广泛的概念,包括在js里面,jq里面,也都会有事件这种概念,而在之前的js里面我们通常会用ajax来绑定事件,从而向后端发送信息,这里Vue自己就附带了这种绑定事件的功能,通常会放在methods里面,具体如下:
<body>
<div id="app">
<p class="p1" v-on:click="fn">这是一个段落，被点击了{{ count }}下</p>
<!--在Vue里面我们通常用v-on:事件='自定义事件名称'来定义一个事件,然后在下面的Vue的methods里面写入该事件的具体逻辑-->
<!--事件的定义方式还包括
1. @事件名=""
2. :事件名=""
3. :事件名="fn($event,自定义参数)"
-->
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0,
action: '渲染',
// fn: function () {
// // console.log(app.count);
// // app.count ++
// console.log(this);
// 这里要注意,在data里面也可以直接定义事件,或者说方法,但是这里定义的方法所用的this不是指该vue实例对象，而是顶级Window对象,所以使用起来有诸多不便,还是推荐在methods里面去写事件函数
}
},
// methods就是为vue实例提供事件函数的
methods: {
fn: function () {
// console.log(app.count);
// app.count ++;
// console.log(this);
// 这里的this就是代表当前该vue实例对象,使用起来非常的方便`1
this.count ++
},
}
});
</script>
4. 创建对象
Vue里面创建对象通常有两种方式,即通过创建类,然后实例化产生对象,以及直接声明对象
通过创建类然后实例化来生成对象
function People(name, age) { this.name = name; this.age = age; this.eat = function () { console.log(this.name + '在吃饭'); } } let p1 = new People('Xiaoming', 17.5); console.log(p1.name); let res = p1.eat(); console.log(res);直接声明创建对象
let stu1 = { name: '张三', age: 18, eat () { console.log(this.name + '在吃饭'); } //这里我们直接用方法名(){}的方法就可以在对象内部定义其独有的方法,而且这种是简写的方法,即{fn:function(){}}<=>{fn(){}}是等价的 }; stu1.eat()
5. v-text和v-html
字面意思,v-text就是把里面的内容当做文本进行渲染,而v-html则会把其中的内容解析出来,包括可以解析html语法标签的文本.比如
<!--v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!--v-html：可以解析html语法标签的文本,b会解析成加粗,然后赋给中间的文本值 -->
<p v-text="'<b>' + msg + '</b>'"></p>
<p v-html="'<b>' + msg + '</b>'"></p>
6. vue的过滤器
vue常用过滤器的的关键字为filters,用法和常用过滤器也相似.
<body>
<div id="app">
<!-- 这里默认会将msg作为参数传给filterFn -->
<p>{{ msg | filterFn }}</p>
<!--过滤器同样可以串联使用,这样前一个过滤器后的结果是后一个过滤器的起始数据-->
<p>{{ num | f1 | f2 }}</p>
<!--还可以可以同时对多个变量进行过滤,同时过滤器还可以额外传入参数辅助过滤-->
<!--过滤器会接收所有传入的参数，按传入的位置进行接收,也就是位置参数的意思-->
<p>{{ msg, num | f3(666, '好的') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本内容',
num: 1
},
filters: {
filterFn(v1, v2) {
// console.log(v1);
// console.log(v2);
return `<b>${v1}</b>`;
},
f1(v1) {
return v1 * 100;
},
f2(v1) {
return v1 * 100;
},
}
})
</script>
7. 属性指令
属性也是我们经常会使用到的一些东西,因为属性可以修改很多东西,比如一个标签的长度,种类,或者是其样式等等.之前在js里面常用到的属性就是class和style等等.
<body>
<div id="app">
<!--下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的,其中class,id我们是比较熟悉的,title可能不太熟悉,但是也能理解是什么意思,abc可能不太理解,实际上只是一个自定义的属性,仅此而已,会方便我们以后取一些不好取的值,或者直接调用该标签-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--属性指令：固定用法, v-bind:属性名="变量"，简写方式 :属性名="变量" -->
<!--属性指令操作 style 属性-->
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
<!-- 通常：变量值为字典 -->
<div :style="mys1"></div>
<!--重点：一般vue都是结合原生css来完成样式控制 -->
<!--<div :class="c1"></div>-->
<!--class可以写两份，一份写死，一份有vue控制,这样对于整个项目会更加方便-->
<div class="box1" :class="c2"></div>
<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]可以控制多个类名-->
<div :class="[c3, c4]"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
title: '12345',
xyz: 'opq',
mys1: {
width: '200px',
height: '200px',
// 'background-color': 'greenyellow'
backgroundColor: 'pink',
},
w: '200px',
c1: 'box1',
c2: 'circle',
cable: false,
c3: 'box1',
c4: 'circle'
},
methods: {
changeCable(n) {
this.cable = n;
}
}
});
//setInterval起到一个定时器的作用,最后一个参数是循环的时间,单位是微秒,中间则是我们需要实现的逻辑
setInterval(function () {
if (app.c1 === 'box1') {
app.c1 = 'box2';
} else {
app.c1 = 'box1';
}
}, 300)
</script>