vuejs基础复习1---指令/基本语法

vue基础复习

学习前知识储备

1.HTML+CSS+JS肯定要会啊!!!
2.ES6知识储备!

一些概念解释

什么是MVVM
MVVM是一种设计模式,是Model-View-ViewMode的缩写。view就是视图层,可以认为就是HTML。Model是数据层,就是我们通过ajax请求后端接口获取到的数据。ViewMode就是vue帮我们做的,将我们的数据绑定到我们要显示的视图层上。

什么是数据驱动
MVVM框架的特点,当数据变化时,视图层显示也会自动变化;反过来也是一样。

为什么要用vue(或者类似的框架)?
1.减少了对dom的操作,我们只需要关心我们的数据,dom操作交给框架就好
2.让前后端分离更彻底

什么SPA应用?
全称是单页Web应用(single page web application,SPA),只有一个HTML页面,通过访问路径不同来切换显示内容。
之前纯HTML+CSS的开发,通过a标签跳转的,有多个页面的就是多页应用。

路由
路由是根据不同的 url 地址展示不同的内容或页面

前后端路由区别?
1.前端路由完全由前端工程师控制,通过不同的URL俩决定显示区域显示的内容,页面不会刷新
2.后端路由是浏览器地址栏切换不同url时,每次都会给后台发送一个请求,然后后端在根据请求返回对应的页面,页面会刷新。

什么叫组件?
1.你可以把它理解成某一个页面,或者某个页面的一部分,比如一个按钮等。
2.我们开发中需要大量重复利用的我们就可以封装成一个共用组件,来重复使用。

正篇

1.以上的概念作为了解即可,先不管什么是单页应用和组件,慢慢就会了解
2.多看vue官方的教程!!!

首先学习vue的基本语法(指令)
1.引入vuejs,下载或者引入cdn到你的HTML文件
2.创建一个vue应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<!-- 使用我们的name变量 这时打开页面 hello world -->
{{name}}
</div>
<!-- 通过CDN的方式引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 书写我们的vue 应用代码
new Vue({
el:"#app",//绑定到我们的视图容器
//data对象中 存放我们的所有数据
data:{
name:"hello world"
}
})
</script>

3.v-if,v-else条件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
<p v-if="on">yes</p>
<p v-else>no</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
new Vue({
el: "#app",
data: {
on: true//on是true时,页面显示yes 反之显示no
}
})
</script>

4.绑定js的原生事件,v-on:加原生js事件名称(以点击事件举例),可以缩写成@加原生js事件名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<button @click="hint">点我</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
new Vue({
el: "#app",
// methods中存放我们的函数
methods:{
// es6中 当键和函数名一样时 可以省略键名
hint(){
alert("你好");
}
}
})
</script>

5.当在html标签中想使用data中的数据时,用v-bind,可以缩写成 :

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<img v-bind:src="src"></img>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
new Vue({
el: "#app",
data:{
src:"图片路径"
}
})
</script>

6.双向绑定数据,v-model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
<!-- 输入的数据保存到msg -->
<input type="text" v-model="msg">
<!-- 显示我们msg的数据 我们可以看到当我们在input输入或删除一些文字时,p标签内容会变化 -->
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
new Vue({
el: "#app",
data:{
msg:"12132"
}
})
</script>

7.动态给html绑定class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.con{
color:red;
}
</style>
<div id="app">
<!-- 当isActive值为true时,给p标签绑定了一个叫con的class isActive为false时不绑定 -->
<p v-bind:class="{con:isActive}">测试内容</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
new Vue({
el: "#app",
data:{
isActive:true
}
})
</script>

8.给html绑定多个class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.con{
color:red;
}
.con2{
font-size:100px;
}
</style>
<div id="app">
<!-- 当isActive值为true时,给p标签绑定了一个叫con的class isActive为false时不绑定 -->
<p v-bind:class="[one.two]">测试内容</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
new Vue({
el: "#app",
data:{
one:"con",
two:"con2"
}
})
</script>

9.computed计算属性

他的作用和一个函数效果是一样的,但是计算属性会缓存我们的计算结果,只有当依赖的数据(实例代码的items)发生改变时,才会重新计算,不然每次调用findSame时,都会使用第一次计算的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="app">
<!-- 应该显示 [1,1] -->
<p>{{findSame}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
new Vue({
el: "#app",
data:{
items:[1,1,2]
},
computed{
findSame(){
let arr=[];
// 查找item中相同的元素,并且装入到一个新数组中并返回
for(let i =0;i<this.items.length;i++){
if(arr.indexOf(this.items[i])==-1){
arr.push(this.items[i]);
}
}
return arr;
}
}
})
</script>