声明周期

最新推荐文章于 2022-09-21 21:40:03 发布

乐意-李

最新推荐文章于 2022-09-21 21:40:03 发布

阅读量280

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45903009/article/details/115561805

版权

文章目录

一：计算属性

1·1：什么是计算属性

是Vue实例的一个属性，该属性具有计算的功能
计算属性中要是引入了data的某一个属性，当这个属性发生变化的时候，计算属性仿佛可以嗅探到这个变化，并重新自动执行

1·2：计算属性的语法

camputed：{
		需要返回的数据：function(){
			return  处理操作
		}
}

1·3：例如，将数据转大写并且截取部分子串的例子

采用计算属性

 computed:{
  demoText:function(){
  return  this.text.toUpperCase().substr(2,1);
  	}
  }

采用方法

methods:{
 textfun(){
 return this.text.toUpperCase().substr(2,2)
   }
  }

1·4：计算属性与方法的区别

计算属性是基于他们的依赖进行缓存的，计算属性只有在他相关依赖发生改变时才会重新求值

而方法绑定数据只要被调用，方法将总是再次执行函数

所以计算属性相对于方法在处理特定场合下节省资源性能

1·5：计算属性与监听的区别

当需要在数据变化是执行异步或者是开销较大的操作时，watch最有用

当watch监听的值发生改变是就会被调用，

当计算依赖的值发生改变的时候才会被触发

二：Vue请求数据交互

2·1：vue请求数据有三种方式

Vue-resource —> Vue2.0已经停止更新了
Axios —>第三方插件
fetch

2·2：Axios的使用

第一步：下载：cnpm install --save axios
第二步：引入包
第三步：使用

Axios的get请求：

axios.get('/路径?k=v&k=v)
.then((ok)=>{})
.catch((err)=>{})

Axios的post请求

axios.post('/user', {k:v,k:v })
  .then(function (ok) { })
  .catch(function (error) { });

Axios的综合交互

■使用get发送数据的时候使用params：{key:val}发送数据

axios({
	url:"路径"，
	methods："get",
	params：{key：value}
}).then((ok)=>{console.log(ok)})
.catch((err)=>{console.log(err)})

■使用post发送数据需要使用 var param=newURLSearchParams();

param.append(“uname”,“xixi”)添加数据并且使用data发送数据

var param=newURLSearchParams()
param.append("uname","xixi")
axios({
	url:"路径"，
	methods："post",
	data:params,
}).then((ok)=>{console.log(ok)})
.catch((err)=>{console.log(err)})

2·3：axios在工作中的使用

<body>
    <div id="req">
        <!-- 需求：在文字没加载出来显示图片，加载出来显示文字 -->
        <button @click="fun()">点击请求数据</button>
        <img src="1.gif" v-if="bool">
        <h1 v-for="(v,i) in arr" v-else>{{v.commentTxt}}</h1>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#req",
        data: {
            arr: [],
            bool:false,
        },
        methods: {
            axioslink(url) {
                return new Promise((resolve, reject) => {
                    axios({
                        url,
                        methods: "get",
                    }).then((ok) => {
                        resolve(ok)
                    }).catch((err) => {
                        reject(err)
                    })
                })
            },

            fun() {
                this.bool=true;
                this.axioslink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then((ok) => {
                    console.log(ok.data.data.commentList)
                    this.bool=false;
                    this.arr = ok.data.data.commentList
                })
            },

        }
    })
</script>

三：实例的生命周期

3·1：什么是实例的生命周期

实例从创建到销毁经过的一系列的过程叫做生命周期，即就是开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期

3·2：什么是生命周期钩子

在声明周期中被自动调用的函数叫做生命周期的钩子

3·3:生命周期钩子函数的用途

给用户在不用阶段添加自己代码的机会，可以更加便利控制整个Vue实例的过程的指定逻辑

3·4：钩子函数有哪些：

beforeCreate（创建实例）：组件实例刚被创建，属性还没有绑定呢
created（实例创建完成）：组件实例创建完成，属性已经绑定，但是dom还没有挂载
beforeMount（开始创建模板）:模板编译之前，也就是挂载dom之前
mounted（模板创建完成）：模板编译之后，dom挂载成功
beforeUpdate（开始更新）：组件更新之前
updated（更新完成）：组件更新之后
beforeDestrory（开始销毁）
destroyed（销毁完成）

【注意】：钩子函数的书写位置与data和methods同级位置

3·5：数据请求时应绑定哪一个钩子函数

created：html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
mounted:由于此时html已经渲染出来了，所以可以直接操作dom节点

3·6：第一次页面加载会触发

beforeCreate, created，beforeMount, mounted 这几个钩子

s同级位置

3·5：数据请求时应绑定哪一个钩子函数

created：html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
mounted:由于此时html已经渲染出来了，所以可以直接操作dom节点

3·6：第一次页面加载会触发

beforeCreate, created，beforeMount, mounted 这几个钩子

乐意-李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
声明周期

文章目录一：计算属性1·1：什么是计算属性1·2：计算属性的语法1·3：例如，将数据转大写并且截取部分子串的例子1·4：计算属性与方法的区别1·5：计算属性与监听的区别二：Vue请求数据交互2·1：vue请求数据有三种方式2·2：Axios的使用2·3：axios在工作中的使用三：实例的生命周期3·1：什么是实例的生命周期3·2：什么是生命周期钩子3·3:生命周期钩子函数的用途3·4：钩子函数有哪些：3·5：数据请求时应绑定哪一个钩子函数3·6：第一次页面加载会触发3·5：数据请求时应绑定哪一个钩子函数3·
复制链接

扫一扫