1.1. Vue的基本认识

1.1.1. 官网

1. 英文官网:https://vuejs.org/

2. 中文官网:https://cn.vuejs.org/

1.1.2. 介绍描述

1. 渐进式 JavaScript 框架

2. 作者: 尤雨溪(一位华裔前 Google 工程师)

3. 作用: 动态构建用户界面

1.1.3. Vue 的特点

1. 遵循 MVVM 模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

1.1.4. 与其它前端 JS 框架的关联

1. 借鉴 angular 的模板和数据绑定技术

2. 借鉴 react 的组件化和虚拟 DOM 技术

1.1.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 端)

1.2. Vue的基本使用

1.2.1. 效果(01_HelloWorld/test.html)

01_helloworld.gif

1.2.2. 编码

<div id="app"><input type="text" v-model="username"><p>Hello, {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#app',data: {username: 'atguigu'}})
</script>

1.2.3. 使用 vue 开发者工具调试

Vue.js devtools_3.1.2_0.crx

1.2.4. 理解 Vue 的 MVVM

1.3.模板语法

1.3.1. 效果(02_模板语法/test.html)

02_模板语法.gif

1.3.2. 模板的理解

1. 动态的 html 页面

2. 包含了一些 JS 语法代码

a. 双大括号表达式

b. 指令(以 v-开头的自定义标签属性)

1.3.3. 双大括号表达式

1. 语法: {{exp}}

2. 功能: 向页面输出数据

3. 可以调用对象的方法

1.3.4. 指令一: 强制数据绑定

1. 功能: 指定变化的属性值

2. 完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行

3. 简洁写法: :xxx=‘yyy’

1.3.5. 指令二: 绑定事件监听

1. 功能: 绑定指定事件名的回调函数

2. 完整写法:

v-on:keyup='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'

3. 简洁写法:

@keyup='xxx'
@keyup.enter='xxx'

1.3.6. 编码

<div id="app"><h2>1. 双大括号表达式</h2><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p><h2>2. 指令一: 强制数据绑定</h2><a href="url">访问指定站点</a><br><!--不能使用--><a v-bind:href="url">访问指定站点 2</a><br><a :href="url">访问指定站点 3</a><br><h2>3. 指令二: 绑定事件监听</h2><button v-on:click="handleClick">点我</button><button @click="handleClick">点我 2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({el: '#app',data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问msg: 'NBA I Love This Game!',url: 'http://www.baidu.com'},methods: {handleClick () {alert('处理点击')}}
})
</script>

1.4.计算属性和监视

1.4.1. 效果(03_计算属性和监视/test.html)

03_计算属性和监视.gif

1.4.2. 计算属性

1. 在 computed 属性对象中定义计算属性的方法

2. 在页面中使用{{方法名}}来显示计算的结果

1.4.3. 监视属性

1. 通过 vm 对象的 $watch() 或 watch 配置来监视指定的属性

2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

1.4.4. 计算属性高级

1. 通过 getter/setter 实现对属性数据的显示和监视

2. 计算属性存在缓存, 多次读取只执行一次 getter 计算

1.4.5. 编码

<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 Name" v-model="fullName1"><br>姓名 2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>姓名 3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({el: '#demo',data: {firstName: 'Kobe',lastName: 'bryant',fullName2: 'Kobe bryant'},computed: {fullName: function () {return this.firstName + " " + this.lastName},fullName3: {get: function () {return this.firstName + " " + this.lastName},set: function (value) {var names = value.split(' ')this.firstName = names[0]this.lastName = names[1]}}},watch: {lastName: function (newVal, oldVal) {this.fullName2 = this.firstName + ' ' + newVal}}
})
vm.$watch('firstName', function (val) {this.fullName2 = val + ' ' + this.lastName
})

1.5. class与style绑定

1.5.1. 效果 (04_class 与 style 绑定/test.html)

04_class与style绑定.gif

1.5.2. 理解

1. 在应用界面中, 某个(些)元素的样式是变化的

2. class/style 绑定就是专门用来实现动态样式效果的技术

1.5.3. class 绑定

1. :class=‘xxx’

2. 表达式是字符串: ‘classA’

3. 表达式是对象: {classA:isA, classB: isB}

4. 表达式是数组: [‘classA’, ‘classB’]

1.5.4. style 绑定

1. :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"

2. 其中 activeColor/fontSize 是 data 属性

1.5.5. 编码

