參考視訊教程資料:
混合開發入門 Vue結合AndroidiOS開發仿京東項目App : <http://www.notescloud.top/goods/detail/1194> ;
深入Vue3+TypeScript技術棧-coderwhy大神新課 : <http://www.notescloud.top/goods/detail/1197>;
Vue.js 教程
Vue.js（讀音 /vjuː/, 類似于 view） 是一套建構使用者界面的漸進式架構。
Vue 隻關注視圖層， 采用自底向上增量開發的設計。
Vue 的目标是通過盡可能簡單的 API 實作響應的資料綁定群組合的視圖元件。
<br />
MVVM模式
下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行互動的。
ViewModel是Vue.js的核心，它是一個Vue執行個體。Vue執行個體是作用于某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
當建立了ViewModel後，雙向綁定是如何達成的呢？
首先，我們将上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實作雙向綁定的關鍵。
從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的資料；
從Model側看，當我們更新Model中的資料時，Data Bindings工具會幫我們更新頁面中的DOM元素。
第一個執行個體:
嘗試 Vue.js 最簡單的方法是使用 JSFiddle 上的 Hello World 例子 。你可以在浏覽器新标簽頁中打開它，跟着例子學習一些基礎用法。或者你也可以 建立一個
.html
檔案 ，然後通過如下方式引入 Vue
<!-- 開發環境版本，包含了用幫助的指令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生産環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
:
Vue 2.0 Hello World
\<!DOCTYPE html\>
\<html\>
\<head\>
\<meta charset="utf-8"\>
\<title\>Vue 測試執行個體 - 菜鳥教程(runoob.com)\</title\>
\<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"\>\</script\>;
\</head\>
\<body\>
\<div id="app"\>
\<p\>{{ message }}\</p\>
\</div\>
\<script\>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
\</script\>
\</body\>
\</html\>
Hello Vue.js!
我們已經成功建立了第一個 Vue 應用！看起來這跟渲染一個字元串模闆非常類似，但是 Vue 在背後做了大量工作。現在資料和 DOM 已經被建立了關聯，所有東西都是響應式的。我們要怎麼确認呢？打開你的浏覽器的 JavaScript 控制台 (就在這個頁面打開)，并修改
app.message
的值，你将看到上例相應地更新。
除了文本插值，我們還可以像這樣來綁定元素特性：
<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒鐘檢視此處動态綁定的提示資訊！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date().toLocaleString()
}
})
滑鼠懸停幾秒鐘檢視此處動态綁定的提示資訊！
這裡我們遇到了一點新東西。你看到的
v-bind
特性被稱為指令。指令帶有字首
v-
，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡，該指令的意思是："将這個元素節點的
title
特性和 Vue 執行個體的
message
屬性保持一緻"。
如果你再次打開浏覽器的 JavaScript 控制台，輸入
app2.message = '新消息'
，就會再一次看到這個綁定了
title
特性的 HTML 已經進行了更新。
條件：v-if
控制切換一個元素是否顯示也相當簡單：
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
現在你看到我了
繼續在控制台輸入
app3.seen = false
，你會發現之前顯示的消息消失了。
這個例子示範了我們不僅可以把資料綁定到 DOM 文本或特性，還可以綁定到 DOM 結構。此外，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果。
循環：v-for
還有其它很多指令，每個都有特殊的功能。例如，
v-for
指令可以綁定數組的資料來渲染一個項目清單：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛項目' }
]
}
})
- 學習 JavaScript
- 學習 Vue
- 整個牛項目
在控制台裡，輸入
app4.todos.push({ text: '新項目' })
，你會發現清單最後添加了一個新項目。
處理使用者輸入
為了讓使用者和你的應用進行互動，我們可以用
v-on
指令添加一個事件監聽器，通過它調用在 Vue 執行個體中定義的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉消息(将展示的資料倒叙展示)</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
逆轉消息
注意在
reverseMessage
方法中，我們更新了應用的狀态，但沒有觸碰 DOM------所有的 DOM 操作都由 Vue 來處理，你編寫的代碼隻需要關注邏輯層面即可。
v-modle指令：
Vue 還提供了
v-model
指令，它能輕松實作表單輸入和應用狀态之間的雙向綁定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!
測試案例:Vue 2.0
\<meta charset="UTF-8"\>
\<title\>Insert title here\</title\>
\<script type="text/javascript" src="vue.2.3.0.js"\>\</script\>
\<!-- 展示資料的文法:{{}} --\>
你好,{{message}}
\<div id="app2"\>
\<img :src="src1"\>
\<!-- 通過v-for周遊資料集合 --\>
\<ul\>
\<li v-for="s in arrays"\>{{s}}\</li\>
\</ul\>
\<table\>
\<!-- 周遊對象資料 --\>
\<tr v-for="(u,i) in users"\>
\<!-- 展示下标 --\>
\<td\>{{i}}\</td\>
\<!-- 通過屬性名擷取屬性值 --\>
\<td\>{{u.name}}\</td\>
\<td\>{{u.age}}\</td\>
\</tr\>
\</table\>
\<div id = "app3"\>
\<!-- 點選按鈕對應的函數在Vue對象中methods中聲明,直接使用屬性名稱即可 --\>
\<button @click="cc()" \>aaa\</button\>
\<button @dblclick="dd()" \>aaa\</button\>
\<div id = "app4"\>
\<div v-if="true"\>顯示\</div\>
\<div v-if="false"\>隐藏\</div\>
\<div v-if="1==1"\>條件語句\</div\>
\<div v-else="1"\>隐藏\</div\>
\<!-- v-show屬性值為false就是将屬性值修改為style="display: none; --\>
\<div v-show="false"\>展示\</div\>
\<div v-show="true"\>隐藏\</div\>
\<!-- 複選框 --\>
\<div id="app5"\>
\<!-- v-model的屬性值在data中定義,在全局可擷取input框中的資料 --\>
\<input type="text" v-model="ss"/\>
\<hr/\>
\<input type="checkbox" value="足球" v-model="cktest"\>足球
\<input type="checkbox" value="籃球" v-model="cktest"\>籃球
\<input type="checkbox" value="乒乓球" v-model="cktest"\>乒乓球
{{cktest}}
\<hr\>
\<input type="radio" value="男" v-model="gender"\>男
\<input type="radio" value="女" v-model="gender"\>女
{{gender}}
let app=new Vue({
el:"#app",
data:{
message:'世界',
let app2 =new Vue({
el:'#app2',
src1:'1.png',
arrays:[1,2,3,41,1],
users:[
{name:"張三",age:18},
{name:"李四",age:18},
{name:"王五",age:18}
]
var app3 = new Vue({
el:'#app3',
methods:{
cc:function(){
alert('cc');
},
dd:function(){
alert('dd');
let app4 = new Vue({
el:'#app4',
let app5 = new Vue({
el:"#app5",
ss:'',
//給多選框進行預設指派時,必須為一個數組,否則資料會出錯
cktest:[],
gender:"男",//預設值
\</html\>
\<!--下拉框--\>
\<div id="rrapp"\>
\<label for="creator"\>戶口所在地:\</label\>
\<select v-model="selecteda" class="form-control"\>
\<option value=""\>請選擇\</option\>
\<option v-for="home in homes" :value="home.value"\>{{home.text}}\</option\>
\</select\>
\<label for="creator"\>戶别:\</label\>
\<select v-model="selectedb" class="form-control"\>
\<option v-for="hegoto in hegotos" :value="hegoto.duty"\>{{hegoto.name}}\</option\>
\<label for="creator"\>人員類型:\</label\>
\<select v-model="selectedc" class="form-control"\>
\<option v-for="genres in genress" :value="genres.types"\>{{genres.graduates}}\</option\>
\<label for="creator"\>人員職務:\</label\>
\<select v-model="selectedd" class="form-control"\>
\<option v-for="position in positions" :value="position.labor"\>{{position.work}}\</option\>
\<button style="margin-top: 2px;margin-left:15px" type="button" class="btn btn-primary abbBtn btn-sm" @click="queryByName" \>\<i class="fa fa-search"\>\</i\>\ \ 查詢\</button\>
\</form\>
\<table id="jqGrid"\>\</table\>
\<div id="jqGridPager"\>\</div\>
\</div\>
\<!--展示在下拉框中的屬性值--\>
var vm = new Vue({
el:'#rrapp',
data:{
baseRoleSysList:{},
selected1:'-1',
exapOrgs:{},
homes:[{text:'北京',value:1},{text:'非北京',value:2}],
hegotos:[{name:'城鎮戶口',duty:1},
{name:'農業戶口',duty:2},
{name:'非農業家庭戶口',duty:3},
{name:'城鎮家庭戶口',duty:4},
{name:'居民戶口',duty:5},
{name:'家庭戶口',duty:6},
{name:'居民家庭戶口',duty:7},
{name:'農業家庭戶口',duty:8},
{name:'集體戶口',duty:9}],
genress:[{graduates:'應屆生',types:1},{graduates:'非應屆生',types:2}],
positions:[{work:'員工',labor:1},{work:'經理',labor:2}],
selected:'',
selecteda:'',
selectedb:'',
selectedc:'',
selectedd:'',
},
methods: {
queryByName: function (event) {
reloadGrid();
}
});
methods在按鈕上綁定函數reloadGrid(),對應的函數如下:vm.selecteda:vm是個Vue對象,去對象中的屬性值,直接屬性,在對象中去屬性直接this即可,selecteda綁定在下拉框v-modle屬性上面(雙向綁定),使用時一定要在Vue對象中聲明.
function reloadGrid(){
//擷取下拉框中的value資料
var householdArea= vm.selecteda;
var householdType= vm.selectedb;
var personType= vm.selectedc;
var postType= vm.selectedd;
$("#jqGrid").jqGrid('setGridParam', {
page:1,
postData : {
'householdArea':householdArea,
'householdType':householdType,
'personType':personType,
'postType':postType,
}).trigger("reloadGrid");
}
總結
本文簡單介紹了Vue.js的MVVM模型和它的雙向綁定機制，然後以一個Hello World示例開始了我們的Vue.js之旅，接着我們了解了幾個比較常用的指令，最後根據這些知識我們建構了一個簡單的示例。
![kylin jmx監控 端口配置[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)