.parse_args() 用params：｛｝ 請求
request.get_json()直接用 ｛｝ 請求
#已經(jīng)學(xué)習(xí)的指令
# v-on:click 事件綁定v-on:可以替換成@
<div v-on:click="handleClick">{{content}}</div>
#v-model 雙向?qū)傩越壎? <input v-model="firstname"/>
#v-bind：單向數(shù)據(jù)綁定
<div v-bind:title="title"> hello word </div>
#v-if
#v-show
#v-for 數(shù)據(jù)循環(huán)展示
<ul>
<li v-for="item of list" :key="item">{{item}}</li>
</ul>
計算屬性與偵聽器
<div id="root">
姓: <input v-model="firstname"/>
名: <input v-model="lastname"/>
<div>{{fullname}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstname:'',
lastname:'',
count: 0
},
computed: { //計算屬性
fullname: function() {
return this.firstname +' ' + this.lastname
}
},
watch:{ // 偵聽器
fullname: function() {
this.count++
},
}
}
})
</script>
v-model 雙向?qū)傩越壎?/p>
todolisht
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todolist</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="root">
<div>
<input v-model='inputvalue'/>
<button @click="handleSubmit">submit</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputvalue: '',
list :[]
},
methods: {
handleSubmit: function() {
this.list.push(this.inputvalue)
this.inputvalue = ""
}
}
})
</script>
</body>
</html>
組件的拆分
<ul>
<todoitem v-for="(item, index) of list"
:key='index'
:content="item">
</todoitem>
</ul>
Vue.component('todoitem', {
props: ['content'], // 從外部接受名content 接受的屬性
template: '<li>{{content}}</li>'
}) //全局組件
//var Todoitem = {
// template: '<li>item</li>'
//} //局部組件
new Vue({
el: "#root",
//components: { // 局部組件注冊
// 'todoitem': "Todoitem "
//},
每一個組件都是一個一個vue實例
子組件和父組件傳值
<body>
<div id="root">
<div>
<input v-model='inputvalue'/>
<button @click="handleSubmit">submit</button>
</div>
<ul>
<todoitem v-for="(item, index) of list"
:key='index'
:content="item"
:index='index'
@delete="handledelete">
</todoitem>
</ul>
</div>
<script>
Vue.component('todoitem', {
props: ['content', 'index'], // 從外部接受名content 接受的屬性
template: '<li @click="handleclick">{{content}}</li>',
methods: {
handleclick: function() {
//alert('deleted') // 證明一個組件也是一個Vue實例
//自組件 和父通信
this.$emit('delete', this.index)
}
}
}) //全局組件
//var Todoitem = {
// template: '<li>item</li>'
//} //局部組件
new Vue({ // 根實例 如果沒有模版， 就會吧掛載點html 當(dāng)作模版
el: "#root",
//components: { // 局部組件注冊
// 'todoitem': "Todoitem "
//},
data: {
inputvalue: '',
list :[]
},
methods: {
handleSubmit: function() {
this.list.push(this.inputvalue)
this.inputvalue = ""
},
handledelete: function(index) {
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
vue-cli
安裝
vue init webpack my-project
單頁面應(yīng)用和多頁面應(yīng)用區(qū)別
多頁面： 優(yōu)點：首屏速度快， SEO（搜索 引擎優(yōu)化） 效果好
缺點： 頁面跳轉(zhuǎn)速度慢
單頁面： 優(yōu)點：頁面切換快，缺點：首屏幕時間慢， SEO差
MVP 設(shè)計模式 和 MVVM設(shè)計模式
https://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
https://blog.csdn.net/victoryzn/article/details/78392128
組件之間的傳值
父組件 向子組件傳值
// 父組件
<todo v-bind:content="item" v-for="item in list">
</todo>
// 子組件
<script>
// 全局組件
Vue.component("TodoItem", {
props：['content']
template: "<li>{{content}}</li>"
})
// 局部組件 （ 需要注冊在示例中）
var ToDoItem = {
props：['content']
template: "<li>{{content}}</li>"
}
</script>
自組件向父組件傳值
// 子組件
template: "<li @click="handleCLick>{{content}}</li>",
methods: {
handleClick () {
this.$emit("delete", this.index) // 對外發(fā)出事件
}
}
Vue 生命周期鉤子
image.png
生命周期函數(shù)就是Vue示例在某一個時間點會自動執(zhí)行的函數(shù)
Vue 模版語法
<div id="app">{{name}}
<div v-text="name"></div>
<div v-html="name"></div>
</div>
Vue 計算屬性，方法， 偵聽器
計算屬性
computed: { // 計算屬性
fullName: function() {
return this.firstName + " " + this.lastName
}
},
計算使用的參數(shù)沒有發(fā)生變化時， 計算屬性的結(jié)果不會重新計算，而是讀取緩存。 相對比methods更加節(jié)約資源
方法
{{fullname() }}
...
methods: {
fullname: function () {
return this.firstName + " " + this.lastName
}
}
偵聽器
watch: {
firstName: function () {
this.fullname = this.firstName +?。ⅲⅰ。玹his.lastName
},
lastName: function () {
this.fullname = this.firstName + ＂＂?。玹his.lastName
}
}
watch 和 computed 都可以使用緩存， 但是computed 相對簡潔。
計算屬性 的 setter 和 getter
computed: { // 計算屬性
fullName: {
get: function() {
return this.firstName + " " +this.lastName
},
set: function(value) {
var arr = value.split("")
this.firstName = arr[0]
this.lastName= arr[1]
}
}
},
Vue 與樣式之間的綁定
class 的對象綁定
通過:class 對象綁定， 設(shè)置類activated
<div @click="handleDivClick" :class="{activated: isActivated}">{{fullName}}</div>
class 的數(shù)組綁定
<div @click="handleDivClick" :class="[activated]">{{fullName}}</div>
...
data: {
activated: ""
}
methods: {
handleDivClick () {
this.activated = this.activated === "activated" ? "" : "activated"
}
}
對象的樣式綁定
- 也可與寫成和上面一樣的數(shù)組， 可掛載多個對象
<div @click="handleDivClick" :style="styleObj">{{fullName}}</div>
data: {
styleObj: {
color: "black"
}
}