<style>
.classA {color: red;
}
.classB {background: blue;
} 
.classC {font-size: 20px;
}
</style>
<div id="demo">
<h2>1. class 绑定: :class='xxx'</h2>
<p class="classB" :class="a">表达式是字符串: 'classA'</p>
<p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
<p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>
<h2>2. style 绑定</h2>
<p :style="{color, 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 : {a: 'classA',isA: true,isB: false,color: 'red',fontSize: '20px'},methods : {update () {this.a = 'classC'this.isA = falsethis.isB = truethis.color = 'blue'this.fontSize = '30px'}}
})
</script>

1.6.条件渲染

1.6.1. 效果 (05_条件渲染/test.html)

05_条件渲染.gif

1.6.2. 条件渲染指令

1. v-if 与 v-else

2. v-show

1.6.3. 比较 v-if 与 v-show

1. 如果需要频繁切换 v-show 较好

2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

1.6.4. 编码

<div id="demo">
<h2 v-if="ok">表白成功</h2>
<h2 v-else>表白失败</h2>
<h2 v-show="ok">求婚成功</h2>
<h2 v-show="!ok">求婚失败</h2>
<br>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
ok: false
}
})
</script>

1.7.列表渲染

1.7.1. 效果 (06_列表渲染/test.html)

06_列表渲染.gif 06_列表的过滤和排序.gif

1. 列表显示指令

数组: v-for / index

对象: v-for / key

2. 列表的更新显示

删除 item

替换 item

3. 列表的高级处理

列表过滤

列表排序

1.7.2. 编码 1

<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
--
<button @click="deleteItem(index)">删除</button>
--
<button @click="updateItem(index, {name:'Jok',age:15})">更新</button>
</li>
</ul>
<h2>测试: v-for 遍历对象</h2>
<ul>
<li v-for="(value, key) in persons[0]">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 14}
]
},
methods: {
deleteItem(index) {
this.persons.splice(index, 1)
},
updateItem(index, p) {
// this.persons[index] = p // 页面不会更新
this.persons.splice(index, 1, p)
}
}
})
</script>

1.7.3. 编码 2

<div id="demo">
<input type="text" name="searchName" placeholder="搜索指定用户名"
v-model="searchName">
<ul>
<li v-for="(p, index) in filterPerson" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
orderType: 0, //0 代表不排序, 1 为升序, 2 为降序
searchName: '',
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 17},
{id: 4, name: 'Cat', age: 14},
{id: 4, name: 'Mike', age: 14},
{id: 4, name: 'Monica', age: 16}
]
},
methods: {
setOrderType (orderType) {
this.orderType = orderType
}
},
computed: {
filterPerson() {
let {orderType, searchName, persons} = this
// 过滤
persons = persons.filter(p => p.name.indexOf(searchName)!=-1)
// 排序
if(orderType!==0) {
persons = persons.sort(function (p1, p2) {
if(orderType===1) {
return p1.age-p2.age
} else {
return p2.age-p1.age
}
})
} r
eturn persons
}
}
})
</script>

1.8.事件处理

1.8.1. 效果 (07_事件处理/test.html)

07_事件处理.gif

1.8.2. 绑定监听:

1. v-on:xxx=“fun”

2. @xxx=“fun”

3. @xxx=“fun(参数)”

4. 默认事件形参: event

5. 隐含属性对象: $event

1.8.3. 事件修饰符

1. .prevent : 阻止事件的默认行为 event.preventDefault()

2. .stop : 停止事件冒泡 event.stopPropagation()

1.8.4. 按键修饰符

1. .keycode : 操作的是某个 keycode 值的键

2. .keyName : 操作的某个按键名的键(少部分)

1.8.5. 编码

<div id="example">
<h2>1. 绑定监听</h2>
<button v-on:click="test1">Greet</button>
<button @click="test1">Greet2</button>
<button @click="test2($event, 'hello')">Greet3</button>
<h2>2. 事件修饰符</h2>
<!-- 阻止事件默认行为 -->
<a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
<br/>
<br/>
<!-- 停止事件冒泡 -->
<div style="width: 200px;height: 200px;background: red" @click="test4">
<div style="width: 100px;height: 100px;background: green"
@click.stop="test5"></div>
</div>
<h2>3. 按键修饰符</h2>
<input @keyup.8="test6">
<input @keyup.enter="test6">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
methods: {
test1 (event) {
// 方法内 `this` 指向 vm
// alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.innerHTML)
},
test2 (event, msg) {
alert(event.target.innerHTML + '---' + msg)
},
test3() {
alert('阻止事件的默认行为')
},
test4() {
alert('out')
},
test5() {
alert('inner')
},
test6(event) {
alert(event.keyCode + '---' + event.target.value)
}
}
})
</script>

1.9.表单输入绑定

1.9.1. 效果 (08_表单输入绑定/test.html)

08_表单输入绑定.gif

