一. 认识Vuejs
1.1 Vue.js 的安装
https://cn.vuejs.org/v2/guide/installation.html(vue安装官网)
方式一:直接CDN引入![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/36530cc40826d3eacfc7381fe75e9700.png)
方式二:下载和引入
方式三:NPM安装
后续通过webpack和CLI(脚手架)的时候使用
通过方式二下载和引入
1.2 Vue的初体验
1.2.1 HelloVuejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// let和const的区别
// let定义的是变量,指的是在之后可能会发生变化重新赋值等操作的数据
// const定义的是常量,指不会发生变化了的数据
// 编程范式:声明式编程
const app = new Vue ({
el: '#app', // 用于挂载要管理的元素(和元素的id对应)
data: { // 定义数据
message: '你好呀,xx',
name: 'xiong'
}
})
// 命令式编程(Vuejs之前的常规方式)
// 元素js的做法(编程范式:命令式编程)
// 1.创建div元素,设置好id的属性
// 2.定义一个变量
// 3.将定义的变量放在前面的div元素中进行显示
</script>
</body>
</html>
1.2.1.1 体验修改数据而不修改界面
1.2.2 vue列表展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="a in movies">{{a}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀',
movies: ['星际穿越', '大话西游', '少年派', '少年的你']
}
})
</script>
</body>
</html>
1.2.2.1 尝试页面内向数组添加数据
1.2.3 vue计数器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前数值为: {{counter}}</h2>
<!--<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add: function () {
console.log('add被执行了');
this.counter++
},
sub: function () {
console.log('sub被执行了');
this.counter--
}
}
})
</script>
</body>
</html>
1.3 Vue中的MVVM
1.3.1 什么是MVVM?
-
概念介绍
- MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
1、 M:模型层,主要负责业务数据相关;
2、 V:视图层,顾名思义,负责视图相关,细分下来就是html+css层;
3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点; - MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦;
- MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
-
关系图
1.4 创建Vue时, options可以放那些东西
-
el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。
-
data:
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。
-
methods:
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
-
生命周期函数
new Vue() --> beforeCreate() --> created() --> … --> destroyed()
二. 插值语法
-
mustache语法(也就是双大括号)
-
v-once(该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。)
-
v-html(按照html格式解析并显示)
-
v-text(与Mustache比较相似:都是用于将数据显示在界面中)
-
v-pre: {{}}(用于跳过这个元素和它子元素的编译过程)
-
v-cloak: 斗篷(当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决网页闪烁的问题)
<div id="app" v-cloak>
{{context}}
</div>
[v-cloak]{
display: none;
}
三. v-bind
3.1 v-bind绑定基本属性
- 比如动态绑定a元素的href属性
- 比如动态绑定img元素的src属性
3.2 v-bind动态绑定class
-
对象语法: :class="{类名: boolean}"
用法一:直接通过{}绑定一个类 <h2 :class="{'active': isActive}">Hello World</h2> 用法二:也可以通过判断,传入多个值 <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2> 用法三:和普通的类同时存在,并不冲突 注:如果isActive和isLine都为true,那么会有title/active/line三个类 <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2> 用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2>
-
数组语法: :class="[ ]"
用法一:直接通过{}绑定一个类 <h2 :class="['active']">Hello World</h2> 用法二:也可以传入多个值 <h2 :class=“[‘active’, 'line']">Hello World</h2> 用法三:和普通的类同时存在,并不冲突 注:会有title/active/line三个类 <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2> 用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2>
3.3 v-bind动态绑定style(内联样式)
-
对象语法:
:style="{color: currentColor, fontSize: fontSize + 'px'}" style后面跟的是一个对象类型 对象的key是CSS属性名称 对象的value是具体赋的值,值可以来自于data中的属性
-
数组语法:
<div v-bind:style="[baseStyles, overridingStyles]"></div> style后面跟的是一个数组类型 多个值以,分割即可
四. 计算属性
-
案例一: firstName+lastName
-
案例二: books -> price
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>总价格: {{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{id: 110, name: 'Unix编程艺术', price: 119},
{id: 111, name: '代码大全', price: 105},
{id: 112, name: '深入理解计算机原理', price: 98},
{id: 113, name: '现代操作系统', price: 87},
]
},
computed: {
totalPrice: function () {
let result = 0
for (let i=0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
// for (let i in this.books) {
// this.books[i]
// }
//
// for (let book of this.books) {
//
// }
}
}
})
</script>
</body>
</html>