vue基础三

最新推荐文章于 2023-03-14 11:24:18 发布

happy sun

最新推荐文章于 2023-03-14 11:24:18 发布

阅读量209

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44309406/article/details/103656529

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ajax

xhr对象
流程很麻烦
新的ajax

content-type:“application/json”

前台向后台发送数据格式一般常用的有两个

一个是

	conten-type:"application/x-www-form-urlencoded"

"名字=值&名字=值2"

	conten-type:"application/json"

	{		

		key:v
	}
注意：axios 发送post请求，后台有时候，接受不到参数，使用qs包 自己百度

//get请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  
// 另一种传参
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
 

// 异步函数 async 改成同步写法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

post
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
  
  axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

拦截器

// 请求拦截
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// 相应拦截
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  })

侦听器属性 watch 实例或者组件的属性

用于 监听  其他 state 


new Vue({
	el:"#box",
	data:{
		msg:"111",
		obj:{
			msg:22,
			msg2:22
		}	
	},
	watch:{
		msg:(newVal,oldVal)=>{
			
		},
		"obj.msg":()=>{
			//监听obj.msg
		},
		obj:{
			handler:(newVal)=>{
				//监听的回调
			},
			deep:true //深度监听
		}
	}
});

计算属性

我们希望 有一个 state 基于现有的state（data中） 做依赖，通过data中的某个state做映射

computed:{
	msg2(){
		return this.msg*2 //是data中的
	}
}

计算属性好处：
	计算属性是基于它们的响应式依赖进行缓存的。如果依赖没有变化，computed回调是不会执行的
注意：
	1，computed 是一个函数，return值，这个值就是最终的data
	2,使用时同data中的state
	3,不要去更改 computed中属性的值
	4，computed中的属性不要和data中的属性重名

混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

组件化开发

把网页的 不同部分 分成不同的整体 这个整体叫做组件
如：	一个网页 可以分成 头部 导航 轮播 楼层 底部

组件：  可以 也是 Vue 构造函数的特殊实例   跟new Vue这个实例基本是一样的
组件 不能单独存在，需要挂载到实例上

全局组件：在任意的位置都可以使用
局部组件：只能在注册 的父组件 或者 实例上才能使用
注意：写法都是一样的，区别就在于 注册的地方 如果在全局注册 就是全局 实例或者组件上注册就是局部的

1，组件的写法
	let Home = {
		template  放html
		data
		methods
		computed
		watch
		。。。
	}
2，组件注册
	全局注册：
		Vue.component("Home",Home)
	局部注册：
		new Vue({
			data:{},
			methods:{},
			..
			components:{
				Aa:Aa
				Home:Home
			}
		})
		
		var Aa={
			data(){
				return {
					list:[1,2,3,4]
				}
			},
			methods:{},
			...
			compoents:{
				Home
			}
		}
	使用：
		1，使用自定义标签来渲染组件 标签名 就是注册的组件名
		2，组件名推荐使用大驼峰 如HomePage
		3，使用时，首字母小写，后面大写字母变成-  <home-page>
		4，局部组件 只能在注册的组件中的template中使用
		5,所有的组件的template 有且只能有一个根元素
		6,组件中的data必须是一个函数，return {}

组件template另外两种写法

script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
            <header-page></header-page>
    </div>
    <script id="tpl" type="text/html">
        <div>
                <button @click="add">增加一个导航</button>
                <ul>
                    <li v-for="(nav,index) in navList">
                        <a href="#">{{ nav }}</a>
                    </li>
                
                </ul>    
            </div>
    </script>
    <script>
        const Navs={
            template:"#tpl",
            data(){
                return {
                    navList:["首页","新闻","关于我们"]
                }
            },
            methods:{
                add(){
                    this.navList.push("加入我们");
                }
            }
        }

        // 注册一个全局组件
        const Header={
            template:`
                <div>
                    <h1>我是网页的头部</h1>
                    <navs></navs>
                </div>
                `,
            components: {
                Navs
            },
            methods:{
                add(){

                }
            }
        }
        Vue.component('HeaderPage',Header);
        // 如何使用 通过标签的形式来使用 <Header></Header>
        new Vue({
            el:"#box",

        })
    </script>
</body>
</html>

template 重点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="box">
        <header-page></header-page>
    </div>

    
    <template id="tpl">
        <div>
            <button @click="add">增加一个导航</button>
            <ul>
                <li v-for="(nav,index) in navList">
                    <a href="#">{{ nav }}</a>
                </li>

            </ul>
        </div>
    </template>
    <script>
        const Navs = {
            template: "#tpl",
            data() {
                return {
                    navList: ["首页", "新闻", "关于我们"]
                }
            },
            methods: {
                add() {
                    this.navList.push("加入我们");
                }
            }
        }

        // 注册一个全局组件
        const Header = {
            template: `
                <div>
                    <h1>我是网页的头部</h1>
                    <navs></navs>
                </div>
                `,
            components: {
                Navs
            },
            methods: {
                add() {

                }
            }
        }
        Vue.component('HeaderPage', Header);
        // 如何使用 通过标签的形式来使用 <Header></Header>
        new Vue({
            el: "#box",

        })
    </script>
</body>

</html>

组件间关系

组件间注册的原因可以分成以下两种关系:
	父子组件
	兄弟组件
由于组件间的两种关系 所以有了三种通信
	父向子传数据
	子向父传数据
	兄弟之间传数据
	
	傻瓜组件
	
	聪明组件 容器

父向子传数据

子组件中增加props属性 
写法两种：
	1，数组 数组各个值 就是 父组件向子组件传的数据的键，使用跟data中的数据用法是一样的
		所以需要注意的是 props数组中的值 不能和data中的值重名
	2，对象 在props需要验证的时候用，此时 格式对对象， 对象的不同的属性 就是父向子传的数据的键值
	验证类型 一般有：type Number String Object Array Boolean 
		required 必须传验证 true/false
		default 默认值 注意 当 type为Object/Array时，默认值需要是一个函数返回这个值
怎么传：
	组件的自定义标签的属性传入，属性传值有两种
	静态的值 
	<home msg='xxx'></home>
	动态值
	<home :msg='xxx'></home>  xxx是父组件中data的某个state