.parse_args() 用params：｛｝ 请求
request.get_json()直接用 ｛｝ 请求
#已经学习的指令
# v-on:click 事件绑定v-on:可以替换成@
<div v-on:click="handleClick">{{content}}</div>
#v-model 双向属性绑定
<input v-model="firstname"/>
#v-bind：单向数据绑定
<div v-bind:title="title"> hello word </div>
#v-if
#v-show
#v-for 数据循环展示
<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 双向属性绑定
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 当作模版
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
单页面应用和多页面应用区别
多页面： 优点：首屏速度快， SEO（搜索 引擎优化） 效果好
缺点： 页面跳转速度慢
单页面： 优点：页面切换快，缺点：首屏幕时间慢， SEO差
MVP 设计模式 和 MVVM设计模式
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) // 对外发出事件
}
}
Vue 生命周期钩子
image.png
生命周期函数就是Vue示例在某一个时间点会自动执行的函数
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
}
},
计算使用的参数没有发生变化时， 计算属性的结果不会重新计算，而是读取缓存。 相对比methods更加节约资源
方法
{{fullname() }}
...
methods: {
fullname: function () {
return this.firstName + " " + this.lastName
}
}
侦听器
watch: {
firstName: function () {
this.fullname = this.firstName + ＂＂ ＋this.lastName
},
lastName: function () {
this.fullname = this.firstName + ＂＂ ＋this.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 对象绑定， 设置类activated
<div @click="handleDivClick" :class="{activated: isActivated}">{{fullName}}</div>
class 的数组绑定
<div @click="handleDivClick" :class="[activated]">{{fullName}}</div>
...
data: {
activated: ""
}
methods: {
handleDivClick () {
this.activated = this.activated === "activated" ? "" : "activated"
}
}
对象的样式绑定
- 也可与写成和上面一样的数组， 可挂载多个对象
<div @click="handleDivClick" :style="styleObj">{{fullName}}</div>
data: {
styleObj: {
color: "black"
}
}
