vue小练习一

最新推荐文章于 2023-12-30 13:47:21 发布

北街风

最新推荐文章于 2023-12-30 13:47:21 发布

阅读量171

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

diaolove

本文链接：https://blog.csdn.net/qq_45047809/article/details/121172781

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、显示

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

<div id="app">
<h2>{{message}}</h2>  
<h1 >{{name}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
//优点数据与界面完全分离
// let(变量)/const(常量)
//编程范式： 声明式编程
   const app = new Vue( {
        el: '#app', //用于挂载要管理的元素
        data: { //定义数据
        message: '你好啊, diaolove!',
        name: 'hello Vue！'
        }
     })
//元素js的做法(编程范式：命令式编程)
// 1.创建div元素,设置id属性
// 2.定义一个变量叫message
// 3. 将message变量放在前面的div元素中显示
//4.修改message的数据： 今天好好啊！
</script> 

</body>
</html>

在这里插入图片描述

2、列表显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02-vue列表展示</title>
</head>
<body>
    <div id="app">
        {{message}}
       <ul>
           <li v-for="item in movies">{{item}}</li> 
       </ul>    
    </div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue( {
        el: '#app', //用于挂载要管理的元素
        data: { //定义数据
        message: '你好啊, diaolove!',
        movies: ['齐天大圣','有翡','大话西游','海王','锦绣南歌']
        }
     })
</script>  
</body>
</html>

运行效果
在这里插入图片描述

3、计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue计数器</title>
</head>
<body>
<div id="app">
  <h2> 当前计数：{{counter}}</h2>
  <button v-on:click="add">+</button>  
  <button v-on:click="sub">-</button>  
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue( {
        el: '#app', //用于挂载要管理的元素
        data: { //定义数据
           counter: 0
        },
        methods: {
            add: function () {
              console.log("add被执行");
                this.counter++
            },
            sub: function()  {
                console.log("sub被执行");
                this.counter--
            }
        }
    
    })
</script>             
</body>
</html>

在这里插入图片描述

北街风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue小练习一

1、显示<IDOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><h2>{{message}}</h2> <h1 >{{name}}</h1></div>&l
复制链接

扫一扫