前言
接下來我將會先帶領大家安裝vue.js並開始編寫第一個vue程序;
有興趣瞭解更多的同學可以添加我的一個聯繫方式(下方);
QQ:2508598490;郵箱:2508598490
Vue是什麼?
VueVue (讀音 /vjuː/,類似於 view)是一款開源的JavaScript框架,由尤雨溪先生以及他的團隊開發,它不僅容易上手,而且還能完成複雜的業務需求,是一款高性能的JavaScript開發框架;
安裝Vue
先打開瀏覽器搜索Vue點擊紅色方框選中部分;
點擊紅色方框選中的紅色部分(起步)
點擊左側的安裝,向下翻會有一個開發版本和運行版本,下載安裝版本即可
接下來我們正式開始安裝Vue,請先將vue.js文件導入到項目內;
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
以上方法是最常使用的也是最可靠的!每個需要使用vue的html都必須引用vue.js;
第一個Vue實例
那麼我們先new一個Vue實例
var vm = new Vue({
// new一個vue實例,它的名字叫vm;
});
實例既然已經new出來了是不是該掛載呢???
var app = new Vue({
//通過el掛載實例
el: '#vm',
//通過data渲染出結果;
data: {
//掛載數據名稱
msg: 'Hello Word!!!',
}
});
我們通過el對#vm這個id進行渲染出結果;
接下來我們會爲同學們提供完整代碼演示;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="vm" v-text="msg">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data: {
msg: 'Hello Word!!!',
}
});
</script>
</body>
</html>
接下來我們會更新更多關於Vue的教程!
你們免費的點贊就是支持我寫下去的動力!