Vue学习笔记--＞＞基础篇
Vue学习笔记
- 一、Vue核心
-
- 1、Vue的基本认识
-
- 1、官网
- 2、介绍
- 3、特点
- 4、与其它前端 JS 框架的关联
- 5、vue扩展插件
- 2、Vue的基本使用
- 3、理解Vue的MVVM
- 4、模板语法
- 5、计算属性基本使用
- 6、强制绑定class和style
- 7、条件渲染
- 8、列表渲染
-
- 维护状态
- 数组更新检测
- 9、列表的搜索与排序
- 10、事件处理
- 11、表单数据的自动收集
- 12、Vue生命周期
- 13、过渡和动画
-
- 1、css过渡
- 2、css动画
- 3、自定义过渡的类名
- 4、JavaScript 钩子
- 14、过滤器
- 15、指令
- 16、自定义指令
- 17、插件
一、Vue核心
1、Vue的基本认识
1、官网
中文官网https://cn.vuejs.org/
英文官网https://vuejs.org
2、介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
3、特点
1）遵循MVVM模式
2）编码简洁，体积小，运行效率高，适合移动/PC端开发
3）它本身只关注UI，可以轻松引入vue插件或其它第三方库开发项目
4、与其它前端 JS 框架的关联
- 借鉴 angular 的模板和数据绑定技术
- 借鉴 react 的组件化和虚拟DOM技术
5、vue扩展插件
1)vue-cli: vue 脚手架
2) vue-resource(axios): ajax 请求
3) vue-router: 路由
4)vuex:状态管理
5）vue-lazyload图片懒加载
6）vue-scroller页面滑动相关
7）mint-ui基于vue的ui组件库（移动端）
8）element-ui基于vue的ui组件库（PC端）
2、Vue的基本使用
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_HelloWorldtitle>
head>
<body>
<div id="test">
<input type="text" v-model="msg"><br>
<input type="text" v-model="msg">
<p>hello {
{msg}}p>
<p v-text="msg">p>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
const vm = new Vue({
// 配置对象 options
// 配置选项(option)
el: '#test', // element: 指定用vue来管理页面中的哪个标签区域
data: {
msg: 'hahaahah'
}
})
vm.msg = 'qwertyui';
script>
body>
html>
3、理解Vue的MVVM
model：模型，数据对象（data）
view： 视图，模板页面
viewModel： 视图模型（Vue的实例）
4、模板语法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>1. 双大括号表达式h2>
<p>{
{msg}}p>
<p>{
{msg.toUpperCase()}}p>
<p v-text="msg">p>
<p v-html="msg">p>
<h2>2. 指令一: 强制数据绑定h2>
<img v-bind:src="imgUrl">
<img :src="imgUrl">
<h2>3. 指令二: 绑定事件监听h2>
<button v-on:click="test">test1button>
<button @click="test2('acs')">test1button>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
msg: 'I Will Back!',
imgUrl: 'https://cn.vuejs.org/images/logo.png'
},
methods: {
test() {
alert("kasj")
},
test2(content) {
alert(content)
}
}
})
script>
body>
html>
5、计算属性基本使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_计算属性和监视title>
head>
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
<p>{
{fullName1}}p>
<p>{
{fullName1}}p>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A-B'
},
// 计算属性配置: 值为对象
computed: {
fullName1() {
// 属性的get()
console.log('fullName1()', this)
return this.firstName + '-' + this.lastName
},
fullName3: {
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get() {
console.log('fullName3 get()')
return this.firstName + '-' + this.lastName
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set(value) {
// fullName3的最新value值 A-B23
console.log('fullName3 set()', value)
// 更新firstName和lastName
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch: {
// 配置监视firstName
firstName: function(value) {
// 相当于属性的set
console.log('watch firstName', value)
// 更新fullName2
this.fullName2 = value + '-' + this.lastName
}
}
})
// 监视lastName
vm.$watch('lastName', function(value) {
console.log('$watch lastName', value)
// 更新fullName2
this.fullName2 = this.firstName + '-' + value
})
script>
body>
html>
6、强制绑定class和style
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_class与style绑定title>
<style>
.classA {
color: red;
}
.classB {
background: blue;
}
.classC {
font-size: 20px;
}
style>
head>
<body>
<div id="demo">
<h2>1. class绑定: :class='xxx'h2>
<p :class="myClass">xxx是字符串p>
<p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象p>
<p :class="['classA', 'classB']">xxx是数组p>
<h2>2. style绑定h2>
<p :style="{
color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"p>
<button @click="update">更新button>
div>
<script type="text/javascript" src="../js/vue.js">script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
myClass: 'classA',
hasClassA: true,
hasClassB: false,
activeColor: 'red',
fontSize: '20px'
},
methods: {
update() {
this.myClass = 'classB'
this.hasClassA = !this.hasClassA
this.hasClassB = !this.hasClassB
this.activeColor = 'yellow'
this.fontSize = '30px'
}
}
})
script>