Vue学习

vue学习

  • 一、vue学习第一天
    • 1.了解wue
    • 2.安装vue
    • 3.安装开发工具
  • 二、vue学习第二天
    • 1.hellovue代码
    • 2.vue显示列表中的数据
    • 3.vue实现计数器小案例

一、vue学习第一天

1.了解wue


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

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

2.安装vue

  • CDN
    对于制作原型或学习,你可以这样使用最新版本:
  • 直接下载
  • 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>

你可能感兴趣的:(vue)