1.9.2. 使用 v-model 对表单数据自动收集

1. text/textarea

2. checkbox

3. radio

4. select

1.9.3. 编码

<div id="demo">
<form @submit.prevent="handleSubmit">
<span>用户名: </span>
<input type="text" v-model="user.username"><br>
<span>密码: </span>
<input type="password" v-model="user.pwd"><br>
<span>性别: </span>
<input type="radio" id="female" value="female" v-model="user.sex">
<label for="female">女</label>
<input type="radio" id="male" value="male" v-model="user.sex">
<label for="male">男</label><br>
<span>爱好: </span>
<input type="checkbox" id="basket" value="basketball"
v-model="user.likes">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="football"
v-model="user.likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang"
v-model="user.likes">
<label for="pingpang">乒乓</label><br>
<span>城市: </span>
<select v-model="user.cityId">
<option value="">未选择</option>
<option v-for="city in allCitys" :value="city.id">
{{ city.name }}
</option>
</select><br>
<span>介绍: </span>
<textarea v-model="user.desc" rows="10"></textarea><br><br>
<input type="submit" value="注册">
</form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
user: {
username: '',
pwd: '',
sex: 'female',
likes: [],
cityId: '',
desc: '',
},
allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SZ'},{id: 4, name:
'SH'}],
},
methods: {
handleSubmit (event) {
alert(JSON.stringify(this.user))
}
}
})
</script>

1.10. Vue实例生命周期

1.10.1. 效果 (09_Vue 实例_生命周期/test.html)

09_Vue实例_生命周期.gif

1.10.2. 生命周期流程图

1.10.3. vue 生命周期分析

1. 初始化显示

• beforeCreate()

• created()

• beforeMount()

• mounted()

2. 更新状态: this.xxx = value

• beforeUpdate()

• updated()

3. 销毁 vue 实例: vm.$destory()

• beforeDestory()

• destoryed()

1.10.4. 常用的生命周期方法

1. created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务

2. beforeDestory(): 做收尾工作, 如: 清除定时器

1.10.5. 编码

<div>
<button @click="destoryVue">destory vue</button>
<p v-show="isShowing">{{msg}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: 'div',
data: {
msg: '尚硅谷 IT 教育',
isShowing: true,
persons: []
},
beforeCreate () {
console.log('beforeCreate() msg=' + this.msg)
},
created () {
console.log('created() msg='+this.msg)
this.intervalId = setInterval(() => {
console.log('-----')
this.isShowing = !this.isShowing
}, 1000)
},
beforeMount () {
console.log('beforeMount() msg='+this.msg)
},
mounted () {
console.log('mounted() msg='+this.msg)
},
beforeUpdate() {
console.log('beforeUpdate isShowing='+this.isShowing)
},
updated () {
console.log('updated isShowing='+this.isShowing)
},
beforeDestroy () {
console.log('beforeDestroy() msg='+this.msg)
clearInterval(this.intervalId)
},
destroyed () {
console.log('destroyed() msg='+this.msg)
},
methods: {
destoryVue () {
vue.$destroy()
}
}
})
</script>

1.11.过渡&动画

1.11.1. 效果 (10_过渡&动画/test.html)

10_过渡&动画1.gif

10_过渡&动画2.gif

1.11.2. vue 动画的理解

1. 操作 css 的 trasition 或 animation

2. vue 会给目标元素添加/移除特定的 class

3. 过渡的相关类名

xxx-enter-active: 指定显示的 transition

xxx-leave-active: 指定隐藏的 transition

xxx-enter/xxx-leave-to: 指定隐藏时的样式

1.11.3. 基本过渡动画的编码

1. 在目标元素外包裹

2. 定义 class 样式

指定过渡样式: transition

指定隐藏时的样式: opacity/其它

1.11.4. 编码 1

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
} .
fade-enter, .fade-leave-to {
opacity: 0
} /
* 可以设置不同的进入和离开动画 */
.slide-fade-enter-active {
transition: all .3s ease;
} .
slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} .
slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
<div id="demo1">
<button @click="show = !show">
Toggle1
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<div id="demo2">
<button @click="show = !show">
Toggle2
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo1',
data: {
show: true
}
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
</script>

1.11.5. 编码 2

<style>
.bounce-enter-active {
animation: bounce-in .5s;
} .
bounce-leave-active {
animation: bounce-in .5s reverse;
} @
keyframes bounce-in {
0% {
transform: scale(0);
} 5
0% {
transform: scale(1.5);
} 1
00% {
transform: scale(1);
}
}
</style>
<div id="test2">
<button @click="show = !show">Toggle show</button>
<br>
<transition name="bounce">
<p v-if="show" style="display: inline-block">Look at me!</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: '#test2',
data: {
show: true
}
})
</script>

