vue入门案例

最新推荐文章于 2025-03-06 15:49:13 发布
最新推荐文章于 2025-03-06 15:49:13 发布
阅读量477 收藏 2
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kkagr/article/details/115532727
版权
本文提供了一套Vue.js的基础入门案例，包括初体验、数组展示、v-on事件处理、v-bind属性绑定、计算属性、v-on指令的详细用法，如阻止冒泡和修改事件行为，以及v-if、v-for、v-model的各种实践，包括购物车和高阶函数的练习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue案例示例

案例

基本案例

在这里插入图片描述

1、初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试"
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2、数组展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id ="app">
    <ul>
        <li v-for="item in subject">{{item}}  </li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            message: '你好啊',
            subject: ['语文', '数学', '英语']
        }
    })
</script>
</body>
</html>

在这里插入图片描述

3、v-on 计数使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>当前计数器：{{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="sub">-</button>
    <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            counter:0
        },
        methods:{
            sub:function(){
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

4、mustacher语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{name + sex}}</h2>
    <h2>{{name + '' + sex}}</h2>
    <h2>{{name}}{{sex}}</h2>
    <h2>{{age>10?'大于10':'不大于10'}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            name:"张三",
            sex:"男",
            age:10
        }
    })
</script>

</body>
</html>

在这里插入图片描述

5、v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试"
        }
    })
</script>

</body>
</html>

在这里插入图片描述

6、v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

</body>
</html>

在这里插入图片描述

v-bind

1、基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--错误的用法-->
    <!--<img src="{{imgURL}}">-->
    <img v-bind:src="imgURL">
    <a v-bind:href="ahref">百度一下</a>
    <!--语法糖写法
    <img :src="imgURL">
    <a :href="ahref">百度一下</a>-->
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            imgURL:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",
            ahref:"http://www.baidu.com"
        }
    })
</script>

</body>
</html>

在这里插入图片描述

2.v-bind-class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .activeClass{
        color:red;
    }
</style>
<div id="app">
    <h2 class="activeClass">{{message}}</h2>
    <h2 :class="active">{{message}}</h2>
    <h2 :class="{activeClass:true}">{{message}}</h2>
    <h2 :class="{activeClass:isActive}">{{message}}</h2>
    <button @click="btnClick">改变颜色</button>
    <h2 :class="getClass()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            active:'activeClass',
            isActive:true
        },
        methods:{
            btnClick:function(){
                this.isActive=!this.isActive;
            },
            getClass:function(){
                return {activeClass:this.isActive};
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述

3、v-bind-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<h2 :style="{key(css属性名):vaule(属性值) }">{{message}}</h2>-->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <h2 :style="{fontSize:fontSize+'px'}">{{message}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            fontSize:100
        }
    })
</script>

</body>
</html>

在这里插入图片描述

计算属性

conputed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{age}}</h2>
    <h2>{{fullMessage}}</h2>
    <h2>{{totalPrice}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            age:10,
            books:[
                {name:'编程之美',price:10},
                {name:'数据结构',price:20}
            ]
        },
        computed:{
            fullMessage:function(){
                return this.message+this.age;
            },
            totalPrice:function(){
                let result = 0;
                for(let i = 0;i<this.books.length;i++){
                    result += this.books[i].price;
                }
                return result;
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述

computed和methods的区别

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{age}}</h2>
        <h2>{{getFullMessage()}}</h2>
        <h2>{{getFullMessage()}}</h2>
        <h2>{{fullMessage}}</h2>
        <h2>{{fullMessage}}</h2>


    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app =new Vue({
            el:'#app',
            data:{
                message:"测试",
                age:10,
                books:[
                    {name:'编程之美',price:10},
                    {name:'数据结构',price:20}
                ]
            },
            computed:{
                fullMessage:function(){
                    console.log("computed")
                    return this.message+this.age;
                }
            },
            methods:{
                getFullMessage:function(){
                    console.log("methods")
                    return this.message+this.age;
                }
            }
        })
    </script>

    </body>
    </html>

在这里插入图片描述

es6语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script src="../js/vue.js"></script>
<script>
    var btns = document.getElementsByTagName('button');
    for(var i=0;i<btns.length;i++ ){
        btns[i].addEventListener('click',function(){
            console.log("第"+i+"个按钮被点击")
        })
    }
    /*for(let i=0;i<btns.length;i++ ){
            btns[i].addEventListener('click',function(){
                console.log("第"+i+"个按钮被点击")
            })
        }*/
    /*使用闭包解决var无块级作用域问题*/
    /*for(var i=0;i<btns.length;i++ ){
        (function(i){
            btns[i].addEventListener('click',function(){
                console.log("第"+i+"个按钮被点击")
            })
        })(i)
    }*/
</script>

</body>
</html>

在这里插入图片描述

v-on

阻止冒泡.stop（相当于event.stopPropagation）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div @click="divClick">
        测试
        <!--<button @click="btnClick">
            按钮
        </button>-->
        <!--阻止冒泡-->
        <button @click.stop ="btnClick">
            按钮
        </button>
    </div>
    <br>
    <form action="submit">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
    <input type="text" @keyup.enter="keyUp">
    <button @click.once="btn2Click">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试"
        },
        methods:{
            divClick(){
                console.log("divClick")
            },
            btnClick(){
                console.log("btnClick")
            },
            submitClick(){
                console.log("submitClick")
            },
            keyUp(){
                console.log("keyUp")
            },
            btn2Click(){
                console.log("btn2Click")
            }
        }
    })
