1—安装Vue及简单入门实例

目录

安装

 简单实例

@click

 v-for

---

安装

Vue框架分为开发版本和生产版本，两者的简答区别是开发版本主要运用于产品未上线，调试时使用比较方便；生产版本适合于产品发布。

官网提供的安装方式：1、直接通过script引用；2、CDN；3NPM。具体可以进官网参考文档

这里我采用的是利用script直接引用：在开发版本鼠标右击，另存为。然后在vscode中引用即可

<script src="../vue/vue.js"></script>

 简单实例

先创建一个<div>；这里的{{}}双大括号是Mustache，就是一个解译的形式，可以将其中的至或者简单的运算显示出来，这个以后再议。

<div id="test">
        <p>{{message}}</p>
        <p>{{count}}</p>
        <ul>
            <li v-for="item in list_data">{{item}}</li>
        </ul>
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>

 引入Vue：创建一个Vue的对象test

const test = new Vue({})

其中el解释的是div的id=test，data和methods分别存的变量和方法；调用里面的变量可以用

this.

 methods中可以定义多个方法，这里定义的是点击+按钮，count会加1，点击-按钮,coun会减1

 <script src="../vue/vue.js"></script>
    <script>
        const test = new Vue({
            el:'#test',
            data:{
                message:'这是一个Vue框架',
                count:0,
                list_data:['test1','test2','test3']
            },
            methods:{
                add: function(){
                    console.log('add执行'),
                    this.count++
                },
                sub:function(){
                    this.count--
                }
            }
        })
    </script>

@click

代表鼠标单击事件，除了@click还有其他的形式：v-on表示监听

<button v-on:click="sub">-</button>

 v-for

for循环，这里实现的是一个列表的形式：

声明： 本文章学习来源B站up主ilovecoding