Vue.js学习笔记

最新推荐文章于 2023-12-26 20:00:20 发布

卟良亻

最新推荐文章于 2023-12-26 20:00:20 发布

阅读量158

点赞数

v-if和v-show的区别：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
总结：用v-if时，如果条件为假，则条件块根本不会被加载，知道条件为真是才被加载；用v-show时，元素一开始就会被渲染，只是会根据条件真假设置display是否可见。

页面中的this指什么

先来解决一个疑问，我们常在页面中用this.属性名来调用属性，那this到底指什么？

在控制台打印出this，显示如下

原来this就是指向当前组件。

v-on事件监听

点击事件：v-on：click=" “,还有几个事件修饰符去官网查
键盘事件：v-on：keyup=” "

显示过滤/排序结果

我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。

举例：

按我methods:{ getOdd(){ this.nums.filter(function(num){ if(num%2==0){ console.log(num) } } ) } }

这样就起到了过滤作用，把数组中的偶数打印出来了。

计算属性和方法的区别：

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

传值

一.父组件向子组件传值：props

1.静态传值

在父组件中的子组件标签中自定义一个key和value，例如在app.vue中的formdata标签中定义一个key（msgfrom）

在formdata.vue中用props属性来接收key，这样后就可以在formdata.vue中调用msgfrom属性了

props:[‘msgfrom’]

注意：

props和data是同级的
props是数组形式的，因为要接收很多值
2.动态传值

当然了，props不止接收静态值，也接收动态值。

例如：

是一个子标签。在input中的v-model把输入的值和msg属性绑定在一起，在中的v-bind动态的绑定msgfrom和msg属性，这样就做到了input中输入什么值，就往子标签中传什么值。
3.数据传递类型限制