</script>

</body>
</html>

无.stop点击按钮
在这里插入图片描述
加上.stop点击按钮
在这里插入图片描述

.prevent(form不会直接提交)

在这里插入图片描述

keyup(监听键盘点击时间)

.once(按钮只能点击一次)

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 v-if="isShow==0">isShow为0</h2>
    <h2 v-else-if="isShow==1">Show为1</h2>
    <h2 v-else>Show为其他</h2>
    {{result}}

</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            isShow:1
        },
        computed:{
            result(){
                let showMessag ="";
                if(this.isShow ==0){
                    showMessag="isShow为0"
                }else if(this.isShow==1){
                    showMessag="isShow为1"
                }else{
                    showMessag="isShow为其他"
                }
                return showMessag
            }
        }

    })
</script>

</body>
</html>

建议使用computed
input需要加key，vue中虚拟dom会复用input框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="isUser">
        <label for="userName">用户账号</label>
        <input type="text" id="userName" placeholder="用户账号">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <span v-if="isUser">
        <label for="userName">用户账号</label>
        <input type="text" id="userName1" placeholder="用户账号" key="userName1">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email1" placeholder="用户邮箱" key="">
    </span>
    <button @click="isUser=!isUser">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            isUser:true
        }
    })
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in names">{{index+1}}、{{item}}</li>
    </ul>
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(value,key) in info">{{key}}--{{value}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            names:["张三","李四","王五"],
            info:{
                name:'张三',
                age:10,
                sex:'男'
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述

数组操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
    <button @click="pushClick">push</button>
    <button @click="popClick">pop</button>
    <button @click="shiftClick">shift</button>
    <button @click="unshiftClick">unshift</button>
    <button @click="spliceClick">splice</button>
    <button @click="sortClick">sort</button>
    <button @click="reverseClick">reverse</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            names:["张三","李四","王五"]
        },
        methods:{
            btnClick(){
                /*不是响应式的*/
                this.names[0]="ssss";
            },
            pushClick(){
                this.names.push("赵六");
            },
            popClick(){
                /*删除最后一个元素*/
                this.names.pop();
            },
            shiftClick(){
                /*删除第一个元素*/
                this.names.shift();
            },
            unshiftClick(){
                this.names.unshift("孙二");
            },
            spliceClick(){
                /*删除元素*/
                this.names.splice(2,1);
                /*删除一个元素,并添加一个元素*/
                this.names.splice(1,1,'小三');
            },
            sortClick(){
                this.names.sort();
            },
            reverseClick(){
                this.names.reverse();   
            },

        }
    })
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击数组变红案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in names" :class="{active:currentIndex == index}" @click="liClick(index)">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            names:["张三","李四","王五"],
            isActive:true,
            currentIndex:0
        },
        methods:{
            liClick(index){
                this.currentIndex=index
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述

购物车练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,td{
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th{
            background-color:#f7f7f7 ;
            color: #5566cc;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-if="books.length">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <!--<td>{{getFinalPrice(item.price)}}</td>-->
                <td>{{item.price | showPrice}}</td>
                <td>
                    <button @click="decrement(index)" v-bind:disabled="item.count<=1">-</button>
                    {{item.count}}
                    <button @click="increment(index)    ">+</button>
                </td>
                <td>
                    <button @click="removeHandle(index)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <h2>总价格{{totalPrice|showPrice}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            books:[
                {
                    id:1,
                    name:"高数",
                    date:"2008-9",
                    price:35,
                    count:1
                },
                {
                    id:2,
                    name:"线性代数",
                    date:"2018-9",
                    price:39,
                    count:1
                },
                {
                    id:3,
                    name:"政治",
                    date:"2008-3",
                    price:34,
                    count:1
                },
                {
                    id:4,
                    name:"历史",
                    date:"2004-9",
                    price:32,
                    count:1
                }
            ]
        },
        methods:{
            getFinalPrice(price){
                return '￥'+price.toFixed(2)
            },
            increment(index){
                this.books[index].count++;
            },
            decrement(index){
                this.books[index].count--;
            },
            removeHandle(index){
                this.books.splice(index,1)
            }
        },
        computed:{
            totalPrice(){
                let totalPrice=0;
                /*for(let i=0;i<this.books.length;i++){
                    totalPrice += this.books[i].price * this.books[i].count;
                }*/
                /*for(let i in this.books){
                    totalPrice += this.books[i].price * this.books[i].count;
                }*/
                for(let item of this.books){
                    totalPrice += item.price * item.count;
                }
                return totalPrice
            }
        },
        filters:{
            showPrice(price){
                return '￥'+price.toFixed(2)
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

高阶函数练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    const nums=[10,20,100,200,400,40,50]
    //1.需求，取出所有小于100的数字
    let newNums=[]
    for(let n of nums){
        if(n<100){
            newNums.push(n)
        }
    }
    console.log(newNums)
    //2.需求，将所有小于100的数字乘以2
    let new2Nums=[]
    for(let n of newNums){
        new2Nums.push(n*2)
    }
    console.log(new2Nums)
    /*filter回调函数必须返回boolean值,放返回true,函数内部会自动将这次回调加入到新的数组中,返回false,会过滤这次结果*/
    let newNums1= nums.filter(function (n) {
        return n<100
    })
    console.log(newNums1)
    let new2Nums1 = newNums1.map(function (n) {
        return n*2
    })
    console.log(new2Nums1)
    let total = new2Nums1.reduce(function (prevalue,n) {
        return prevalue+n
    },0)
    console.log(total)
</script>

</body>
</html>

在这里插入图片描述

v-model

v-model-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" :value="message" @input="message = $event.target.value">
    <input type="text" v-model="message">
    {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试"
        }
    })
</script>

</body>
</html>

在这里插入图片描述

v-model-radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label for="male">
        <input type="radio" id = "male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id = "female" name="sex" value="女" v-model="sex">女
    </label>
    <h2>您选择的性别是{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            sex:""
        }
    })
