Vue学习

最新推荐文章于 2024-07-25 09:37:37 发布

~简

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量178

点赞数

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

本文链接：https://blog.csdn.net/weixin_43755186/article/details/106934130

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue学习

一、vue学习第一天
二、vue学习第二天

一、vue学习第一天

1.了解wue


如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

2.安装vue

CDN
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
直接下载
NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版 $ npm install vue

3.安装开发工具

下载webstorm

https://download.jetbrains.8686c.com/webstorm/WebStorm-2020.1.2.exe

配置（webstorm配置见）

二、vue学习第二天

1.hellovue代码

<!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: "你好vue！！！"

        }
    })
</script>
</body>
</html>

2.vue显示列表中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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: "你好vue！！！",
            movies:['a',"b","c"]

        }
    })
</script>
</body>
</html>

3.vue实现计数器小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>当前计数:{{num}}</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: {
            num: 0

        },
        methods: {
            add: function () {
                console.log("add被执行")
                this.num++
            }, sub: function () {
                console.log("sub被执行")
                this.num--
            },
        }
    })
</script>
</body>
</html>

~简

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习

vue学习一、vue学习第一天1.了解wue2.安装vue3.安装开发工具一、vue学习第一天1.了解wue如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。2.安装vueCDN对于制作原型或学习，你可以这样使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js
复制链接

扫一扫