vue挂载点,实例,数据注入,响应式
挂载实例
<div class="app">
<p>用户名:{{username}}</p>
</div>
const app = Vue.createApp({
data(){
return{
username:'王老师',
};
},
}).mount('.app');
数据注入
console.log(app.username);
响应式
app.username = '张老师';
v-text,v-html
v-text,用于将数据填充到标签中,作用于插值表达式类似,如果数据中有HTML标签会将html标签一并输出
v-html,它可以将HTML片段填充到标签中
<p>用户名: <span v-text="username"></span></p>
<p>用户名: <span v-html="username"></span></p>
样式绑定
v-bind 动态 数据绑定,支持行内样式 style 和类样式 class ,属于高频指令,可以使用 : 代替
动态值
<p v-bind:style="{color:textColor,backgroundColor:bgc}">php</p>
行内样式对象
<p v-bind:style="[base,custom]">php123</p>
class可以是字符串、对象、数组。
<p :class="{active: isActive}">hello 老师123</p>
<p :class="[mycolor,mybgc]">hello 老师456</p>
<script>
const app = Vue.createApp({
data(){
return{
//style: 'color:blue;',
textColor: 'blue',
bgc:'wheat',
base:{
border:'1px solid',
background:'#e0ff00'
},
custom:{
color:'white',
padding:'15px',
},
active: 'active',
isActive: true,
mycolor: 'active',
mybgc: 'bgc'
};
},
}).mount('.app');
</script>
数据双向绑定
数据之间是相通的,当数据变化时,视图也跟随着变化
v-on高频指令 ,可以简化成@ 来表示
<p>
<input type="text" @input="comment = $event.target.value " :value="comment">
<span>{{comment}}</span>
</p>