Vue.js autolinker 적용

개요

Vue.js autolinker 적용

방법 1: $nextTick

<div id="app">
	<p>{{message}}</p>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.rawgit.com/wouterds/875f63a391c5cc65fb94/raw/9c72430e6bad67792299560c135872b91af99947/jquery.autolink.js"></script>
<script src="//unpkg.com/vue"></script>
<script>
new Vue({
	el: '#app',
	data: {
		message: `http://google.com
www.google.com
google.com
google@google.com
123-456-7890
@MentionUser
#HashTag`
	},
	mounted: function() {
		this.$nextTick(function () {
			$('p').autolink();
		})
	}
})
</script>

방법 2: 컴포넌트 props

<div id="app">
  <autolink message="http://google.com
www.google.com
google.com
google@google.com
123-456-7890
@MentionUser
#HashTag"></autolink>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js'></script>
<script src="//cdn.rawgit.com/wouterds/875f63a391c5cc65fb94/raw/9c72430e6bad67792299560c135872b91af99947/jquery.autolink.js"></script>
<script>
Vue.component('autolink', {
  props: ['message'],
  template: '<span>{{ message }}</span>',
  mounted: function() {
    $(this.$el).autolink();
  }
});

new Vue({
  el: '#app'
});
</script>

방법 3: 컴포넌트 data

<div id="app">
  <autolink :msg="message"></autolink>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js'></script>
<script src="//cdn.rawgit.com/wouterds/875f63a391c5cc65fb94/raw/9c72430e6bad67792299560c135872b91af99947/jquery.autolink.js"></script>
<script>
Vue.component('autolink', {
  props: ['msg'],
  template: '<span>{{ msg }}</span>',
  mounted: function() {
    $(this.$el).autolink();
  }
});

new Vue({
  el: '#app',
  data: {
  	message: `http://google.com
www.google.com
google.com
google@google.com
123-456-7890
@MentionUser
#HashTag`
  }
});
</script>

같이 보기

• jquery.autolink.js
• Autolinker.js