vue快速入门

1|0首先使用idea新建一个静态项目

2|0初始化项目

打开终端执行 npm init -y
然后安装vue npm install vue --save
vue也可以使用cdn引入即可

3|0新建一个html文件

引入本地的vue.js

4|0demo案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <input type="text" v-model="name"><br>
    <input type="button" v-on:click="age++" value="点击我每次加1"><br>
    <input type="button" v-on:click="add" value="点击我每次加3"><br>
    <input type="button" @click="reduce" value="点击我每次减1"><br>

    <input v-on:keyup.enter="reduce" placeholder="点击enter"><br>
    <input @keyup.enter="reduce" placeholder="点击enter"><br>

    <input @keyup.alt.67="reduce" placeholder="alt+"><br>
    <div @click.ctrl="reduce">ctrl+点击</div>



    <input type="checkbox" v-model="language" value="java">java<br>
    <input type="checkbox" v-model="language" value="python">python<br>
    <input type="checkbox" v-model="language" value="php">php<br>
    <input type="checkbox" v-model="language" value="c++">c++<br>

    <h2>
        自我介绍：<span v-html="desc"></span><br><!--避免出现插值闪烁-->
        {{name}}真的好帅，尽管他已经{{age}}岁了
    </h2>
    <h2>
        你选择了{{language.join(",")}}语言
    </h2>

    <ul >
        <li v-for="(user,index) in users">
            {{index+1}}-{{user.username}}-{{user.gender}}
        </li>
    </ul>

    <input type="button" @click="show=!show" value="点我显示">
    <h1 v-if="show">我显示出来了</h1>
    <h1 v-show="show">hello</h1>

    <ul>
        <li v-for="user in users" v-if="user.gender=='女'">
            {{user.username}}-{{user.gender}}
        </li>
    </ul>

</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            name: "刘德华",
            age: 20,
            language:[],
            desc:"我叫刘德华",
            users:[{username:"刘备",gender:"男"},{username:"关羽",gender:"男"},
                {username:"张飞",gender:"男"},{username:"曹操",gender:"男"},{username:"赵云",gender:"男"},
                {username:"貂蝉",gender:"女"},{username:"嫦娥",gender:"女"},{username:"王昭君",gender:"女"}
            ],
            show:false
        },
        methods:{
            add: function () {
                this.age+=3;
            },
            reduce:function () {
                this.age--;
            },

        }

    });
</script>
</html>

5|0总结

vue是一种MVVM框架,实现了模型和视图的双向绑定。模型简单来说就是数据，视图就是你所看到的网页。

__EOF__

本文作者：程序员小宇
本文链接：https://www.cnblogs.com/treasury/p/12633791.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！