科学入门Vuejs,几个小示例让你爱上它

已收录   阅读次数: 876
2021-10-2409:28:18 发表评论
摘要

以示例来学一门语言是最容易学进去的,这符合所见即所得,所以学习Vuejs也并不例外,伯衡君接下来就以这几天我所学到的内容做一些简单的汇总,以一些有趣而又简单的示例来入门此框架……

分享至:
科学入门Vuejs,几个小示例让你爱上它

开篇寄语

以示例来学一门语言是最容易学进去的,这符合所见即所得,所以学习Vuejs也并不例外,伯衡君接下来就以这几天我所学到的内容做一些简单的汇总,以一些有趣而又简单的示例来入门此框架。

内容详情

以下内容以Vue3版本为例,和2的差别不是特别大。

如果熟悉jQuery的朋友,肯定知道在使用jQuery前,会在head标签中引入,vuejs也并不例外,如果是使用vuejs cli则另当别论,不在本篇讨论范围了。

打开VS code或者其他顺手的编辑器,在页面输出"Hello World!",代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vuejs Demo</title>
</head>

<body>
    <div id="app">
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        var app = {
            template: "<h1>Hello World</h1>"
        };
        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>

使用浏览器打开刚创建的 index.html ,页面会输出一个大大的 h1 标签,内容就是我们期待的 Hello World,如下图所示:

科学入门Vuejs,几个小示例让你爱上它

好,这样一来你就掌握了Vuejs了,就是这么简单。

接下来是在实际应用中,表现上例相同的内容,但是书写方法不一样的方式。

  • 数据绑定

示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vuejs Demo</title>
</head>

<body>
    <div id="app">
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        var app = {
            template: "<h1>{{msg}}</h1>",
            data() {
                return {
                    msg: 'Hello World',
                }
            }
        };
        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>

可以看到,Vuejs传递数据是以"{{}}"这个符号为标志的。

  • Vue组件(Vue.component)

Vue.component(id, [definition]) 方式是注册一个名称为 id 的全局组件,然后我们可以通过使用该组件来,实现目标元素渲染,示例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vuejs Demo</title>
</head>

<body>
    <div id="app">
        <helloworld></helloworld>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({});
        app.component('helloworld', {
            data() {
                return {
                    msg: "Hello World"
                }
            },
            template: `<h1>{{ msg }}</h1>`,
        })
        app.mount("#app")
    </script>
</body>

</html>
  • Vue.directive

自定义一个指令,并且指令的使用是通过在目标元素中添加 v-指令id属性来实现的。

示例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vuejs Demo</title>
</head>

<body>
    <div id="app">
        <div v-helloworld="msg"></div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'Hello World'
                }
            }
        });
        app.directive("helloworld", {
            mounted(el, binding) {
                el.innerHTML = "<h1>" + binding.value + "</h1>"
            }
        })
        app.mount("#app")
    </script>
</body>

</html>
  • Render Faction

Vue 建议在绝大多数情况下使用模板来构建应用程序。但是,在某些情况下,我们需要 JavaScript 的全部编程能力。这就是我们可以使用渲染功能的地方,示例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vuejs Demo</title>
</head>

<body>
    <div id="app">
       
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const {
            createApp,
            h
        } = Vue
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'Hello World'
                }
            },
            render() {
                return h('h1', {}, this.msg)
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

先到这里,后续会有更多精彩文章发布,敬请期待。

  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: