Vue高效前端开发-初识Vue

最新推荐文章于 2025-03-29 16:40:21 发布

PROBIE_

最新推荐文章于 2025-03-29 16:40:21 发布

阅读量988

点赞数 10

分类专栏： h5 文章标签： vue web html5

本文链接：https://blog.youkuaiyun.com/PROBIE_/article/details/118121182

版权

h5 专栏收录该内容

6 篇文章

订阅专栏

Vue

(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

以上是百度上说的，花里胡哨的，Vue，简单来说就是一款提供高效的数据绑定和灵活的组件系统，可以让web的开发变得简单。

理论性就不多说了，直接上代码。

接触新语言第一步：Hello，world！

<body>
    <div id="app">
        {{text}}
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                text: "Hello,world!"
            }
        })
    </script>
</body>

简单的输出hello，world

可以把div看做视图层，而script看做视图模型层

直接看第二个script，首先是创建vue实例，el：“#app”就是将vue实例挂载到id为app的这个元素上，data则指向hello，world这个文本值，也就是vue实例的数据对象，在div里边使用{{}}进行绑定数据，最终实现控制台输出显示

Vue的双向数据绑定

在input，select，text，checkbox，radio等控件上可以使用v-model指令进行数据双向绑定，可以根据控件类型自动选取正确的方法更新元素

<body>
    <!--视图层-->
    <div id="app">
        <p>
            <input type="text" v-model="Msg" placeholder="请输入">
        </p>
        <p>{{Msg}}</p>
    </div>
    <!--视图模型层-->
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                Msg: "Hello World!"
            }
        })
    </script>
</body>

效果如图所示：
在这里插入图片描述
如图可以看出，代码中我使用的hello，world，而我在输入框输入了123下面也就变成123，这就是双向数据绑定。在输入框使用的v-model指令可实现。

接下来使用此方法做一个小案例

<body>
    <div id="app" style="text-align:center">
        <fieldset>
            <legend>WelCome to you</legend>
            <p>
                姓：<input type="=text" v-model="xing" placeholder="姓">
            </p>
            <p>
                名：<input type="=text" v-model="ming" placeholder="名">
            </p>
        </fieldset>
        <p>欢迎您：{{xing}}{{ming}}</p>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                xing: "",
                ming: "",
            }
        })
    </script>
</body>

实现了姓和名组合。

Vue生命周期函数

1，created()函数，实例建立完成后调用。
2，mounted()函数，el挂载到实例上之后调用。
3，beforeDestroy()函数，实例被销毁之前调用。

下面通过实例演示

<body>
    <div id="add" style="font-size: 2rem;height:50px;width:30%;text-align: center;background-color: blueviolet;">
        <b>{{show}}</b>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#add",
            data: {
                show: "",
                str: [
                    "道路交通委提醒您：",
                    "道路千万条",
                    "安全第一条",
                    "行车不规范",
                    "亲人两行泪"
                ]
            },
            created() {
                var _this = this;
                var index = 0;
                setInterval(function() {
                    if (index == _this.str.length) {
                        index = 0;
                    }
                    _this.show = _this.str[index];
                    index++;
                }, 1000);
            }
        })
    </script>
</body>

以上使用了created函数，建立了此页面副本，通过setInterval函数循环调用匿名函数，实现反复循环调用str字符数组的值，实现页面的轮播显示。

Vue过滤器

Vue支持在{{}}的插值的尾部添加一个“|”对数据进行过滤，经常用于格式化文本。
1，全局创建

Vue.filter("过滤器名",function(val){
	过滤语句
})

2，局部创建

        new Vue({
            el: "#add",
            filters: {
                过滤器名: function(val) {
                    过滤语句
                }
            }
        })

例：

<body>
    <div id="add">
        <input type="=text" v-model="Msg" /> {{Msg | MsgFilters}}
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#add",
            data: {
                Msg: "123123123"
            },
            filters: {
                MsgFilters: function(val) {
                    if (val.indexOf("1") != -1) {
                        val = val.replaceAll("1", "*");
                    }
                    return val;
                }
            }
        })
    </script>
</body>