表单控制
1.checkbox--单选--布尔值--如是否记住密码
checkbox--多选--数组--如爱好
redio--单选--字符串--如姓别
注：v-model--双向数据绑定
value--数据传入后端
2.代码：
<body>
<div id="app">
用户名：<p><input type="text" v-model="name" value="name"></p>
密码：<p><input type="password" v-model="password" value="password"></p>
是否记住密码：<p><input type="checkbox" v-model="halderdCheckbox"></p>
{{ halderdCheckbox }}
<input type="checkbox" v-model="hobby" value="🏀">🏀
<input type="checkbox" v-model="hobby" value="⚽">⚽
<input type="checkbox" v-model="hobby" value="🏸">🏸
<input type="checkbox" v-model="hobby" value="乒乓球">乒乓球
{{ hobby }}
<input type="radio" v-model="gender" value="男">男
<input type="radio" v-model="gender" value="女">女
<input type="radio" v-model="gender" value="未知">未知
{{ gender }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: '',
password: '',
halderdCheckbox:false,
hobby:[],
gender:''
},
})
</script>
购物车案例
1.python中只有基于迭代的循环 没有基于索引的循环
2.js、java、go中有基于迭代和索引两种
2.1 js中的for循环
基于索引的循环：for(i=0;i<goodCheckbox.length;i++)
基于迭代的循环：for(i in goodCheckbox)
es6语法中的循环：
for(i of goodCheckbox)
数组内置方法.forEach()
jquery $.each 循环
3.代码
<body>
<div id="app">
<h1 class="text-center">购物车</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="bs-example" data-example-id="striped-table">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th><input type="checkbox" v-model="goodsCheckbox" value="goodsCheckbox"
@change="halderdChangeAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="good of goodList">
<th>{{ good.id }}</th>
<td>{{ good.name }}</td>
<td>{{ good.price }}</td>
<td><span class="btn btn-group-xs" @click="goodClick(good)">-</span>{{ good.num }} <span class="btn btn-group-xs" @click="good.num++">+</span></td>
<td><input type="checkbox" v-model="goodCheckbox" :value="good" @change="handledChangeOne">
</td>
</tr>
</tbody>
</table>
<hr>
选择的商品：{{ goodCheckbox }}
<br>
价格：{{ goodprice() }}
</div>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
goodList: [
{id: 1, name: '📷', price: 9999, num: 3},
{id: 2, name: '滑板', price: 4444, num: 1},
{id: 3, name: '投影仪', price: 555, num: 3},
{id: 4, name: '平板', price: 4444, num: 2},
{id: 5, name: '📱', price: 9999, num: 1},
],
goodCheckbox: [],
goodsCheckbox: false,
},
methods: {
goodprice() {
total = 0
for (good of this.goodCheckbox) {
total += good.price * good.num
}
return total
},
halderdChangeAll() {
if(this.goodsCheckbox){
this.goodCheckbox = this.goodList
}else{
this.goodCheckbox=[]
}
},
handledChangeOne() {
this.goodsCheckbox=this.goodCheckbox.length==this.goodList.length
},
goodClick(good){
if(good.num>1){
good.num--
}else{
alert('不能再减了')
}
}
}
})
</script>
v-model进阶
1.lazy：等待input框的数据绑定时区焦点之后再变化
2.number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
3.trim：去除首位的空格
4.代码：
<body>
<div id="app">
<input type="text" v-model.lazy="name" value="name">---->{{ name }}
<input type="text" v-model.number="name" value="name">---->{{ name }}
<input type="text" v-model.trim="name" value="name">---->{{ name }}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
name:''
}
})
</script>
vue生命周期
1. var vm=new Vue实例()
-1 实例创建，数据放到实例中
-2 挂在模板：el---》div
-3 改页面，改变量，都会相互影响 update
-4 销毁实例
2. 4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）
beforeCreate 创建Vue实例之前调用，data，el都没有
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
beforeMount 渲染DOM之前调用 ，data有了，el没有
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
3.代码：
3.1 代码演示
<body>
<div id="app">
<h1>vue生命周期</h1>
{{ name }}
</div>
</body>
<script>
var vm=new Vue({
el: '#app',
data: {
name: 'lili'
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
},
})
</script>
3.2 创建组件显示
与后端交互
1.jquery的ajax与后端交互
代码：
视图层：
class UserInfo(APIView):
def get(self, request):
user_info = User.objects.all()
res = UserSerializer(instance=user_info, many=True)
return Response(res.data, headers={'Access-Control-Allow-Origin': '*'})
模型层：
<body>
<div id="app">
<h1>jquery的ajax与后端交互</h1>
<button @click="halderClick">获取数据</button>
<p>用户名:{{ name }}</p>
<p>密码:{{ password }}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: '',
password: ''
},
methods:{
halderClick(){
$.ajax({
url:'http://127.0.0.1:8000/getinfo/',
type:'get',
success: data => {
console.log(data)
this.name=data.name
this.password=data.password
}
})
}
}
})
</script>
2.js原生fetch与后端交互
代码：
<script>
new Vue({
el: '#app',
data: {
name: '',
password: ''
},
methods:{
halderClick(){
fetch('http://127.0.0.1:8000/getinfo/').then(res=>res.json()).then(res=>{
console.log(res)
this.name=res.name
this.password=res.password
})
}
}
})
</script>
3.第三方axios与后端交互
代码：
<script>
new Vue({
el: '#app',
data: {
name: '',
password: ''
},
methods:{
halderClick(){
axios('http://127.0.0.1:8000/getinfo/').then(res=>{
console.log(res)
this.name=res.data.name
this.password=res.data.password
})
}
}
})
</script>
posted on
浙公网安备 33010602011771号