vue入门案例

最新推荐文章于 2023-10-16 12:32:14 发布

kkagr

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量397

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/kkagr/article/details/115532727

版权

本文提供了一套Vue.js的基础入门案例，包括初体验、数组展示、v-on事件处理、v-bind属性绑定、计算属性、v-on指令的详细用法，如阻止冒泡和修改事件行为，以及v-if、v-for、v-model的各种实践，包括购物车和高阶函数的练习。

摘要由CSDN通过智能技术生成

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;
            },

最低0.47元/天解锁文章

kkagr

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue入门案例

vue案例示例案例基本案例v-bind案例基本案例1、初体验<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">{{message}}</div><script src="../js/
复制链接

扫一扫

专栏目录