用vue.js写一个营销号生成器有多简单

背景

目前三大前端js框架为: Angular.js, React.js, Vue.js。其中Vue的MVVM模式具有易上手、好理解的特性，受到越来越多开发者的青睐。本文用一个简单的例子来带大家感受一下Vue的数据双向绑定。
演示

开发目标

写一个营销号生成器。 输入 主体、事件、另一种说法 即可得到一段营销号台词。例如输入：

主体： 人
事件：不能飞
另一种说法：人没有翅膀，飞不起来

得到这样一段营销号口吻的语句

人不能飞是怎么回事呢？人相信大家都很熟悉，但是人不能飞是怎么回事呢，下面就让小编带大家一起了解吧。人不能飞，其实就是人没有翅膀，飞不起来，大家可能会很惊讶人怎么会不能飞呢？但事实就是这样，小编也感到非常惊讶。这就是关于人不能飞的事情了，大家有什么想法呢，欢迎在评论区告诉小编一起讨论哦。

效果图

在这里插入图片描述

代码实现

首先，我们通过引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

然后我们定义三个输入框，分别用来输入主体、事件和另一种说法。

<div id="app">
    <input placeholder="主体" v-model="a"><br>
    <input placeholder="事件" v-model="b"><br>
    <input placeholder="另一种说法" v-model="c"><br>
    <div>
        {{a}}{{b}}是怎么回事呢？{{a}}相信大家都很熟悉，但是{{a}}{{b}}是怎么回事呢，下面就让小编带大家一起了解吧。{{a}}{{b}}，其实就是{{c}}，大家可能会很惊讶{{a}}怎么会{{b}}呢？但事实就是这样，小编也感到非常惊讶。这就是关于{{a}}{{b}}的事情了，大家有什么想法呢，欢迎在评论区告诉小编一起讨论哦
    </div>
</div>
<script type="text/javascript">
let app = new Vue({
  el: '#app',
  data: {
    a: '', 
    b: '',
    c:''
  }
})
</script>

分析

因为vue.js使用了数据-视图双向绑定的设计思路，当变量发生改变的同事，变量对应的视图也随机改变了。不需要我们手动添加onclick, onchange等触发事件。

那么同样的功能，如果用Jquery来实现需要几步呢？

首先引入 jquery

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

然后定义文本框内文字改动的触发事件

<input placeholder="主体" id="a" onkeyup="update()"><br>
<input placeholder="事件" id="b" onkeyup="update()"><br>
<input placeholder="另一种说法" id="c" onkeyup="update()"><br>
<div id="d"> <!--这里用来放结果-->
</div>

function update(){
    let a = $("#a").val()
    let b = $("#b").val()
    let c = $("#c").val()
    $("#d").html(`${a}${b}是怎么回事呢？${a}相信大家都很熟悉，但是${a}${b}是怎么回事呢，下面就让小编带大家一起了解吧。${a}${b}，其实就是${c}，大家可能会很惊讶${a}怎么会${b}呢？但事实就是这样，小编也感到非常惊讶。这就是关于${a}${b}的事情了，大家有什么想法呢，欢迎在评论区告诉小编一起讨论哦`)
}

可以看到是用事件 onkeyup 来触发视图的改动的，和vue的自动触发是完全不同的两种思路。

优化

功能是实现了，但是太丑了，我们用bootstrap简单优化一下，就得到了以下效果

在这里插入图片描述

为了让用户能够直接复制结果到剪贴板，我们可以使用clipboard插件

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

定义复制按钮

<button id="cp" :data-clipboard-text="d">点我复制</button>

其中:data-clipboard-text表示复制的内容为d，d是vue中的一个变量，我们通过computed属性来计算得到d

computed: {
    d: function () {
        return `${this.a}${this.b}是怎么回事呢？${this.a}相信大家都很熟悉，但是${this.a}${this.b}是怎么回事呢，下面就让小编带大家一起了解吧。${this.a}${this.b}，其实就是${this.c}，大家可能会很惊讶${this.a}怎么会${this.b}呢？但事实就是这样，小编也感到非常惊讶。这就是关于${this.a}${this.b}的事情了，大家有什么想法呢，欢迎在评论区告诉小编一起讨论哦。`
    }
  }

复制成功弹出提示

const cp = new ClipboardJS('#cp')
cp.on('success', function(e) {
    alert("复制成功")
})

最终效果

在这里插入图片描述

演示
完整代码已上传至公众号【会编程的z同学】，后台回复「营销号生成器」即可获取。