Vue——登录小案例、scoped、ref属性、props其他、混入mixin、插件、Element-ui-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue——登录小案例、scoped、ref属性、props其他、混入mixin、插件、Element-ui。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解析Vue项目

# 1 为什么浏览器中访问某个地址，会显示某个页面组件
	根组件：APP.vue 必须是
    	<template>
          <div id="app">
            <router-view></router-view>
          </div>
    	</template>
    1 配置路由
    	router--->index.js--->const routes =[
            {
                path: '/xxx',
                name: 'xxx',
                component: xxx
            },
        ]
    2 放心大胆的写页面组件 src--->view文件夹
   
# 在页面组件中使用小组件
	1 写一个小组件，我们写了个Child.vue
    2 在父组件中，导入组件
    	@ 代指src路径
        import Child from '@/components/Child';
    3 父组件中，注册组件
    	components：{
            Child
        }
    4 父组件中使用组件
    	<Child :msg="msg" @myevent="handleEvent"></Child>
    5 自定义属性，自定义事件，插槽，跟之前一模一样

文章来源地址https://www.toymoban.com/news/detail-475930.html

登录小案例

# 1 新建一个页面组件：LoginView.vue
# 2 前端访问/login这个页面组件
# 3 在LoginView.vue写html，和js，axios
	安装 axios
    cnpm install -S axios # 把安装的axios放到package.json中
# 4 写ajax，像后端发送请求，给按钮一个事件
	#安装axios，导入axios
    import axios from 'axios'
    '''点击事件发送axios'''
    handleSubmit() {
      axios.post('http://127.0.0.1:8000/login/', {
        name:this.name,
        password:this.password
      })
          .then( response=> {
            if (response.data.code ===100){
              location.href = 'http://www.baidu.com'
            }else {
             alert(response.data.msg)
            }
          })
    }
# 4 写个后端的登录接口，处理好跨域问题
	from rest_framework.views import APIView
    class LoginView(APIView):
        def post(self,request):
            res = json.loads(request.body)
            name = res.get('name')
            password = res.get('password')
            print(name,password)
            if name == 'xxx' and password == '123':
                return Response({'code':100,'msg':'登录成功'})
            else:
                return Response({'code':101,'msg':'用户名密码错误'})
####跨域问题####
1 安装
    pip3.8 install django-cors-headers
2 注册app
    INSTALLED_APPS = (
       ...
       'corsheaders',
       ...
    )
3 配置中间件
    MIDDLEWARE = [  
       ...
        'corsheaders.middleware.CorsMiddleware',
       ...
   ]
4 配置文件中加入：setting下面添加下面的配置
    CORS_ORIGIN_ALLOW_ALL = True
    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',
        'token'
    )

scoped

# 新建的组件  加了scoped，表示样式只在当前组件生效，如果不加，子组件都会使用这个样式
	<style scoped>
	</style>

ref属性

# ref属性
	放在普通标签上，通过 this.$refs.名字--->取到的是dom对象，可以直接操作dom
    放在组件上，通过该this.$refs.名字---》取到的是组件对象，这样在父组件中，就拿到了子组件对象，对象属性和方法直接用即可
    
      // this.$refs.myinput.value = 'xxxxxx'
      // this.$refs.myhello // 就是组件对象
      // console.log(this.$refs.myhello.name)
      // this.$refs.myhello.handleClick()
      this.$refs.myhello.name = '我把子组件name改了'

props其他

# 父传子之自定义属性
	
    # 1 基本使用
    props:['img']
    # 2 限制类型
    props: {'msg': Boolean}
   	# 3 限制类型，必填，默认值
    props: {
        msg: {
          type: String, //类型
          required: true, //必要性
          default: '老王' //默认值
        }
      }

混入mixin

# 包下的 index.js  有特殊含义
	之前导入写法
	import xx from './mixin/index.js'
    现在可以写成
    import xx from './mixin'
    
# mixin(混入)
	功能：可以把多个组件共用的配置提取成一个混入对象
    
# 使用步骤
	1 定义混入对象:创建一个文件夹mixin--->在里面创建一个index.js中写
        export const lqz = {
            data() {
                return {
                    name: 'lqz'
                }
            },
            methods: {
                handleName() {
                    alert(this.name)
                }
            }
        }
   2 使用混入:局部使用，组件中使用
    	import {xxx} from '@/mixin'
        mixins:[xxx]
   3 全局使用混入:每个组件都有效 在main.js中设置
    	import {xxx} from '@/mixin'
        Vue.mixin(xxx)

插件

# 插件功能：用于增强Vue，有很多第三方插件
	(vuex，router，elemetui)
    
# 定义自己的插件
本质:包含install方法的应该对象,install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
    
# 使用步骤
	1 定义插件:创建一个文件夹plugins--->创建一个js文件index.js---->
        export default {
            install(){
                // 1 在vue实例中放属性
                # 往vue的原型中放axios对象,以后再组件中  this.$ajax  拿到的就是这个axios对象，直接用即可
                	import axios from "axios";
                	Vue.prototype.$ajax =axios
                
                // 2 定义混入，全局都可以使用混入
                定义混入，所有vc和vm上都有name和age
                	Vue.mixin({
                        data(){
                            return {
                                name:'xxx',
                                age:18
                            }
                        }
                    })
                
                // 3 自定义指令--->以后可能会使用第三方插件，它提供了一些指令
                // 4 定义全局组件--->全局
            }
        }
    2 在main.js中 使用插件
    	import xxx from '@/plugins'
        Vue.use(xxx)  # 这句话，就会执行xxx中的install，并且把vue传入

Element-ui

# ui库 控制样式的，它就是vue的一个插件

# 在vue项目中引入 element-ui
	1 在项目中安装:
        cnpm install element-ui -S
    2 main.js配置
    import ElementUI from 'element-ui';       // 把对象引入
    import 'element-ui/lib/theme-chalk/index.css';  // 把样式引入
    Vue.use(ElementUI)  // 使用elementui
    
    3 看到好看的直接复制
    	html、css、js
    
# 补充
1 卸载element-ui
	cnpm uninstall element-ui -S
2 清缓存
	cnpm cache clean -f
3 下载相对应的版本
  	cnpm i element-ui@2.13.0 -S

到了这里，关于Vue——登录小案例、scoped、ref属性、props其他、混入mixin、插件、Element-ui的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！