0803 vue常用指令

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>