vue.js（二）补充-摩杜云开发者社区

示例

表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div class="app">
    <h3>表单演示</h3>
    <p>用户名: <input type="text" v-model="username"></p>
    <p>密码: <input type="password" v-model="password"></p>

    <p><input type="checkbox" v-model="isCheck"></p>
    <p>
        <input type="radio" v-model="gender" value="1">男
        <input type="radio" v-model="gender" value="2">女
        <input type="radio" v-model="gender" value="3">阴阳？？？
    </p>
    <p>爱好(可多选):</p>
    <p>
        <input type="checkbox" v-model="hobby" value="跳舞">跳舞
        <input type="checkbox" v-model="hobby" value="篮球">篮球
        <input type="checkbox" v-model="hobby" value="足球">足球
    </p>
    <hr>

    <input type="submit" value="提交吧"@click="handleSubmit">

</div>
</body>

<script>
    var vm = new Vue({
        el: '.app',
        data: {
            username: '',
            password: '',
            isCheck: false,
            gender: '',
            hobby: [],
        },
        methods: {
            handleSubmit(){
                console.log(this.username)
                console.log(this.password)
                console.log(this.isCheck)
                console.log(this.gender)
                console.log(this.hobby)
            }
        }
    })
</script>
</html>

购物车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>

<body>
<div class="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div style="margin-top: 30px">
                    <h1>购物车案例</h1>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名字</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th><input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td><button @click="handleJian(good)">-</button>{{good.count}}<button @click="good.count++">+</button></td>
                            <td><input type="checkbox" v-model="buyGoods" :value="good" @change="handleCheckOne"></td>
                        </tr>
                        </tbody>
                    </table>
                    <hr>
                    选中的商品:{{buyGoods}}
                    <hr>
                    总价格是：{{getPrice()}}
                </div>


            </div>

        </div>

    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            goodList: [
                {id: '1', name: '小汽车', price: 150000, count: 2},
                {id: '2', name: '鸡蛋', price: 2, count: 1},
                {id: '3', name: '饼干', price: 10, count: 6},
                {id: '4', name: '钢笔', price: 15, count: 5},
                {id: '5', name: '脸盆', price: 30, count: 3},
            ],
            buyGoods:[],
            checkAll:false,
        },
        methods:{
            getPrice(){
                var total=0
                // 方式二：es6 的 of 循环
                for (item of this.buyGoods){
                    // console.log(item)
                    total+=item.price*item.count
                }
                return total
            },
            handleCheckAll(){
                if(this.checkAll){
                    // 用户全选了，只需要把 buyGoods的值变为goodList
                    this.buyGoods=this.goodList
                }else {
                    this.buyGoods=[]
                }
            },
            handleCheckOne(){
                // 判断buyGoods长度，是否等于goodList，如果等于说明用户全选了，把checkAll设置为true
                // 否则设置为false
                // if(this.buyGoods.length==this.goodList.length){
                //     // 说明用户通过单选，选全了
                //     this.checkAll=true
                // }else {
                //     this.checkAll=false
                // }
                // 简写成
                this.checkAll=(this.buyGoods.length==this.goodList.length)
            },
            handleJian(item){
                if(item.count<=1){
                    alert('太少了，受不了了')
                }else {
                    item.count--
                }
            }
        }


    })

</script>
</html>

父传子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>通过自定义事件，实现子传父</h1>
    <h3>父组件中收到子组件传递对值为:{{name}}</h3>
    <hr>
    <navbar @myevent="handleReceive"></navbar>
    <hr>

</div>

