一，安裝，引用Vue.js
對(duì)于我們剛?cè)腴T的純小白來講虾标，想要學(xué)好Vue.js朝墩，只有知道了認(rèn)識(shí)了和了解了，我們才能更容易的學(xué)習(xí)起來窟却。最簡(jiǎn)單的一句話來理解。Vue.2.0：Vue.js是構(gòu)建用戶界面的 漸進(jìn)式框架，目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件载城。
第一步：我們要安裝，引用Vue.js费就，因?yàn)槭切“姿咄撸覀兿炔煌鎻?fù)雜的東西，先不用管腳手架力细，和Node.js環(huán)境睬澡，從最基本的CDN引入來學(xué)習(xí)Vue.js
第二步：進(jìn)入Vue.js官網(wǎng)，http://doc.vue-js.com/ 點(diǎn)擊 起步 我們找到 <script src="https://unpkg.com/vue/dist/vue.js"> (注：請(qǐng)根據(jù)官網(wǎng)推出的<script>我們這里只是示例眠蚂，官網(wǎng)是最新的CDN)
第三步：現(xiàn)在我們?cè)谖覀儎?chuàng)建好的文件 進(jìn)入我們的 index.html 里面粘貼就可以了煞聪。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js</title>
<link rel="stylesheet" href="..//vue.js/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
</body>
</html>
這樣我們就基本擁有我們的CDN了，接下來我們就可以書寫我們Vue里面的內(nèi)容了河狐。
這里我們?yōu)榱烁奖阄覀儠鴮慥ue的內(nèi)容我們?cè)谖覀冎皠?chuàng)建的文件夾里面在創(chuàng)建一個(gè) app.js 這個(gè)單獨(dú)的文件米绕，然后我們?cè)谝氲轿覀兊?code><body>里面
<body>
<script src="..//vue.js/app.js"></script>
</body>
就像上面這樣我們就可以在 app.js 實(shí)例化我們Vue的對(duì)象瑟捣。
二，實(shí)例化Vue對(duì)象
上面我們已經(jīng)將CDN引入進(jìn)來栅干，現(xiàn)在我們就可以實(shí)例化Vue對(duì)象迈套，創(chuàng)建一個(gè) new Vue({}); 我們?cè)冢ǎ├锩娴膮?shù)是什么呢，就是我們的對(duì)象碱鳞，我們可以用我們的對(duì)象桑李，在對(duì)我們的 index.html 進(jìn)行操作。
在我們對(duì)象里面窿给，會(huì)有什么贵白，有el ，el就是 element 他的意思就是：需要獲取的元素崩泡，一定是html中的跟容器元素 我們會(huì)在我們的Vue里面對(duì)我們DOM進(jìn)行操作禁荒，我們并不會(huì)在我們的html里面寫很多結(jié)構(gòu)，我們?cè)?strong>html里面只有一個(gè)跟容器角撞，然后我們會(huì)通過我們Vue的對(duì)象呛伴，方法，屬性谒所，往我們這個(gè)跟容器里面去填充內(nèi)容热康。
既然我們有了 el 那么我們就要在我們的 index.html 當(dāng)中擁有這個(gè)跟容器
<body>
<!-- app-vue是根容器 -->
<div id="app-vue"></div>
</body>
我們有了跟容器那么我們 app.js 的 el值就是 app-vue 這樣我們后面有對(duì)應(yīng)的方法或者數(shù)據(jù)執(zhí)行的時(shí)候就告訴了對(duì)應(yīng)的 div里面去做。
new Vue({
el:"#app-vue",
});
那么接下來我們?cè)趺唇o我們的div里面寫內(nèi)容呢劣领，首先我們回到我們的app.js里面寫另外一個(gè)參數(shù)data,那么data這個(gè)參數(shù)是干嘛的姐军，他是：用于數(shù)據(jù)存儲(chǔ)，那么是啥意思尖淘，就是我們?cè)?strong>data里面設(shè)置對(duì)應(yīng)的數(shù)據(jù)奕锌，比如：數(shù)字，字符串村生，數(shù)組歇攻，對(duì)象等等都可以，從本質(zhì)上來講我們的data是個(gè)對(duì)象梆造，在對(duì)象里面我們的key，value是我們自己定義的葬毫。舉個(gè)栗子镇辉，我們現(xiàn)在data里面寫一個(gè)name:"南極小丑",現(xiàn)在我們有了一個(gè)key值和value值，現(xiàn)在我們就是要要做的就是怎么將我們的“南極小丑”展示到頁面上去
new Vue({
el:"#app-vue",
data:{
name:"南極小丑"
}
});
目前來講我們的div是個(gè)空的東西贴捡，那么我們?cè)?strong>div里面寫一個(gè)<h1>標(biāo)簽忽肛，在h1標(biāo)簽里面我們使用一個(gè)方法 {{ }} 兩個(gè)大括號(hào)，通過這種方法我們可以拿到我們app.js里面data里面所擁有的內(nèi)容烂斋，我們?cè)趦蓚€(gè)大括號(hào)里面直接寫上我們name就可以拿到里面的值屹逛。
<body>
<div id="app-vue">
<h1>{{name}}</h1>
</div>
</body>
三础废，數(shù)據(jù)和方法
在上面我們講到了兩個(gè)屬性 el，和 data 下面這個(gè)屬性是方法罕模，在html當(dāng)中我們可以調(diào)用我們Vue里面的方法评腺，那么這個(gè)方法就是 methods，methods就是用于儲(chǔ)存方法淑掌，和data本質(zhì)也是一樣是個(gè)對(duì)象蒿讥，我們也可以在里面創(chuàng)建很多方法，舉個(gè)栗子抛腕，我們?cè)?strong>methods里面寫一個(gè)打招呼的方法
new Vue({
el:"#app-vue",
data:{
name:"南極小丑"
},
methods:{
greet:function(){
return 'Good morning '芋绸；
}
}
});
上面是我們寫好的方法，那么我們?cè)趺丛谖覀兊捻撁嫔厦嬲故疚覀兊姆椒氐５校鋵?shí)和我們data調(diào)用的方式很相像的摔敛，只是方法有括號(hào)，屬性沒有括號(hào)的全封，接下來我們?cè)谖覀兊?code><h2>標(biāo)簽里面調(diào)用我們的方法
<body>
<div id="app-vue">
<h1>{{name}}</h1>
<h2>{{greet()}}</h2>
</div>
</body>
這樣我們的方法就調(diào)用到我們的h2里面了马昙，既然我們的methods是方法，那么我們的方法就可以傳值售貌，我們將我們的Good Morning改成我們的Good Afternoon给猾，我們就可以在greet（）括號(hào)里面寫Afternoon，既然我們傳了一個(gè)值颂跨，那么我們methods就要接收一個(gè)值,我們給一個(gè)Day值
<body>
<div id="app-vue">
<h1>{{name}}</h1>
<h2>{{greet('Afternoon')}}</h2>
</div>
</body>
new Vue({
el:"#app-vue",
data:{
name:"南極小丑"
},
methods:{
greet:function(Day){
return 'Good' + Day 敢伸；
}
}
});
在我們方法當(dāng)中很多時(shí)候我們都會(huì)應(yīng)用到data里面 屬性，那我們我們?cè)趺床拍苣玫?strong>data里面的屬性呢恒削，通常我們會(huì) this.data.name這樣我們就拿到了data里面name的屬性值池颈，但是在我們Vue里面我們可以直接this.name我們還是舉個(gè)栗子
new Vue({
el:"#app-vue",
data:{
name:"南極小丑"
},
methods:{
greet:function(Day){
return 'Good' + Day + " " + this.name;
}
}
});
以上就是我們常用的方法，這是我和大家一起分享我自己所學(xué)到的一些Vue.js的基礎(chǔ)知識(shí)钓丰，希望看到這篇文章的各位前輩多多關(guān)照躯砰，小生有哪些錯(cuò)誤的地方希望能夠指出來，也希望其他和我一樣的小白能夠有所幫助携丁。
