Vue.js入门 0x0 Hello World！

最新推荐文章于 2023-04-07 16:47:20 发布

cellinlab

最新推荐文章于 2023-04-07 16:47:20 发布

阅读量280

点赞数

分类专栏： JavaScript 前端基础文章标签： Vue Node Vue数据绑定 MVVM Vue指令

本文链接：https://blog.csdn.net/funkstill/article/details/86665061

版权

前端基础同时被 2 个专栏收录

167 篇文章 0 订阅

订阅专栏

JavaScript

152 篇文章 2 订阅

订阅专栏

MVVM模式

Vue.j s 在设计上使用 MVVM (Model-View-View Model) 模式。MVVM 模式是由经典的软件架构 MVC 衍生来的。当 View （视图层）变化时，会自动更新到ViewModel （视图模型），反之亦然。 View 和 ViewModel 之间通过双向绑定（tdata-binding）建立联系。

模式拆分

//JQuery
if(showBtn){
    var btn = $('<button>Click me</button>');
    btn.on('click',function(){
        console.log('Clicked!');
    });
    $('#app').append(btn);
}

Vue.js 通过 MVVM 的模式拆分为视图与数据两部分，并将其分离。

<body>
    <div id='app'>
        <button v-if="showBtn" v-on:click="handleClick">Click me</button>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            showBtn:true
        },
        method:{
            handleClick:function(){
                console.log('Clicked!');
            }
        }
    })
</script>

Vue.js的开发模式

<!--自动识别最新稳定版本的Vue.js-->
<script src="https:unpkg.com/vue/dist/vue.min.js"></script>
<!--指定某个具体版本的 Vue.js-->
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>


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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Vue</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="book in books">{{book.name}}</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    books:[
                        {name:'《西游记》'},
                        {name:'《水浒传》'},
                        {name:'《红楼梦》'},
                        {name:'《三国演义》'}
                    ]
                }
            })
        </script>
    </body>
</html>

HelloWorld

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello VUE</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="name" placeholder="Your name">
            <!--v-model指令进行数据绑定，值对应于vue实例中data中name字段-->
            <h1>Hello,{{name}}</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            //vue的根实例，几乎所有代码都是一个对象，写入Vue实例的选项内
            var app = new Vue({
                el:'#app',//用于指定一个页面中已存在的DOM元素来挂载Vue实例
                //也可以写作    el:document.getElementById('app')
                data:{
                    name:''//默认双向绑定
                }
            })
        </script>
    </body>
</html>

Vue生命周期

created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介绍．
mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

var app = new Vue({
    el:'#app',
    data:{
        a:2
    },
    created:function(){
        console.log(this.a);//2
    },
    mounted:function(){
        console.log(this.$el);//<div id="app"></div>
    }
  })

插值与表达式

使用双大括号（ Mustache 语法）“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>What time is it?</title>
    </head>
    <body>
        <div id="app">
            {{date}}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    date: new Date()
                },
                mounted:function(){
                    var _this = this;//声明一个变量指向Vue实例，保证作用域一致
                    this.timer = setInterval(function(){
                        _this.date = new Date();//更新数据date
                    },1000);
                },
                beforeDestroy:function(){
                    if(this.timer){
                        clearInterval(this.timer);//在Vue实例销毁前，清除定时器
                    }
                }
            })
        </script>
    </body>
</html>

在{{}}中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、三元运算等

{{isOK ?'确定':'取消'}}

过滤器

Vue. 支持在{{}}插值的尾部添加一小管道符 “|”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Filter</title>
    </head>
    <body>
        <div id="app">
            {{ date | formatDate }}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            //在月份、日期、小时等于10时前面补零
            var padDate = function(value){
                return value<10?'0'+value:value;
            };
            var app = new Vue({
                el:'#app',
                data:{
                    date:new Date()
                },
                filters:{
                    formatDate:function(value){//value为需要过滤的数据
                        var date = new Date(value);
                        var year = date.getFullYear();
                        var month = padDate(date.getMonth()+1);
                        var day = padDate(date.getDate());
                        var hours = padDate(date.getHours());
                        var minutes = padDate(date.getMinutes());
                        var seconds = padDate(date.getSeconds());

                        return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
                    }
                },
                mounted:function(){
                    var _this = this;
                    this.timer=setInterval(function(){
                        _this.date = new Date();//更新date
                    },1000);
                },
                beforeDestroy:function(){
                    if(this.timer){
                        clearInterval(this.timer);
                    }
                }
            })
        </script>
    </body>
</html>

过滤器也可以串联，而且可以接收参数

<!--串联-->
{{message|filterA|filterB}}
<!--接收参数-->
{{message|filterA('arg1','arg2')}}

指令与事件

指令(Directives)是Vue.js模板中最常用的一项功能，它带有前缀v-，如 v-if、v-html、v-pre等。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上。

v-if

<div id="app">
    <p v-if="show">显示这段文本</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            show:true
        }
    })
</script>

v-bind

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            url:'https://www.github.com',
            imgUrl:'http://xxx.xxx.xxx/img.png'
        }
    })
</script>

v-on

<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            handleClose:function(){
                this.show = false;
            }
        }
    })
</script>

语法糖

语法糖是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。Vue.js的 v-bind 和 v-on 指令都提供了语法糖,也可以说是缩写,比如 v-bind,可以省略v-bind,直接写一个冒号 “ ：”

cellinlab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门 0x0 Hello World！

目录MVVM模式模式拆分Vue.js的开发模式HelloWorld Vue生命周期插值与表达式过滤器指令与事件 v-if v-bind v-on语法糖MVVM模式 Vue.j s 在设计上使用 MVVM (Model-View-View Model) 模式。MVVM 模式是由经典的软件架构 MVC 衍生来的...
复制链接

扫一扫

专栏目录