vue学习记录-01 vue初体验

vue学习记录-01 vue初体验

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、HelloVueJS

想要使用VUE首先是需要将VUE进行引入，官方提供了两个版本供选择，当然我们也可以直接将VUE文件下载到本地使用。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

这里我们直接选择开发版本即可，开发版本的错误警告可以帮助我们进行VUE的学习。
接下来就是创建第一个Vue应用。

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

const app=new Vue({
            el:"#app",//用于挂载要管理的元素
            data:{//定义数据
                message:"Hello,Vue!",
                name:"Aaron"
            }
        })

我们可以直接在控制台看到vue应用里面的数据。

这是页面的输出效果。

二、Vue列表展示

接下来尝试在VUE里面输出一个列表。

<div id="app">
        {{movies}}
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

v-for是vue用于遍历循环的一个指令，我们用这个指令来做一个电影列表

const app=new Vue({
            el:"#app",
            data:{
                message:"Hello,Vue!",
                movies:["星际穿越","大话西游","少年派","盗梦空间"]
            }
        })

页面效果：

三、Vue案例：计数器

我们再来做一个简单的计数器体验一下Vue的使用。

<div id="app">
        <h2>当前计数：{{counter}}</h2>
        <button v-on:click="add">+</button>
        <button @click="sub">-</button>
    </div>

我们使用v-on指令点击事件的事件监听器，也可以用语法糖写为"@"。

<script>
        const app = new Vue({
            //el类型 string或者HTMLElement
            el: "#app",
            //data类型 Object或者Function()
            data: {
                counter: 0
            },
            //methods类型 {[key:string]:Function}
            methods: {
                add: function () {
                    console.log("add被执行");
                    this.counter++;
                },
                sub: function () {
                    console.log("sub被执行");
                    this.counter--;
                }
            }
        })
    </script>

页面效果