视频教程
由于思否不支撑视频外链 视频请移步 http://www.henrongyi.top
你能学到什么
手挽手带你学VUE入门三档,VUE组织器内部的种种属性的运用，methods，computed，watch，filters这四个属性，在工作中会经经常使用到。另有许多夹杂属性比方mixin等，后期会有视频零丁引见，我们现在先做到入门能够开辟，不经常使用的用法后期会给人人补充，学完这一期，你已能够开辟一个小项目玩一下了。
methods选项
methods是我们VUE中的事宜处置惩罚器，你能够把要领写在这内里，并且在组织器内部经由过程this.要领名挪用，之前的进修中我们已运用过这个要领，然则这里强调一下，万万不能够用箭头函数，毕竟这里我们的this是须要指向VUE实例的。在VUE组织器的外部我们也能够经由过程实例来挪用要领。这里给人人举个例子。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="add">+</button>{{num}}<button @click="minus">-</button>
<!-- 这里我们经由过程click来挪用了add和minus要领 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add(){
this.num++
},
minus(){
this.num--
this.testMet()//这里我们经由过程this来挪用事宜处置惩罚器内的要领
},
testMet(){
console.log("我被挪用了")
}
}
})
app.testMet()//这里我们经由过程app实例来挪用事宜处置惩罚器内的要领
</script>
</body>
</html>
computed选项
还记得我们第一期讲的谁人在差值表达式内写简朴的JS表达式吗{{message.split('').reverse().join('')}}，
实际上如许处置惩罚数据是不文雅的，VUE为我们供应了computed这个选项来处置惩罚数据，我们称它为盘算属性，当逻辑庞杂的时刻
我们就应该运用 computed盘算属性了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id="app">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
// 盘算属性的 getter
reversedMessage: function () {
// `this` 指向 app 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>这是一个盘算属性的简朴用例，实际上，盘算属性内部存在get和set两个要领，我们称他为 getter和setter，这里我给人人上代码解说。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id="app">
<p>{{firstName}}</p>
<p>{{lastName}}</p>
<p>{{fullName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
// 盘算属性的 getter
fullName:{
// getter 在运用数据的时刻触发
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter 在修正数据的时刻触发 newValue 就是我们修正完成今后的数据
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
</script>
</body>
</html>vm.fullName = ‘John Doe’ 人人能够在外部直接修正fullName或许在控制台修正 都能够触发fullName的set事宜来修正 firstName和lastName
watch选项
Vue中我们想要盯着一个数据，在它发生变化的时刻就要做什么事，这时刻我们就要用到watch侦听器。
详细用法也是很简朴的，我们先来一个浅监听。每次转变都邑触发监听的function 它接收两个参数 当前的val和转变前的
oldval，我们能够依据这个做出推断<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id="app">
<p>{{Name}}</p>
<p>{{ChangeName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
Name: 'QM',
ChangeName: 'Cool',
Names: 'QMS',
NameDeep: 'QMDeep',
NameImm: 'QMImm',
NameObj:{
QM: 'shuai'
}
},
watch:{
Name:function (val,oldval) {
// 能够直接在这里写要领
console.log(val,oldval)
},
Names:[
function (val,oldval) {
// 多个要领能够运用数组的情势
console.log(val,oldval)
},
function (val,oldval) {
// 多个要领能够运用数组的情势
console.log(val,oldval)
}
],
// 深度 watcher
NameDeep: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听最先以后被马上挪用
NameImm: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
//Obj的情势
'NameObj.QM':function (val, oldVal){
/* ... */
}
}
})
</script>
</body>
</html>filters选项
Vue.js 许可你自定义过滤器，可被用于一些罕见的文本格式化。过滤器能够用在两个处所：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 最先支撑)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”标记指导<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id="app">
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | capitalize">
<!-- 在双花括号中 -->
{{ message | capitalize }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "test",
rawId: "change"
},
filters:{
'capitalize':function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
</body>
</html>