Vue笔记（1）

最新推荐文章于 2024-10-08 12:21:22 发布

(ʃƪ ˘ ³˘)异瞳

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量113

点赞数 1

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

本文链接：https://blog.csdn.net/qq_46536962/article/details/114544641

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue.js的基础知识，包括常量const、变量let和var的区别，以及如何在HTML中引入Vue.js。通过一个简单的`v-for`循环展示数据数组，展示了Vue的数据绑定和循环渲染。接着，通过计数器案例，演示了如何使用Vue的方法处理点击事件，动态更新数据，并使用`v-on`和语法糖简化代码。最后，讲解了如何实现点击按钮改变数值的计数器功能。

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

1.Vue初体验

const（常量）
let（变量）
var（有缺陷）

<body>
<!--引入vue.js-->
<script src="../js/vue.js"></script>
<!--let（变量）const（常量）var(有缺陷)-->
<div id="app"><!--显示声明-->
    <h1>{{message}}</h1>
    {{message}}</div>

<script>
    const app =new Vue({
        el:'#app',//用于挂载有管理的元素
        data:{//定义数据
            message:'你好，老表'//声明变量
        }
    })
</script>
</body>

2.v-for

2.1v-for应用于数据的循环显示

<body>
<div id="app">
    <ul>
        <!--v-for循环 item容器用来存放每次循环数据-->
        <li v-for="item in message">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app =new Vue({
        el:'#app',
        data:{
            message:['星际争霸','星际航行','少年派']
        }
    })
</script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OZQzsnl3-1615202027072)(D:\学习笔记\Vue笔记图片\image-20210306180755004.png)] 在浏览器console中响应式添加数据$

3.计数器案例

3.1任务：实现点击按钮改变数值

<body>
<div id="app">
    <h1>当前数值：{{counter}}</h1>
<!-- 方法1   <button v-on:click="counter++">+</button>-->
<!--    	<button @click="counter--">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></scri0pt>
<script>
    const app= new Vue({
        el:'#app',
        data:{
            counter:0
        },
        //方法2
        methods:{//menthods可以定义多个方法
            add:function (){
                this.counter++;//当前数值++
            },
            sub:function (){
                this.counter--;//当前数值--
            }
        }
    })
</script>
</body>

3.2语法糖

语法糖及是一种简写模式如

 <button v-on:click="counter++">+</button>
 <button @click="counter--">-</button>
<!--@click 代替 v-on:click-->

(ʃƪ ˘ ³˘)异瞳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录