vue.js最最最最簡單實例
一、總結
一句話總結：
1、vue.js實現實現數據的雙向綁定用的是什么標記？
雙大括號：比如{{message}}
2、vue數據循環輸出的標記是什么？
用的是標簽的v-if自定義屬性
10 <span v-if="ok"> 11 {{message}} 12 </span>
循環讀取數據感覺和thinkphp有點像
15 <li v-for="l in list"> 16 my name is {{l.name}},I am {{l.age}} years old 17 </li>
3、vue.js的使用步驟是怎樣的？
a、引包
b、{{變量名}} 實現雙向數據綁定
c、new Vue對象來操作數據
二、最最最最簡單的Vue示例（使用vue.js實現數據綁定實例）
1、基本介紹。
Vue作為中國人自己開發和維護的前端框架，兼備了angular和react的一些優點。先從一個最簡單的Vue示例開始：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue學習</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
2、使用
a、引包
首先，作為一個js框架，我們需要引入它的庫vue.js.就像我們學習jquery，我們就要使用script標簽引入jquery.js。
這個src可以是自己下載的vue包，也可以是線上維護更新的cdn，這兩者的唯一區別就是：我們使用自己下載的包，穩定且安全。使用cdn托管的方式，有可能代碼托管的服務器出問題，會影響自己的項目。
b、{{變量名}} 實現雙向數據綁定
其次，我們看到界面的這個東西：{{message}}。
這是一種數據雙向綁定的語法，熟悉angular或者react的都知道，這里面的是一個變量，這個變量的值我們在js代碼中賦值改變，界面就會跟着改變。如果message我們賦值為hello，界面就會展示hello。
c、new Vue對象來操作數據
最后，我們看這段代碼：
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }
})其中：new Vue代表了我們對我們的界面操作的申明。
el：“#app”,代表我要在id為app的div盒子中操作數據，表達的是一種入口和范圍的概念，就像我是一個中國人，我的活動范圍就是中國，我的所有的所作所為目前就在中國這個范圍內。
data：{
message：“hello vue,js!”
}
這是數據的雙向綁定的寫法，我們改變message的值，界面中的值會跟着改變。
這就是一個基本的最簡單的vue代碼的實現。
<完>
參考：Vue初體驗（一），最簡單的Vue示例 - CSDN博客
https://blog.csdn.net/mapbar_front/article/details/71941517
三、使用Vue實現數據綁定與判斷循環最最最簡單實例
Vue作為2016年最火的框架之一，以其輕量、易學等特點深受大家的喜愛。今天簡單介紹一下Vue的使用。
首先，需要在官網下載vuejs，或者直接用cdn庫。以下實例使用Vue實現數據綁定與判斷循環：
1 <!DOCTYPE html> 2 .<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app1"> 9 <!--vue判斷--> 10 <span v-if="ok"> 11 {{message}} 12 </span> 13 <!--vue循環--> 14 <ul> 15 <li v-for="l in list"> 16 my name is {{l.name}},I am {{l.age}} years old 17 </li> 18 </ul> 19 </div> 20 <!--引入cdn庫，引入js需要在最底部--> 21 <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script> 22 <script src="js/v1.js" type="text/javascript" charset="utf-8"></script> 23 </body> 24 </html>
js代碼:
//聲明
02.var app1=new Vue({
03. //綁定 DOM 元素
04. el:'#app1',
05. data:{
06. message:"hello world",
07. list:[
08. {name:'lvxueyuan',age:15},
09. {name:'xueyuan',age:15},
10. {name:'yuan',age:15},
11. {name:'lv',age:15},
12. {name:'lvxue',age:15}
13. ],
14. ok:1
15. }
16.})
大家快來試試吧!!!
https://www.cnblogs.com/yang-ting/p/7152506.html