vue.js簡單入門
Vue.js是什麽？
Vue.js 是一套構建用戶界面的漸進式框架。
與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關註視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
1.0寫一個簡單的代碼實現
1、新建web項目
2、新建一個jsp文件
3、把vue.js放到Web的js目錄下
4、在jsp中引入vue.js
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
5、創建一個view對象(DOM組件)
註意：此view對象，可以包含n個數據,數據使用{{xxxx}}來描述
6、定義一個javascript的model
var myModel1 = {userName:‘張三豐‘,age:19};
7、創建一個Vue對象(ViewModel對象)
參數為一個json對象（包含2個參數,el,data）
代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="myDiv1">
{{userName}}
</div>
</body>
//在這裏引用Vue.js
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
var myModel1 = {userName:‘張三豐‘,age:19};
var myViewModel1 = new Vue({
el:‘#myDiv1‘,
data:myModel1
});
console.log( myViewModel1.age );
</script>
</html>
2.0 當然Vue.js為我們提供了很多的方法，下面我們實現幾個簡單的例子。
2.01 聲明式渲染：
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統
<body> <div id="myDiv1"> {{userName}} </div> </body> <script src="${pageContext.request.contextPath}/js/vue.js"></script> <script type="text/javascript"> var myModel1 = {userName:‘張三豐‘,age:19}; var myViewModel1 = new Vue({ el:‘#myDiv1‘, data:myModel1 }); console.log( myViewModel1.age ); </script> </html>
v-for 指令可以綁定數組的數據來渲染一個項目列表
2.02 處理用戶輸入：
v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。
<body> <div id = "kyt3"> <p>{{message}}</p> <input v-model = "message"> </div> <script src = "${pageContext.request.contextPath}/js/vue.min.js"></script> <script type="text/javascript"> var kyt3 = new Vue({ el:‘#kyt3‘, data:{ message:‘大聖！！！‘ } }); </script> </body> </html>
運行結果：
v-for 指令可以綁定數組的數據來渲染一個項目列表：
<body> <div id = "kyt1"> <ol> <li v-for = "todo in todos"> {{todo.text}} </li> </ol> </div> <script src = "${pageContext.request.contextPath}/js/vue.min.js"></script> <script type="text/javascript"> var kyt1 = new Vue({ el:‘#kyt1‘, data:{ todos:[ {text:‘學習JS‘}, {text:‘學習Vue‘}, {text:‘要當CEO‘} ] } }); </script> </body> </html>
運行結果：
在控制臺裏，輸入 kyt1.todos.push({ text: ‘我是老板‘ })，發現列表中添加了一個新項。
學習小總結： 1、拋開手動操作DOM的思維，Vue.js是數據驅動的，你無需手動操作DOM。
2、將DOM和數據綁定起來，DOM將和數據保持同步，
每當變更了數據，DOM也會相應地更新。
3、MVVM模式（Model-View-ViewModel）
ViewModel是如何和View以及Model進行交互的。
model放在data（可能多項）
view放在el（view裏面的{{ }}可能多項，跟model對應）
4、ViewModel是Vue.js的核心，它是一個Vue實例。 Vue實例是作用於某一個HTML元素上的，
這個元素可以是HTML的body元素，
也可以是指定了id的某個元素。
5、所有的元素都是響應式的
vue.js簡單入門