《VUE-聲明式渲染》

前言

接下來我將會先帶領大家安裝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的教程!
你們免費的點贊就是支持我寫下去的動力!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章