</script>

</body>
</html>

在这里插入图片描述

v-model-checkbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label for="agree">
        <input type="checkbox" id = "agree" v-model="isAgree">同意
    </label>
    <h2>您选择是{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
    <br>
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h2>您的爱好是{{hobbies}}</h2>
    <label v-for="item of originHobbies" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            isAgree:false,
            hobbies:[],
            originHobbies:["篮球","足球","排球","羽毛球"]
        }
    })
</script>

</body>
</html>

在这里插入图片描述

v-model-select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <select v-model="fruit">
        <option value="苹果" >苹果</option>
        <option value="香蕉" >香蕉</option>
        <option value="梨" >梨</option>
    </select>
    <h2>您选择的水果是{{fruit}}</h2>

    <select v-model="fruits" multiple>
        <option value="苹果" >苹果</option>
        <option value="香蕉" >香蕉</option>
        <option value="梨" >梨</option>
    </select>
    <h2>您选择的水果是{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            fruit:"梨",
            fruits:[]   
        }
    })
</script>

</body>
</html>

在这里插入图片描述

v-model修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	<!--输入的时候不会立刻改变，失焦的时候改变-->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>
    <!--只能输入数字-->
    <input type="text" v-model.number="age">
    <h2>{{age}}--{{typeof age}}</h2>
    <!--去掉空格-->
    <input type="text" v-model.trim="name">
    <h2>您输入的字符{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:"测试",
            age:10,
            name:""
        }
    })
