用vue.js寫一個營銷號生成器有多簡單

用vue.js寫一個營銷號生成器有多簡單

背景

目前三大前端js框架爲: Angular.js, React.js, Vue.js。其中Vue的MVVM模式具有易上手、好理解的特性，受到越來越多開發者的青睞。本文用一個簡單的例子來帶大家感受一下Vue的數據雙向綁定。
演示

開發目標

寫一個營銷號生成器。 輸入 主體、事件、另一種說法 即可得到一段營銷號臺詞。例如輸入：

主體： 人
事件：不能飛
另一種說法：人沒有翅膀，飛不起來

得到這樣一段營銷號口吻的語句

人不能飛是怎麼回事呢？人相信大家都很熟悉，但是人不能飛是怎麼回事呢，下面就讓小編帶大家一起了解吧。人不能飛，其實就是人沒有翅膀，飛不起來，大家可能會很驚訝人怎麼會不能飛呢？但事實就是這樣，小編也感到非常驚訝。這就是關於人不能飛的事情了，大家有什麼想法呢，歡迎在評論區告訴小編一起討論哦。

效果圖

代碼實現

首先，我們通過引入vue.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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("複製成功")
})

最終效果

演示
完整代碼已上傳至公衆號【HackDev】，後臺回覆「營銷號生成器」即可獲取。