學習Vue.js ------ 如何操做View 與 Model

時間 2019-11-11

標籤學習 vue.js vue 如何 view model 欄目 JavaScript 简体版

原文原文鏈接

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
       <div id="abc">
           {{userName}},{{age}} 
       </div>
</body>
   
   <script src="${pageContext.request.contextPath}/js/vue.js"></script>
   <script type="text/javascript">
       var myModel1 = {userName:'張三丰',age:19}; //裝好的JSON格式數據
        var viewmodel = new Vue({ //new 一個vue的對象添加el，data兩個參數，el對應的是匹配view要輸出位置元素的id或者是其餘選擇器，data放的是json數據
            el:'#abc',
            data:myModel1
        })

       /*
       一、拋開手動操做DOM的思惟，Vue.js是數據驅動的，你無需手動操做DOM。

       二、將DOM和數據綁定起來，DOM將和數據保持同步，
       每當變動了數據，DOM也會相應地更新。

       三、MVVM模式（Model-View-ViewModel）
       ViewModel是如何和View以及Model進行交互的。
       model放在data（可能多項）
       view放在el（view裏面的{{ }}可能多項，跟model對應）

       四、ViewModel是Vue.js的核心，它是一個Vue實例。
             Vue實例是做用於某一個HTML元素上的，
            這個元素能夠是HTML的body元素，
           也能夠是指定了id的某個元素。

       五、全部的元素都是響應式的
       */
   </script>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。