Vue3学习笔记：基础语法，指令，表达式，语法糖，动态参数

最新推荐文章于 2024-03-16 22:43:08 发布

Vincy.Zhang

最新推荐文章于 2024-03-16 22:43:08 发布

阅读量258

点赞数

分类专栏： Vue 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_43041350/article/details/129302963

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

相关绑定参数的配置

<style>
#d1{
    color:red;
}
#d11{
    color:blue;
}
.d1{
    font-size: 50px;
}
</style>

   const Counter={//配置对象
        data:function(){
            return{
                num:0,
                uname:"张三",
                msg:"<h2>标题</h2>",  
                id:"d1",
                url:"https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png",
                mouseevent:"click",
                attributename:"id"
                      }
        },
        methods:{
            changeuname: function(){
                this.uname='李四'
            },
            changeColor: function(){
                if(this.id == "d1")
                {this.id = "d11"}
                else
                {this.id = "d1"}
            }
        }
    }
    let app =Vue.createApp(Counter).mount('#counter')//创建应用，将配置对象传入
    console.log(app);
    //app.num= 数据的双向绑定 能让页面上的num值随之修改

vue语法，p标签里填入的是变量

        <p>{{num}}</p>
        <p>{{uname}}</p>
        <p v-once>{{uname}}</p>
        <p>{{msg}}</p>

v-html指令，只对信任内容使用，不可对用户填入的值使用

<p v-html="msg"></p>
        <button @click="changeuname">change user name</button>

v-bind指令，对属性变量进行赋值使用

        <p v-bind:id="id">绑定id</p>
        <img v-bind:src="url" alt="">
        <button @click="changeColor">change color</button>

直接使用表达式

        <button @click="id='d11'">change toBlue</button> 
        <p>{{num+1}}</p>
        <p>{{uname.split('').reverse().join('')}}</p>
        <p v-bind:id="id+1">绑定id</p>

v-指令，语法糖

        <button @click="changeColor">v-on语法糖</button> 
        <button v-on:click="changeColor">change color</button> 
        <p :id="id">v-bind语法糖</p>
        <p v-bind:id="id">绑定id</p>

动态参数

        <p v-bind:[attributename]="id">动态参数 </p>
        <button @click="attributename='class'">改变属性</button> 
        <button @[mouseevent]="changeColor">被改变事件</button> 
        <button @click="mouseevent='mouseover'">主动改变事件</button>