一 Vue官網javascript
https://cn.vuejs.org/v2/guide/css
二 實戰代碼html
1 App.vuevue
// 模板
<template>
<!-- id 值 app表示掛載點 -->
<div id="app">
<!-- 待辦事項功能 -->
<h1>待辦事項功能</h1>
<div>
<input class="item" v-model="inputVaule" />
<!-- 綁定事件標準寫法 -->
<button v-on:click="handleSubmit">待辦事項</button>
<!-- 綁定事件簡化寫法 -->
<button @click="handleSubmit">待辦事項</button>
</div>
<ul>
<!-- 使用組件，經過item和index設置組件屬性，將數據傳遞給子組件，這也是一個在組件上使用v-for的例子 -->
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handDelete"
></todo-item>
</ul>
<!-- 和後端通訊 -->
<h1>和後端通訊</h1>
<div>
<button @click="handleSubmit1">提交</button>
<input v-model="dataInput1" />
<input v-model="list1" />
</div>
<!-- 數據顯示 -->
<h1>數據顯示</h1>
<!-- 第一種方式顯示content -->
<div v-html="content"></div>
<!-- 第二種方式顯示content -->
<div v-text="content"></div>
<!-- 第三種方式顯示content：插值表達式 -->
<div>{{content}}</div>
<!-- 使用 JavaScript 表達式 -->
<div>{{ message.split('').reverse().join('') }}</div>
<!-- 屬性綁定 -->
<h1>屬性綁定</h1>
<!-- 屬性綁定通用寫法 v-bind -->
<div v-bind:title="title">屬性綁定通用寫法</div>
<!-- 屬性綁定簡化寫法 : -->
<div :title="'echo:' + title">屬性綁定簡化寫法</div>
<h1>雙向綁定和單向綁定</h1>
<!--
雙向綁定（v-model）：數據和頁面顯示相互綁定
單向綁定(value)：數據決定頁面的顯示，但頁面決定不了數據的顯示-->
<input v-model="content1" />
<!-- 雙向綁定 -->
<p>{{content1}}</p>
<!-- 單向綁定 -->
<input :value="content2" />
<p>{{content2}}</p>
<!-- 計算屬性和監聽屬性 -->
<h1>計算屬性和監聽屬性</h1>
<div>
姓：
<input v-model="firstname" />
</div>
<div>
名：
<input v-model="lastname" />
</div>
<div>{{fullname}}</div>
<div>{{count}}</div>
<!-- 條件渲染 -->
<!-- 通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。
所以，若是須要很是頻繁地切換，則使用 v-show 較好；
若是在運行時條件不多改變，則使用 v-if 較好。-->
<h1>條件渲染</h1>
<!-- v-if是移除組件 -->
<div v-if="show">移除dom組件</div>
<!-- v-show是隱藏組件，推薦用v-show，能夠提升性能 -->
<div v-show="show">經過css隱藏dom組件</div>
<button @click="hanleClick">toggle</button>
<!-- v-if 和v-else組合用法 -->
<div v-if="awesome">Vue is awesome!</div>
<div v-else>Oh no 😢</div>
<!-- 在 <template> 元素上使用 v-if 條件渲染分組F -->
<template v-if="ok">
<h5>Title</h5>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<!-- v-else-if用法 -->
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<!-- 不用 key 管理可複用的元素 -->
logginType:
<input v-model="loginType" />
<br />
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" />
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" />
</template>
<!-- 用 key 管理可複用的元素 -->
<br />
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input" />
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input" />
</template>
<!-- 列表循環，v-for的使用 -->
<h1>列表循環，v-for的使用</h1>
<ul>
<!-- 數據循環展現用v-for，注意:循環中key不能重複，能夠提示渲染性能 -->
<li v-for="(item,idx) of list3" :key="idx">item{{idx}}:{{item}}</li>
</ul>
<ul id="example-1">
<li v-for="item in items" :key="item.message">{{ item.message }}</li>
</ul>
<!-- 在 v-for 裏使用對象,用 v-for 來遍歷一個對象的 property -->
<!-- 三個參數分別爲鍵值，鍵名，索引 -->
<ul id="v-for-object" class="demo">
<div v-for="(value, name, index) in object" :key="index">{{ index }}. {{ name }}: {{ value }}</div>
</ul>
<!-- 顯示過濾/排序後的結果 -->
<li v-for="n in evenNumbers" :key="n">{{ n }}</li>
<!-- 嵌套 v-for 循環 -->
<ul v-for="(set,index) in sets" :key="index">
<li v-for="(n,index1) in even(set)" :key="index1">{{ n }}</li>
</ul>
<!-- 在 v-for 裏使用值範圍 -->
<div>
<span v-for="n in 10" :key="n">{{ n }}</span>
</div>
<!-- 在 <template> 上使用 v-for -->
<ul>
<template v-for="item in items1">{{ item }}</template>
</ul>
<!-- 監聽事件 -->
<h1>監聽事件</h1>
<!-- v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
-->
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<div id="example-2">
<!-- `greet` 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<!-- 內聯處理器中的方法 -->
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<!-- 在內聯語句處理器中訪問原始的 DOM 事件。能夠用特殊變量 $event 把它傳入方法
-->
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis"></div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat"></div>
<!-- 表單輸入綁定 -->
<h1>表單輸入綁定</h1>
<!-- 文本 -->
<input v-model="message3" placeholder="edit me" />
<p>Message is: {{ message3 }}</p>
<!-- 多行文本 -->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message4 }}</p>
<br />
<textarea v-model="message4" placeholder="add multiple lines"></textarea>
<br />
<!-- 複選框 -->
<!-- 單個複選框，綁定到布爾值 -->
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
<!-- 多個複選框，綁定到同一個數組 -->
<div id="example-3">
<input type="checkbox" id="jack1" value="Jack" v-model="checkedNames" />
<label for="jack1">Jack</label>
<input type="checkbox" id="john1" value="John" v-model="checkedNames" />
<label for="john1">John</label>
<input type="checkbox" id="mike1" value="Mike" v-model="checkedNames" />
<label for="mike1">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
<!-- 單選按鈕 -->
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
<!-- 選擇框 -->
<!-- 單選 -->
<div id="example-5">
<select v-model="selected">
<option disabled value>請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<!-- 多選時，綁定到一個數組 -->
<div id="example-6">
<select v-model="selected1" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br />
<span>Selected: {{ selected1 }}</span>
</div>
<!-- 用 v-for 渲染的動態選項 -->
<br />
<select v-model="selected2">
<option
v-for="(option,index) in options"
:key="index"
v-bind:value="option.value"
>{{ option.text }}</option>
</select>
<span>Selected: {{ selected2 }}</span>
<!-- 值綁定 -->
<!-- 當選中時，`picked` 爲字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 爲 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- 當選中第一個選項時，`selected` 爲字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
</div>
</template>
// 腳本
<script>
import TodoItem from "./components/TodoItem";
import axios from "axios";
export default {
// 註冊子組件組件
components: {
// 用todo-item標籤去使用TodoItem這個組件
"todo-item": TodoItem
},
// 數據部分
data() {
return {
inputVaule: "",
list: [],
message: "how are you",
content: "<h1>hello</h1>",
title: "this is a title",
content1: "this is content1:雙向綁定",
content2: "this is content:單向綁定",
firstname: "",
lastname: "",
count: 0,
show: true,
list1: ["green", "yellow", "red"],
dataInput1: "",
list2: [],
awesome: false,
ok: true,
type: "d",
loginType: "",
items: [{ message: "Foo" }, { message: "Bar" }],
list3: [1, 2, 3],
object: {
title: "How to do lists in Vue",
author: "Jane Doe",
publishedAt: "2016-04-10"
},
numbers: [1, 2, 3, 4, 5],
sets: [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10]
],
items1: ["item", "item1"],
counter: 0,
name: "how are you",
message3: "",
message4: "",
checked: true,
checkedNames: [],
picked: "",
selected: "",
selected1: [],
selected2: "A",
options: [
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" }
]
};
},
// 聲明週期鉤子以屬性的方式進行聲明
// 在實例初始化只有，數據觀測（data obserber）和event/watcher時間配置以前被調用
beforeCreate: function() {
console.log("beforeCreate鉤子");
},
// 在實例建立完成後被當即調用
// 這一步，實例已經完成如下的配置：數據觀察（data obserber）,屬性和方法的運算，watch/event事件回調
// 然而掛載階段還沒開始
created: function() {
// `this` 指向 vm 實例
console.log("create 鉤子變化");
},
// 在掛載開始以前被調用，相關的渲染函數首次被調用
beforeMount: function() {
console.log("beforeMount 鉤子");
},
// e1 被新建立的vm.$e1替換，掛載成功
mounted: function() {
console.log("mounted 鉤子");
},
// 數據更新時調用
beforeUpdate: function() {
console.log("beforeUpdate 鉤子");
},
// 組件DOM已經更新，組件更新完畢
updated: function() {
console.log("updated");
},
// 定義方法的地方
methods: {
// 第一種形式的方法定義
handleSubmit() {
this.list.push(this.inputVaule);
this.inputVaule = "";
},
handDelete(index) {
this.list.splice(index, 1);
},
// 第二種形式的方法定義
hanleClick: function() {
this.show = !this.show;
},
handleSubmit1() {
axios
.get(
"http://localhost:8005/diff/obj/list?pipelineId=1&productFamilyId=1&objectName=1"
)
// then指成功以後的回調
.then(response => {
console.log(response);
console.log(response.data);
this.dataInput1 = response.data.msg;
this.list2 = response.data;
})
.catch(function(error) {
console.log(error);
});
},
even: function(numbers) {
return numbers.filter(function(number) {
return number % 2 === 0;
});
},
greet: function(event) {
// `this` 在方法裏指向當前 Vue 實例
alert("Hello " + this.name + "!");
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName);
}
},
say: function(message) {
alert(message);
},
warn: function(message, event) {
// 如今咱們能夠訪問原生事件對象
if (event) {
event.preventDefault();
}
alert(message);
}
},
// 計算屬性
computed: {
// 依賴屬性發生變化纔會從新計算，當firstname或lastname發送變化時才從新計算fullname
// 方法中變量變化決定了計算屬性的變化
fullname: function() {
return this.firstname + " " + this.lastname;
},
evenNumbers: function() {
return this.numbers.filter(function(number) {
return number % 2 === 0;
});
}
},
// 監聽器，當某個數據發生變化，觸發監聽器函數執行
// 監聽變量的變化，決定了方法的執行
watch: {
// firstname: function(){
// this.count++
// },
// lastname: function(){
// this.count++
// }
// 監聽計算屬性的變化，當fullname發送變化時，觸發函數執行
fullname: function() {
this.count++;
}
}
};
</script>
// 樣式
<style>
</style>
2 TodoItem.vuejava
// 子組件
<template>
<li class="item" @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ["content", "index"],
methods: {
handleDelete() {
this.$emit("delete", this.index);
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item {
color: green;
}
</style>
三 參考ios