</body>
<script>
    Vue.component('navbar', {
        template: `
          <div>

          <input type="text" v-model="iname">---》{{ iname }}
          <br>
          <button @click="handleClick">点我吧iname传递到父组件中</button>

          </div>`,
        data() {
            return {
                iname: ''
            }
        },
        methods: {
            handleClick() {
                // 触发自定义事件的执行，并且传入当前组件中的iname
                this.$emit('myevent', this.iname)
                // alert(this.iname)
            }
        }
    })

    var vm = new Vue({
        el: '.app',
        data: {
            name: '',
        },
        methods: {
            handleReceive(iname) {
                this.name = iname
            }
        }


    })

  //子组件点击按钮=>子组件执行函数this.$emit('自定义事件名字') =》注册在组件上的【自定义事件】对应的函数执行
</script>
</html>

搞项目

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g @vue/cli


vue create xxx

# 以后组件化开发，就是写一个个的组件：页面组件，小组件

# App.vue :根组件

# 以后就是写组件，组件就是  xx.vue
## 第一部分
<template>
  <div id="app">  # 组件必须套在一个标签内部，之前咱们用反引号写的html内容
  </div>
</template>

## 第二部分：
<script>
export default {
  # 生命周期钩子
  name: 'App',
  data() {
    return {
      name: 'lqz'
    }
  },
  methods: {
    handleClick() {
      this.name = '彭于晏'
    }

  }
}
</script>

## 第三部分：这里面写样式
<style>
h1 {
  background-color: red;
}
</style>




# 使用步骤

##1  以后，只要创建组件  HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    x的值是：{{x}},y的值是：{{y}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['msg'],  # 父传子，自定义属性，接受
  data(){
    return {
      x:10,
      y:20
    }
  }
}
</script>



## 2 在根组件App.vue 中使用这个组件
<template>
  <div id="app">
    <h1>我是h1</h1>
    {{ name }}
    <br>
    <button @click="handleClick">点我名字变化</button>
    <hr>
    <HelloWorld :msg="msg"></HelloWorld>  # 自定义属性实现父传子
  </div>
</template>

<style>
h1 {
  background-color: red;
}
</style>

<script>
// 把HelloWorld组件导入
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: 'App',
  data() {
    return {
      name: 'qwe123',
      msg:'你好啊'
    }
  },
  methods: {
    handleClick() {
      this.name = '彭于晏'
    }

  },
  components:{ # 注册局部组件
    HelloWorld
  }
}
</script>

效果：

vue.js（二）补充_html

axios传参：

get：

npm install -S axios

app.vue中导入：
import axios from 'axios'


自定义一个handleSend
  axios.get('http://127.0.0.1:8000/user/').then(res=>{
        console.log(res)
      })

后端：

这里用drf，django:

pip install django==3.2

pip install django-rest-framework==0.1.0

settings.py

REST_FRAMEWORK = {
    "UNAUTHENTICATED_USER": None,
    }

views.py

from rest_framework.views import APIView
from rest_framework.response import Response

class UserView(APIView):

    def get(self, request):
    #添加一个响应头，解决跨域
        return Response("OKKKKK", headers={'Access-Control-Allow-Origin': '*'})

vue.js（二）补充_ios_02

效果：

vue.js（二）补充_django_03

post：

解决跨域：

python:

# 1  django中使用django-cors-headers，解决跨域
# 2 安装 pip3 install django-cors-headers
# 3 在app的注册中加入
INSTALLED_APPS = (
	...
	'corsheaders',
	...
)
# 4 在中间件中加入
MIDDLEWARE = [ 
	...
	'corsheaders.middleware.CorsMiddleware',
	...
]

# 5 配置文件中加入，我这里用的是django=3.2。可能存在版本差异
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = '*'

CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
)



views.py
    def post(self, request):
        username = request.data.get('username')
        password = request.data.get('password')
        if username == 'admin' and password == 'qwe123':
            return Response({'code': 100, 'msg': 'succeed'})
        return Response({'code': 200, 'msg': 'failed'})

效果：

vue.js（二）补充_html_04

拓展：

当然你要可以自定义请求头：
axios.post('http://127.0.0.1:8000/user/',
          {
            username: this.username,
            password: this.password
          },
          {
            headers: {token: 'asdfasdfasd'}
          }
          
  
  python	
  修改settings.py