一.生命周期
(1).生命周期图![](https://i-blog.csdnimg.cn/blog_migrate/c8460616dbdce7ac4b0c843d9b392d5b.png)
二.模板语法
(1).v-once
<div id="root">
<span v-once>{{content}}</span>
</div>
<body>
<script>
let vm = new Vue({
el:'#root',
data:{
content:'test1'
}
})
vm.content = 'test2'
</script>
//此处打印test1
(2).v-html
<div id="root">
<p>插值表达式:{{rawHtml}}</p>
<p>使用了v-html:<span v-html="rawHtml"></span></p>
</div>
<body>
<script>
let vm = new Vue({
el:'#root',
data:{
rawHtml:'<span style="color: #f40;">我是红色</span>'
}
})
vm.content = 'test2'
</script>
插值表达式:<span style="color: #f40;">我是红色</span>
使用了v-html:我是红色
(3).v-text
三.计算属性
(1).插值表达式中的计算
<p>插值表达式:{{rawHtml+'--鲁迅'}}
<p>{{flag ? 'a' : 'b'}}</p>
<div id="root">
<span>{{rawHtml.split('').reverse('').join('')}}</span>
</div>
<body>
<script>
let vm = new Vue({
el:'#root',
data:{
rawHtml:'大家好,我叫王思聪'
}
})
vm.content = 'test2'
</script>
聪思王叫我,好家大
<div id="root">
<span>{{reverseText}}</span>
</div>
<body>
<script>
let vm = new Vue({
el:'#root',
data:{
rawHtml:'大家好,我叫王思聪'
},
computed:{
reverseText(){
return this.rawHtml.split('').reverse('').join('')
}
}
})
</script>
聪思王叫我,好家大
<div id="root">
<span>{{reverseText()}}</span>
</div>
<body>
<script>
let vm = new Vue({
el:'#root',
data:{
rawHtml:'大家好,我叫王思聪'
},
methods:{
reverseText(){
return this.rawHtml.split('').reverse('').join('')
}
}
})
</script>
(2).动态传值时拼接
<div id="root">
<test :content = "'在吗?'+rawHtml"></test>
</div>
<body>
<script>
Vue.component('test',{
props:['content'],
template:"<span>{{content}}</span>"
})
let vm = new Vue({
el:'#root',
data:{
rawHtml:'a'
}
})
vm.content = 'test2'
</script>
//在吗?a
四.侦听属性
(1).watch
<div id="root">
<span>{{fullName}}</span>
</div>
<body>
<script>
let vm = new Vue({
el:'#root',
data:{
rawHtml:'大家好,我叫王思聪',
sex:'我有很多的女人',
fullName:''
},
watch:{
rawHtml(){
this.fullName = this.rawHtml+this.sex
},
sex(){
this.fullName = this.rawHtml+this.sex
}
}
})
vm.sex = 'xxx'
</script>
(2).get set
<div id="root">
<span>{{fullName}}</span>
</div>
<body>
<script>
let vm = new Vue({
el:'#root',
data:{
rawHtml:'大家好,我叫王思聪',
sex:'我有很多的女人',
},
computed:{
fullName:{
get(){
return this.rawHtml+this.sex
},
set(data){
var arr =data.split('')
this.rawHtml = arr[0]
this.rawHtml = arr[1];
}
}
}
})
vm.sex = 'xxx'
</script>
大家好,我叫王思聪xxx