1.12.过滤器

1.12.1. 效果 (11_过滤器/test.html)

1.12.2. 理解过滤器

1. 功能: 对要显示的数据进行特定格式化后再显示

2. 注意: 并没有改变原本的数据, 可是产生新的对应的数据

1.12.3. 定义和使用过滤器

1. 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,…]){

// 进行一定的数据处理

return newValue

})

2. 使用过滤器

1.12.4. 编码

<div id="test">
<p>当前时间为: {{currentTime}}</p>
<p>当前时间 1 为: {{currentTime | dateStr}}</p>
<p>当前时间 2 为: {{currentTime | dateStr('YYYY-MM-DD')}}</p>
<p>当前时间 3 为: {{currentTime | dateStr('HH:mm:ss')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript"
src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script>
<script>
// 注册过滤器
Vue.filter('dateStr', function (value, format) {
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el: '#test',
data: {
currentTime: new Date()
}
})
</script>

1.13.内置指令与自定义指令

1.13.1. 效果 (12_指令/test.html)

12_指令_内置指令.gif

1.13.2. 常用内置指令

1. v:text : 更新元素的 textContent

2. v-html : 更新元素的 innerHTML

3. v-if : 如果为 true, 当前标签才会输出到页面

4. v-else: 如果为 false, 当前标签才会输出到页面

5. v-show : 通过控制 display 样式来控制显示/隐藏

6. v-for : 遍历数组/对象

7. v-on : 绑定事件监听, 一般简写为@

8. v-bind : 强制绑定解析表达式, 可以省略 v-bind

9. v-model : 双向数据绑定

10. ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象

11. v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

1.13.3. 自定义指令

1. 注册全局指令

Vue.directive(‘my-directive’, function(el, binding){

el.innerHTML = binding.value.toupperCase()

})

2. 注册局部指令

directives : {

‘my-directive’ : {

bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

}

}

3. 使用指令

v-my-directive=‘xxx’

1.13.4. 编码 1(内置指令)

<style>
[v-cloak] {
display: none
}
</style>
<div id="example">
<p v-text="url"></p>
<p v-html="url"></p>
<img :id="myid" :src="imageSrc">
<p>
<span ref="message">atguigu.com</span>
<button @click="showMsg">显示左侧文本</button>
</p>
<p v-cloak>{{url}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
alert('模拟加载慢')
new Vue({
el: '#example',
data: {
url: '<a href="http://www.atguigu.com">尚硅谷</a>',
myid: 'abc123',
imageSrc: 'http://cn.vuejs.org/images/logo.png'
},
methods: {
showMsg: function () {
alert(this.$refs.message.textContent)
}
}
})
</script>

1.13.5. 编码 2(自定义指令)

需求: 自定义 2 个指令

1. 功能类型于 v-text, 但转换为全大写

2. 功能类型于 v-text, 但转换为全小写

<div id="demo1">
<p v-upper-text="msg"></p>
<p v-lower-text="msg"></p>
</div>
<div id="demo2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p> <!--局部指令, 此处不能使用-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//注册全局指令
Vue.directive('upper-text', function (el, binding) {
el.innerHTML = binding.value.toUpperCase()
})
new Vue({
el: '#demo1',
data: {
msg: 'NBA love this game!'
},
directives: { // 注册局部指令
'lower-text': {
bind (el, binding) {
el.innerHTML = binding.value.toLowerCase()
}
}
}
})
new Vue({
el: '#demo2',
data: {
msg2: 'I Like You'
}
})
</script>

1.14.自定义插件

1.14.1. 效果 (13_插件/test.html)

13_插件.gif

1.14.2. 说明

1. Vue 插件是一个包含 install 方法的对象

2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

1.14.3. 编码

1) 插件 JS
/**
* 自定义 Vue 插件
*/
(function () {
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
alert('Vue 函数对象方法执行')
} //
2. 添加全局资源
Vue.directive('my-directive', function (el, binding) {
el.innerHTML = "MyPlugin my-directive " + binding.value
})
// 3. 添加实例方法
Vue.prototype.$myMethod = function () {
alert('vue 实例对象方法执行')
}
}
window.MyPlugin = MyPlugin
})()
2) 页面使用插件
<div id="demo">
<!--使用自定义指令-->
<p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
//使用自定义插件
Vue.use(MyPlugin)
var vm = new Vue({
el: '#demo',
data: {
msg: 'atguigu'
}
})
//调用自定义的静态方法
Vue.myGlobalMethod()
//调用自定义的对象方法
vm.$myMethod()
</script>