Vue.js 学习足迹(二)
Vue的一些选项
Vue对象内的属性 el data component method 等等都称作选项
选项/数据
data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{num}}
<br>
<input type="button" @click="add" value="加分">
</div>
<script>
/*
* data
* 类型: Object | Function data:{} data():{return {}}
* 限制: 组件的定义只接受 function
* Vue 实例的数据对象
* 实例创建之后，可以通过 vm.$data 访问原始数据对象
*
* */
let vm = new Vue({
el:'#app',
// data:{
// num:520,
// }
data(){
return {
num:520,
}
},
methods:{
add(){
this.num++; //this指针指向Vue实例对象 vm
}
}
});
// 实例创建之后，可以通过 实例.$data.变量名访问原始数据
console.log(vm.$data.num);
function newAdd() {
vm.num++;
}
</script>
</body>
</html>
props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<hd-nav :alt="msg" title="商品列表" main-title="主标题"></hd-nav>
</div>
<script>
/*
* props
* Array<string> | Object
* 可以是数组或对象，用于接收来自父组件的数据
* 可以是简单的数组,或使用对象作为替代，对象允许配置高级选项，如类型检测丶自定义校验和设置默认值
*
*
* */
let child = {
template:'<em> child子组件 </em>',
};
let parent = { //title 组件parent父组件的属性名
template: '<h2>选项组件 - {{title}}' +
'<child></child>' +
'</h2>',
// 组件parent 通过props选项接收父组件传递来的数据,否则parent组件中的title属性不会显示
props:{ //props让对象允许配置高级选项
title:{
type:String,
default:'',
required:true, //校验设置为true
validator:function (value){ //对父组件传递来的数据进行自定义函数设置
return value
}
}
},
components:{ //声明模板
child:child, //第一个child是parent组件模板中的child标签名,第二个child是组件child
}
};
new Vue({
el:'#app',
data:{
msg:'选项props'
},
components:{
hdNav:parent
}
})
</script>
</body>
</html>
child组件被parent组件复用
######propsData
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<abc></abc>
<div id="box">
</div>
<script>
/*
* propsData
* 限制: 只用于 new 创建的实例中
* 创建实例时传递 props 主要作用是方便测试
*
*
* */
//Vue.extend 就是用来生成组件
let extend = Vue.extend({
template:'<h2><a :href="url">{{content}} -- {{num}}</a></h2>',
//此处data选项必须用函数方法形式，不能用对象表示
data(){
return {
content:'extend',
url:'http://baidu.com',
}
},
props:['num'],
});
//创建实例时传递 props 主要作用是方便测试
new extend({ propsData:{num:123} }).$mount('abc'); //挂载
new extend({ propsData:{num:123} }).$mount('#box');
</script>
</body>
</html>
computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<br>
<ol>
<li v-for="(item,index) in list" :key="index">
{{ item.date }} ---> {{item.title}}
</li>
</ol>
<br>
<hr>
<br>
<!--遍历二次处理的数据-->
<ol>
<li v-for="(item,index) in newsList" :key="index">
{{item.date}} --> {{item.title}}
</li>
</ol>
<br>
<hr>
<!--显示二次处理的price数据-->
{{newPrice}}
</div>
<script>
/* computed
* 计算属性将被混入到 Vue 实例中,所有 getter 和 setter 的this上下文自动地绑定为 Vue实例
* 注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问
*
* */
new Vue({
el:'#app',
data:{
price:199,
msg:'computed 主要作用是对原始数据 进行二次处理，例如 类型大小写转换 排序 拼接',
list:[
{
title:'中国在世贸组织起诉美国301征税措施',
date:'2018-10-12'
},
{
title:'贸易战正式打响，中国这样强势反击！三点深刻启示',
date:'2018-10-13'
},
{
title:'中国对美关税反制措施已于6日12:01正式实施',
date:'2018-10-14'
},
]
},
computed:{
//对data选项中的list原始数据进行二次处理
newsList(){
return this.list.reverse();
},
//对data选项中的price原始数据进行二次处理
newPrice(){
return ('¥' + this.price + '元');
}
}
})
</script>
</body>
</html>
methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<em>{{price}}</em>
<input type="button" value="在Vue作用域下调用add函数" @click="add(5,$event)"> <br>
<input type="button" value="this指向" @click="This">
<dream @click.native="add" title="在组件中调用方法"></dream>
</div>
<button onclick="vm.add(5,this)">在外部调用vue里的方法</button>
<script>
/*
* methods
* methods 将被混入到 Vue 实例中，可以直接通过 vm 实例访问这些方法，或者在指令表达式中使用，方法中的 this 自动绑定为 Vue 实例
* 注意，不应该使用箭头函数来定义 method 函数
* 是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefind
*
* */
//创建一个dream组件
let dream = {
template:'<h2><button>{{title}}</button></h2>',
props:['title']
}
let vm = new Vue({
el:'#app',
data:{
price:520,
msg:'methods',
},
//声明组件
components:{
dream
},
methods:{
add(n,e){
// console.log(this) //this指针指向Vue实例\
// this.price++;
// this.price += n;
console.log(n,e);
},
This:()=>{
console.log(this) //this指向window
}
},
})
console.log(this); //this指向window
</script>
</body>
</html>
watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<br>
{{font}}
<br>
{{temperature}}
<input type="button" value="add" @click="add"><br>
<input type="button" value="reduce" @click="reduce"><br>
</div>
<script>
/*
* watch
* 一个对象，键是需要观察的表达式，值是对应回调函数，值也可以是方法名，或者包含选项的对象，
* Vue 实例将会在实例化时调用 $watch(),遍历watch对象的每一个属性
*
* */
let vm = new Vue({
el:'#app',
data:{
msg:'watch 监控数据的变化',
temperature:28,
font:''
},
methods:{
add(){
this.temperature ++;
},
reduce(){
this.temperature --;
}
},
watch:{
temperature(newVal,oldVal){
console.log(newVal + ' ' + oldVal);
if( newVal >= 30 ){
this.font = '多游泳很凉快';
}else if(newVal <= 10){
this.font = '天凉多穿衣服';
}
}
}
});
</script>
</body>
</html>
slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<hi-yueqi>
<!--父组件hi-yueqi引用模板template#tpl 将slot绑定的标签替换到模板中-->
<span slot="name">{{info.name}}</span>
<span slot="age">{{info.age}}</span>
<span slot="job">{{info.job}}</span>
</hi-yueqi>
</div>
<template id="tpl">
<div>
<h1>我是: <slot name="name"></slot></h1>
<h2>年龄: <slot name="age"></slot></h2>
<h3>job: <slot name="job"></slot></h3>
</div>
</template>
<script>
/*
* slot
* 用于标记往哪个具名插槽中插入子组件内容
*
*
* */
let vm = new Vue({
el:'#app',
data:{
msg:"用于标记往哪个具名插槽中插入子组件内容，会在第三方组件上看到有slot属性",
info:{
name:'越祁',
age:18,
job:'haha'
}
},
components:{
'hi-yueqi':{
//<hi-yueqi>为父组件 template#tpl为子组件
template:'#tpl'
}
}
})
</script>
</body>
</html>
实例方法/事件
1 vm.emite触发，回调函数会接收所有传入事件触发函数的额外参数.
.
2. vm.off
移除自定义事件监听器
.
4.vm.$emit
触发当前实例上的事件，附加参数都会传给监听器回调
事件注册构造监听解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{msg}} - {{num}}</h2>
<input type="button" value="add" @click="add">
</div>
<hr>
<input type="button" value="reduce" onclick="reduce()"> <br>
<input type="button" value="reduceOne" onclick="reduceOne()"> <br>
<input type="button" value="off" onclick="off()"> <br>
<script>
/*
* 1.在input中注册点击事件
* 2.构造一个方法 function vm.$emit发送信息
* 3.vm.$on('事件名字',function回调函数定义要做的事情) 事件监听
*
*
* */
let vm = new Vue({
el:'#app',
data:{
msg:'实例方法 / 事件',
num:0
},
methods:{
add(){
this.num ++
}
}
});
// 事件监听
vm.$on('reduce',function () {
this.num --
});
vm.$once('reduceOne',function () {
this.num --
});
function off() {
vm.$off('reduce');
}
function reduceOne() {
vm.$emit('reduceOne')
}
// 发送信息
function reduce() {
vm.$emit('reduce')
}
</script>
</body>
</html>
off解绑事件点击后解绑的事件将失去响应
事件的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<br>
<em>{{num}}</em><br>
<button @click="add">add</button>
</div>
<script>
/*
* 生命周期事件函数
* 可对事件点击时数据内容在加载前加载后事件创建前创建后等各个阶段进行自定义设置
* eg: 在点击按钮后再数据加载出来之前在相应的方法中定义动画，等
*
*
* */
let vm = new Vue({
el:'#app',
data(){
return {
msg:'生命周期 钩子函数 事件函数 例如，Dom加载之前，DOM加载完成后，数据更新后，操作。。。',
num:0
}
},
methods:{
add(){
this.num++
}
},
beforeCreate(){
console.log('1.beforeCreate')
},
created(){
console.log('2.created')
},
beforeMount(){
console.log('3.beforeMount')
},
mounted(){
console.log('4.mounted')
},
beforeUpdate(){
console.log('5.beforeUpdate')
},
updated(){
console.log('6.updated')
},
activated(){
console.log('7.activated')
},
deactivated(){
console.log('8.deactivated')
},
beforeDestroy(){
console.log('9.beforeDestroy')
},
destroyed(){
console.log('10.destroyed')
},
errorCaptured(){
console.log('11.errorCaptured')
},
});
</script>
</body>
</html>
在点击事件时触发的事件