10分钟快速入门vue.js

Vue.js是一个轻巧、高性能、可组件化的MVVM库，一套用于构建用户界面的渐进式框架，上手简单，兼容强大。

官方文档：https://cn.vuejs.org/v2/guide/

下面我们就直接来使用一下vue:

引入vue.js:

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

创建一个vue对象，绑定某个节点，该节点下的所有dom将被这个vue对象接管：

vue对象类似微信小程序,data里面的属性可以在页面上通过“{{}}”（双大括号）形式来映射，并且是双向绑定的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>这是一个vue项目</title>
    </head>
    <body>
        
        <div id="app">
            
            {{msg}}

        </div>
        
        
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            
            var app = new Vue({
                el:'#app',//接管的父类节点容器
                data:{
                    msg:"Hello world"
                }
                
            })
            
            
        </script>
    </body>
</html>

运行如下：

常规操作：

vue的事件可以用v-on:click来绑定，也可以简写为 @click，常规方法定义在vue对象的methods里面

vue的条件执行可以用 v-if、v-else-if、v-else来执行，v-else必须跟在v-if或v-else-if后面

vue的循环可以用 v-for 来执行

下面一起来看下这些属性的用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>这是一个vue项目</title>
    </head>
    <body>
        
        <div id="app">
            
            {{msg}}
            
            <button @click="changeMsg()">点击看看</button>
            
            <p v-if="score > 90">今晚出去嗨</p>
            <p v-else-if="score >= 60">在家看电视</p>
            <p v-else="score < 60">房间学习vue</p>

            <ul>
                <li v-for="(item,index) in weekList">{{item}}-----{{index}}</li>
            </ul>
        </div>
        
        
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            
            var app = new Vue({
                el:'#app',//接管的父类节点容器
                data:{
                    msg:"Hello world",
                    score:59,
                    weekList:["周一","周二","周三","周四","周五","周六","周日"],
                },
                methods:{
                    changeMsg: function(){
                        this.msg = "Hello vue";
                    }
                }
                
            })
            
            
        </script>
    </body>
</html>

 

运行如下：

如此，您已经掌握了vue的几个用法了，同时也体会到vue的强大之处。

vue的历史不过区区数载，但势头凶猛异常，已经有一个完整的生态体系。

更多的vue学习，最直接的就是  vue官网。

祝大家在vue的学习之路上渐行渐远，崭露头角，引领风骚~

 

posted @ 2019-07-19 10:11  南之骄阳  阅读(793)  评论(0)  编辑  收藏  举报