props:{ title:[String,Number], //title这个属性可以是string类型或number类型 lifemsg:{ type:String, required:true //requierd属性表示必填的字符串 }, num:{ type:Number, default:10 //默认值 }, obj:{ type:Object, //如果父组件里传过来的是一个对象，则子组件里需要用函数去 default:function(){ 调用，这里的“未知”和100是默认值。 return{ name:“未知”, age:100 } } } }

二.子组件向父组件传值：this.$emit

举例：

在子组件中的button中添加一个事件：

在事件中用this.$emit方法：

sendMessage(){ this.$emit(“msg”,this.msg) // 这里的msg为自定义的名字，this.msg则是子组件中的一个属性 }

在父组件中的子组件标签上自定义一个事件：

<child @msg=“getmsg” /> //这里的msg是在子组件那设好的

getmsg(data){ console.log(data) //这里的data就是子组件那里传过来的this.msg }

插槽

一.单个插槽：

在子组件中写一个

在父组件中引用时，

标签中的内容显示到子组件的中

我是插槽中的内容

二.具名插槽

在父组件中：

//这里的内容显示到子组件中的中

我是插槽中的内容s1

我是插槽中的内容s11

我是插槽中的内容s2

//这里的内容显示到子组件中的中在子组件中：

就是给插槽分配了名字

三.作用域插槽（数据是子传父）

在子组件的中定义一个变量在父组件中用slot-scope接收数据；props只是一个key，是自定义的。

{{props.text}}
我是插槽中的内容s2

在动态组件上使用keep-alive，缓存

看官网例子即可

css过渡

在需要过渡的组件上使用，“fade”是这个transition的名字

hahaha

过渡一共有6个状态

opacity是不透明属性。
组件从显示到不显示就是Leave的过程，-leave的时候opacity为1（完全不透明），-leave-to时opacity为0（完全透明）
从不显示到显示就是Enter的过程

css动画

动画只要写两个过程即可，-enter-active和-leave-active
动画的好处就是可以控制进度，百分数进度自己定，如下面的0%，50%，100%
@keyframes是定义动画的标签，如下面的动画叫bounce-in，在.bounce-enter-active中用animation引用bounce-in
在template中：

Lorem ipsum

在script中：.bounce-enter-active { animation: bounce-in .5s;}.bounce-leave-active { animation: bounce-in .5s reverse;}@keyframes bounce-in { 0% { transform: scale(0); //scala（0）就是不显示 } 50% { transform: scale(1.5); //扩大为原来的1.5倍 } 100% { transform: scale(1); //没有变化 }}

自定义动画

在index.html中引入第三方库

然后就可以在组件中引用想要的库了

自定义动画

自定义指令

过滤器

过滤器用于一些常见的文本格式化
用法：

在一个组件的选项中定义本地的过滤器：

filters:{ //这个过滤器的作用就是在文本后面加上一个时间 contextChange(value){ //contextChange是方法名 var myDate=new Date() var m=myDate.getMonth()+1 var d=myDate.getDate() m=m<10?(‘0’+m):m d=d<10?(‘0’+d):d return value+’—编辑与’+myDate.getFullYear()+’-’+m+’-’+d } }

然后在双花括号中使用

//context是变量名，‘|’是管道符号，contextChange是方法名

Axios

个人理解：axios就和ajax差不多，用post或get方式访问一个网址然后拿到json格式的数据
安装：npm install axios
引入加载：在main.js中配置
import Axios from ‘axios’ Vue.prototype.$axios=Axios

请求：

 get请求：

created(){ this.$axios(“http://www.wwtliu.com/sxtstu/news/juhenews.php”,{ params:{ //这里是参数 type:“junshi”, count:30 } }) .then(res=>{ console.log(res); }) .catch(error=>{ console.log(error); }) }

post请求：

form-data格式: 地址？name=iwen&id=1

x-www-form-urlencoded格式： { name:“iwen”,id:1 }

注意：axios接收的post请求的参数参数的格式是form-data格式
created(){ this.$axios.post(“http://www.wwtliu.com/sxtstu/blueberrypai/login.php”, qs.stringify({ user_id:"iwen@qq.com", //三个参数 password:“iwen123”, verification_code:“crfvw” })) .then(res=>{ console.log(res) console.log(“成功了”) }) .catch(error=>{ console.log(error) console.log(“失败了”) }) }

上面示例代码中的qs是先前在该组件中引入的：import qs from “qs”

那qs到底起了什么作用呢？
axios.post(’/user’, { firstName: ‘Fred’, lastName: ‘Flintstone’ }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

上面的代码是axios的官方演示文档，参数的写法要按上面的来，但是axios接收的post请求的参数参数的格式是form-data格式，上面的写法是x-www-form-urlencoded格式。所以qs的作用就是转化了一下格式，举例如下：

querystring.stringify({ foo: ‘bar’, baz: [‘qux’, ‘quux’], corge: ‘’ });// 返回 ‘foo=bar&baz=qux&baz=quux&corge=’

全局的 axios 默认值

在main.js中配置：

axios.defaults.baseURL = ‘https://api.example.com’; //基础网址axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

路由基本加载

1.安装：npm install --save vue-router

2.引用：在main.js中加载

import VueRouter from ‘vue-router’ Vue.use(VueRouter)

3.配置路由文件，在main.js中

var router=new VueRouter({ routes:[{ path:"/hello", component:HelloWorld }]}) new Vue({ el: ‘#app’, router, //这里记得加上router components: { App }, template: ‘’})

4.视图加载位置

就是访问/hello时，组件HelloWorld会加载到这个中

注意
当路由配置较多的时候，在main.js中写很多配置会显得很杂乱，所以采取将路由配置写到外部，在main.js中引用配置的方式。

如下图，把路由配置写在index.js中，再在main.js中引入配置

index.js： import Vue from 'vue’import VueRouter from 'vue-router’import Index1 from '@/components/index’Vue.use(VueRouter) export default new VueRouter({ 这里的export default是关键，表示导出 routes:[{ path:"/", name:Index1, component:Index1 ] })

main.js： import router from ‘./router/index’ //引入路由配置 Vue.config.productionTip = false new Vue({ el: ‘#app’, router, //这里别忘了添加router components: { App }, template: ‘’})

路由跳转

          就是类似从www.baidu.com跳转到www.baidu.com/index

要用到的标签，示例：

 <router-link :to="home"> HelloWorld</router-link>，点击HelloWorld后就会跳转到home那个页面

中to的写法有很多种，1.可以直接写地址 2.可以用v-bind动态绑定一个数据

3.在path中写地址 4.在path中绑定数据

 <router-link to="/"> HelloWorld</router-link>     <router-link :to="urlData.helloword"> HelloWorld</router-link>     <router-link :to="{path:'/'}"> HelloWorld</router-link>     <router-link :to="{path:urlData.helloword}"> HelloWorld</router-link>

作者：昂热bobo
来源：CSDN
原文：https://blog.csdn.net/qq_37952161/article/details/82812259?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！