this
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
Vue中的this
* Vue所有的生命周期钩子方法里面 [#fbdee035]
在Vue所有的生命周期钩子方法（如created，mounted， updated...
#codeprettify{{
<div id="app">
<button class="btn btn-primary" v-on:click="on()">点...
<ul class="list-group" v-for="item in list">
<li class="list-group-item">\{\{item\}\}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
list: ["banner", "orange", "apple"]
},
methods: {
on: function() {
alert(this.list);
this.list.push("Potato")
}
})
</script>
}}
** vue实例本身的属性和方法里面 [#v8ed6e55]
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身...
方法名(){}写,就代表this指向是vue实例,
()=>{}箭头函数的方式定义方法,则this指向window,
因为箭头函数没有自己的this, 它的this是继承而来的，箭头函...
#codeprettify{{
methods:{
a: function(){
console.log(this) //vm 用普通函数，this指向vue实例
return;
},
b: ()=>{
console.log(this) //箭头函数，this指向window
return;
},
},
}}
两个重要的小原则:
1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才...
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函...
* 定时器用箭头函数普通函数 [#b6447d32]
箭头函数this等于父级函数this指向，下面的定时器必须用箭头...
#codeprettify{{
<script type="text/javascript">
const vm = new Vue({
el : " #root",
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
}，
//监视属性
watch:{
//简写形式
firstName(val){
//当firstName修改后，1秒后触发计时器修改fullN...
//不写成setTimeout(function(){this.fullName =...
setTimeout(()=>{
this.fullName = val +'-'+ this.lastName
},1000);
}
}
})
<script>
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
Vue中的this
* Vue所有的生命周期钩子方法里面 [#fbdee035]
在Vue所有的生命周期钩子方法（如created，mounted， updated...
#codeprettify{{
<div id="app">
<button class="btn btn-primary" v-on:click="on()">点...
<ul class="list-group" v-for="item in list">
<li class="list-group-item">\{\{item\}\}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
list: ["banner", "orange", "apple"]
},
methods: {
on: function() {
alert(this.list);
this.list.push("Potato")
}
})
</script>
}}
** vue实例本身的属性和方法里面 [#v8ed6e55]
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身...
方法名(){}写,就代表this指向是vue实例,
()=>{}箭头函数的方式定义方法,则this指向window,
因为箭头函数没有自己的this, 它的this是继承而来的，箭头函...
#codeprettify{{
methods:{
a: function(){
console.log(this) //vm 用普通函数，this指向vue实例
return;
},
b: ()=>{
console.log(this) //箭头函数，this指向window
return;
},
},
}}
两个重要的小原则:
1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才...
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函...
* 定时器用箭头函数普通函数 [#b6447d32]
箭头函数this等于父级函数this指向，下面的定时器必须用箭头...
#codeprettify{{
<script type="text/javascript">
const vm = new Vue({
el : " #root",
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
}，
//监视属性
watch:{
//简写形式
firstName(val){
//当firstName修改后，1秒后触发计时器修改fullN...
//不写成setTimeout(function(){this.fullName =...
setTimeout(()=>{
this.fullName = val +'-'+ this.lastName
},1000);
}
}
})
<script>
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