</script>

</body>
</html>

在这里插入图片描述

vue入门案例-基本使用----非常适合初学者。言简意赅，没有废话。附带springboot+vue前后端视频，如果需要视频请点赞关注私信我，免费获取视频
QQ903275718的博客
10-12 1029
vue入门，非常适合初学者，没有多余废物知识，都是精华，最后点赞关注附送springboot+vue视频
Vue简单入门及案例
qq_54605990的博客
04-27 1878
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
Vue入门示例
上官花雨滴博客！！！
10-24 1717
/ 选项});这里创建了一个新的Vue实例，并将其赋值给变量app。这个实例将管理之前HTML模板中id="todoapp"的元素及其子元素。
Vue综合案例：组件化开发
最新发布
2201_75353178的博客
03-06 380
小兔鲜首页组件化开发
Vue——入门案例
zsl2010zsl的专栏
05-06 210
Vue——入门案例
vue 入门实例
web_q的博客
02-03 483
例一修改opnames的值 : var opnames = new Vue({ el: '#opname', data: { opname: opnames, }, methods: { alertPop: function (name) { this.opname = name; } }})opname
Vue入门示例，样例
zjl523357813的专栏
02-24 594
介绍几个入门示例，通过不同的实现方式从而体会一下 Vue
Vue入门案例项目，用于快速搭建Vue2项目
06-06
本项目是一个Vue2的入门案例，旨在帮助开发者快速上手并搭建自己的Vue2项目。 在Vue2中，项目的结构通常包括以下几个关键部分： 1. **`main.js`** - 这是项目的入口文件，一般用来导入Vue库、设置Vue配置以及挂载...
vue vue vue vue vue vue vue
06-25
vue案例讲解 简单讲解 基础知识 未学习人群
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门级案例
06-12
vue全家桶入门，购物车案例，属于入门级，资源齐全可参考
Vue入门示例（一）
09-14 333
目录 01_hello-vue.html 02_v-model.html 03_v-model_1.html 04_v-text.html 05_v-for.html 06_v-on.html 07_event.html 01_hello-vue.html <!DOCTYPE html> <html> <head> <...
VUE入门+5个小案例
热门推荐
Beyondczn的博客
02-23 3万+
本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。 一、Vue基础 1.第一个Vue程序 步骤： 引入vue开发环境 <script sr.
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 3万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue快速入门的三个小实例,vue从入门到精通教程
chatgpt001的博客
10-16 2564
使用v-bind指令∶作用：动态绑定属性预期：any (with argument) | Object (without argument)参数：attrOrProp (optional)v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)在开发中，有很多属性需要动态进行绑定，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等。作用:绑定事件监听器缩写:@
Vue 1.入门案例
weixin_46503633的博客
05-29 203
Vue.js是一个构造数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 Vue将逻辑部分和赋值部分进行分离，使结构更加清晰。 第一个项目的步骤： 打开我们的HBuilder，点击左上角的文件 —>新建 —>项目， 在index.html中编写以下代码： <!DOCTYPE html> <html> <head> <meta chars
vuejs2.0从入门到放弃--入门实例（四）
Sonny的博客
12-31 3468
最近，很多小伙伴有疑惑，想学vuejs必须先了解复杂的构建工具和命令行操作吗！！答案是否定的！
Vue 入门简单示例
Elvira_Sunset的博客
06-11 1294
#Vue ##1、创建Vue实例展示在页面上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cd
Vue入门案例教程：初学者快速掌握基本语法
资源摘要信息:"VUE前端初学者案例参考.rar" VUE作为前端开发领域中非常受欢迎的JavaScript框架，它以数据驱动和组件化的思想改变了前端开发的方式。对于初学者来说，理解Vue的基本语法是掌握前端开发的重要一步。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值