全部标签
写点什么
OpenHarmony算法元宇宙MySQL移动开发学习方法Web3.0高效工作数据库Python音视频前端AI大数据团队管理程序员运维深度思考低代码redisgolang微服务架构flutter 查看更多

Vue 基础学习（一）

作者：Studying_swz
  • 2022-11-08
    天津

  • 本文字数：1383 字

    阅读完需：约 5 分钟

Vue基础学习（一）

一、Vue 入门

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>
<div id="app">    {{message}}    {{name}}</div>
<script src="../js/vue.js"></script><script>    // let(变量)/const（常量）    //声明式编程    const app = new Vue({        el:"#app", //用于挂载要管理的元素        data:{ //定义数据            message:    "你好啊，李银河！",            name:   "codewhy"        }    })
    //原始js的做法（命令式编程）    // 1. 创建div元素，设置id属性    // 2.定义一个变量message    // 3.将message变量放在前面的div元素中显示    // 4.修改message的数据：今天天气不错    // 5.将修改后的数据再次替换到div
</script>
</body></html>
复制代码


二、Vue 列表展示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>
<div id="app">    <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:    "你好啊！",            movies:   ['星际穿越','大话西游','少年派','盗梦空间']        }    })</script></body></html>
复制代码

三、Vue 计数器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body> <div id="app">    <h2>当前计数：{{counter}}</h2>    <!-- 1.简单的可以这样写 -->    <!-- <button v-on:click="counter++">+</button>    <button v-on:click="counter--">-</button> -->
    <!-- 2.复杂的监听这样写 -->    <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(){                this.counter++;                console.log("add被执行");            },            sub:function(){                this.counter--;                console.log("sub被执行");            }        }
    })    //以前：    //1.拿button    //2.添加监听</script>
</body></html>
复制代码



  • 语法糖：v-on:click === @click

四、Vue 的 MVVM


五、options 选项


注：开发中什么时候称之为方法，什么时候称之为 函数？


  • 方法---定义在类中；函数---定义在外面

六、Vue 的生命周期🛴



  • 注：在生命周期中，我们可以自己根据的需要求，编写回调函数。

划线
评论
复制
发布于: 刚刚阅读数: 4

版权声明: 本文为 InfoQ 作者【Studying_swz】的原创文章。

原文链接:【http://xie.infoq.cn/article/8cf35cea34fca657bc39bc2ca】。文章转载请联系作者。

Vue11月月更
用户头像

Studying_swz

关注

还未添加个人签名 2020-12-23 加入

还未添加个人简介

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
Vue基础学习（一）_Vue_Studying_swz_InfoQ写作社区