这是我第二次学习vue.js（第一次在我的第一篇这个系列的笔记里面有），因为还有几天就期末考试了，所以只能学这么点了
16、指令修改器
对v-on:keydown.enter=“func()”进行分析：
其中的v-on是指令，keydown是这个指令的参数，enter是指令修改器（意思是按下键盘上的enter键的时候触发函数），func()是触发的函数。
其中的enter是可以换成其他的指令修改器，例如数字13（v-on:keydown.13=“func()”）等等
如果我们把指令修改器给去掉（v-on:keydown=“func()”），此时，每当我们按下键盘上的任意键，都会去触发func()这个函数
17、自定义事件
我们在子组件a里面定义了一个自定义事件my-event，当my-event事件触发的时候，我们去执行onComaMyEvent函数
//这好似a.vue文件
<template>
<div>
<p>{{content}}</p>
<button v-on:click="emitMyEvent">emit</button>
</div>
</template>
<script type="text/javascript">
export default{
data: function(){
return {
content: 'I am a component'
}
},
methods:{
emitMyEvent(){
this.$emit('my-event', this.content);//这里定义了一个my-event事件，其中this.content是传递给app组件里的onComaMyEvent函数的参数
}
}
}
</script>
//这是app.vue文件
<template>
<div>
<ul>
<li v-for="item in items">
{{item.name}} {{item.price}}
</li>
</ul>
<button v-on:click="addItem">按钮</button>
<input type="text" name="text" v-on:keydown="onkeydown">
<componentA v-on:my-event="onComaMyEvent"></componentA>
</div>
</template>
<script>
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
export default{
components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
data: function(){
return {
hello: '<span style="color:red;">world</span>',
num: 1,
status: true,
items: [
{
name: 'apple',
price: 34
},
{
name: 'banana',
price: 50
}
]
}
},
methods: {//在方法里面可以调用组件里面的数据
addItem(){
this.items.push({
name: 'orange',
price: 39
});
},
onkeydown: function(){
console.log('on key down');
},
onComaMyEvent(param){
console.log('on Coma MyEvent' + param);
}
}
}
</script>
18、
vue模板只能有一个根对象
例如以下是错误的写法：
<template>
<el-button type="primary">{{test1}}</el-button>
<button>点击我</button>
</template>
所以你想要出现正常的效果，你得用一个div来或是别的标签来包裹全部的元素：
<template>
<div
<el-button type="primary">{{test1}}</el-button>
<button>点击我</button>
</div>
</template>
19、
v-model指令：表单数据模型双向绑定
v-model指令是用来绑定input标签的value属性的，我们知道，input标签的value属性就是input里面输入的值。然后，我们再让它和data里面的属性关联起来，这时候，我们就可以让input里面的值在其他地方使用，并且实现同步更新
<template>
<div>
<ul>
<li v-for="item in items">
{{item.name}} {{item.price}}
</li>
</ul>
<input type="text" name="text" v-model="myValue">
<p>{{myValue}}</p>
</div>
</template>
<script>
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
export default{
components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
data: function(){
return {
hello: '<span style="color:red;">world</span>',
num: 1,
status: true,
items: [
{
name: 'apple',
price: 34
},
{
name: 'banana',
price: 50
}
],
myValue: '',
}
},
methods: {//在方法里面可以调用组件里面的数据
addItem(){
this.items.push({
name: 'orange',
price: 39
});
},
onkeydown: function(){
console.log('on key down');
},
onComaMyEvent(param){
console.log('on Coma MyEvent' + param);
}
}
}
</script>
注意：我们必须先在data里面声明了myValue之后，才能写v-model="myValue"，否则会报错
v-model指令也有它的修改器，例如：
v-model.lazy="myValue"
使用了lazy这个修改器之后，只有当我们在input输入了值并且按下enter键或者input失去了焦点之后，才会在我上面的p标签里面输出myValue的值
20、属性监听
意思就是我们去监听一个vue.js的变量，每当这个变量被改动的时候，我们就去执行特定的操作
通过watch这个选项来实现的
当下面的例子中的myValue被改变的时候，会执行：
myValue: function(val, old){
this.newValue = val;
this.oldValue = old;
}
其中的val是传进去的myValue的新值，old是传进去的myValue的旧值
代码如下：
<template>
<div>
<input type="text" name="text" v-model="myValue">
<p>新的值：{{newValue}}</p>
<p>旧的值：{{oldValue}}</p>
</div>
</template>
<script>
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
export default{
components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
data: function(){
return {
myValue: '',
newValue: '',
oldValue: ''
}
},
methods: {//在方法里面可以调用组件里面的数据
addItem(){
this.items.push({
name: 'orange',
price: 39
});
},
},
watch:{
myValue: function(val, old){
this.newValue = val;
this.oldValue = old;
}
}
}
</script>
以上笔记是我今天看视频看到的位置，后面还会继续更新(❁ᴗ͈ˬᴗ͈)
网友评论