為了沖進前端的大門，小編踏上了學習Vue.js的不歸路，從今天起就開始和大家分享學習之路啦。
基礎知識的話HTML5、JavaScript肯定必不可少，當然，小編實名羨慕java好的小伙伴，我真的是跌在java上千千萬萬遍。好了，進入正題，我就直接上干貨啦。
首先是工具：pc機+Hbuilder就可以啦。(當然其他編譯軟體也行)
前期準備：Vue下載在Vue.js官方網站http://cn.vuejs.org/點擊學習->教程->找到安裝（綠色）->開發版本,下載到自己想要存放的位置。
正式開始：打開Hbuilder->單擊檔案->新建專案->(自行命名)創建。將剛剛下載的Vue.js復制（Ctr+C）單擊你創建的專案粘貼上去（Ctr+v）。剛建的專案右鍵->新建（new）->html檔案->創建。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue入門</title>
<script src="https://bbs.csdn.net/topics/vue.js"></script>
</head>
<body>
<div id="root"><!--掛載點間內容為模板-->
<div v-on:click="handleClick">{{content}}</div> <!--"v-on:"可簡寫為@>
<!--
{{msg}} <!--div為掛載點
<h1>{{number}}</h1><!--插值運算式{{}}
-->
</div>
<!--
插值運算式還有：
<h1 v-text='content'></h1>顯示為<h1>hello<h1>
<h1 v-html='conent'></h1>顯示為hello
-->
</div>
<script type="text/javascript">
new Vue({
el:'#root',/*el:讓Vue實體接管某一元素，即與哪一DOM節點系結，“#”千萬不要忘記，Hbuilder不會報錯，一個bug卡一下午都是正常的*/
/*
data:{
msg:'hello world',
number:123
},
*/
//data存放資料
data:{
content:'<h1>hello<h1>'
},
//方法
methods:{
handleClick:function(){
this.content = "world"//點擊后hello變為world
}
}
})
</script>
</body>
</html>
第一次分享不太聰明的亞子，大家將就著看吧，都要多練多實踐呀，今天也Vue寵（虐）愛（我）的一天！
uj5u.com熱心網友回復：
建議你去寫blog, 寫在這沒多少人看的uj5u.com熱心網友回復：
哈哈哈，謝謝提醒轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/33604.html
標籤：其他