Vue知识点小结

mac2025-08-04 1

一.VUE的引用

在原有项目里添加 <body> <script src="https://cdn.jsdeLivr.net/npm/vue@2.5.22/dist/vue. js"></script> <script src="index. js"></script> //在body的最下面js之前引用链接 </body> 创建一个新的VUE项目控制台输入npm install -g @vue/cli //安装全局下的vue vue --version //查看VUE版本号 vue ui //自动打开浏览器 VUE的UI视图在VUE的ui里面创建VUE工程，默认设置即可提交项目至码云复制新建仓库里的已有仓库代码后两行： git remote add origin https://gitee. com/bamt chtest1/todo.vue.git git push -u origin master 将代码复制到控制台，打开码云就可以看到提交的代码啦。

二、组件的使用

分三步： 1. 引用组件 import facePop from './components/facePop' 2. 注册组件 components = { facePop } 3. 使用组件 <facePop></facePop>

三、scoped有无的区别：

四、vue语法结构 v-for语法

<template> <div class="topNavdaohang"> <ul> <li v-for="item in navDates" :key="item.id"><a :href="item.href"><i :class="'iconfont '+item.icon"> </i>{{item.navName}}</a></li> </ul> </div> </template> <script> export default { data:function(){ return{ navDates:[ { icon: "icon-1", id:"1", navName:"首页", href:"" }] } } } </script> <style scoped> </style>

v-for语句使用注意要点： 1.v-for 是要加在要循环的节点上 2.改造标签属性值需要在属性值前面加’:’ 3.在声明节点内部都能拿到该变量 4. （:key）的使用在数据里面加id 5.注意引用src时要在方法里用require包裹一下

getImgUrl(icon){ return require("@/assets/"+icon); }

v-if语句： 1.v-if和v-else-if和v-else要使用在同级标签里面 2.v-if里面的值要在data里面声明

<topNav v-if="isone"></topNav> <banner v-else-if="istwo"></banner> <left v-else></left> <script> export default { data:function(){ return{ isone:false, istwo:ture } } } </script>

v-show和v-if从浏览器上效果是一模一样的，但是v-show相当于css里的display：none；v-if是重新渲染，v-show只是隐藏起来

五、Vue动态样式：

<ul> <li :class="{banner:isbanner}"></li> <li></li> </ul> //这里的isbanner为ture

这里的key是css里面的样式，value是data声明的数据绑定。

<div class="bang" v-for="items in songhuabang" :key="items.id" :class="selectNav(items.id)"> </div> methods:{ selectNav: function(id){ if(id==="1"){ return "bianse"; } return ""; } } 在配合循环使用时应声明一个方法。

六、data的使用

和components是同级的，但是data里面必须返回一个function export default { name: 'app', components: { },data:function(){ return { message:"hello" } } } </script>

七、vue的事件机制

通过函数写 <template> <div @click="add"> {{message}},{{num}} </div> </template> <script> export default { name: 'app', components: { },data:function(){ return { num:10, message:"hello" }; },methods:{ add:function(){ this.num++ } } } </script> 同样也能传值 <template> <div @click="add(10)"> {{message}},{{num}} </div> </template> <script> export default { name: 'app', components: { },data:function(){ return { num:10, message:"hello" }; },methods:{ add:function(number){ this.num=this.num+number; return this.num; } } } </script>

八、组件复用

为了实现子组件的复用，不能在子组件把数据写死，所以借助关键字props（和data是并列的）

export default { props:["navDatas"],//这里props里面是字符串数组 data:function(){ return{ isshow:false } } };

在子组件的v-for循环里正常使用该key值（navDatas）

<div class="topNavdaohang"> <ul> <li v-for="item in navDatas" :key="item.id"><a :href="item.href"><i :class="'iconfont '+item.icon"> </i>{{item.navName}}</a></li> </ul> </div>

在父组件的data里面把数据填充进去

export default { name: 'app', components: { topNav,banner,left,right }, data:function(){ return{ navDatas:[ { icon: "icon-1", id:"1", navName:"首页", href:"" },{ icon: "icon-shipin", id:"2", navName:"视频", href:"" },{ icon: "icon-faxian", id:"3", navName:"发现", href:"" },{ icon: "icon-ziyuan", id:"4", navName:"游戏", href:"" },{ icon: "icon-zhuce", id:"5", navName:"注册", href:"" },{ icon: "icon-denglu", id:"6", navName:"登陆", href:"" } ], } } } </script>

最后一步在标签里引用就可以啦

<topNav :navDatas="navDatas"></topNav> //此时的：navDatas是子组件里的 props:["navDatas"]， //后面的value值是父组件data里面自定义的数据名称

子组件调父组件的方法

同样在子组件里声明props关键字，里面写进key值

props:["navDates","print1"]//这里的print1是key值

在子组件的methods里面的方法里调用父类方法（注意和data一样，使用this关键字）

methods:{ print2:function(){ this.print(); return ""; } }

在子组件里的标签调用该方法

在父组件的methods里面声明父组件方法

methods:{ print:function(){ alert("子组件调父组件方法"); } }

在父组件中将该方法添加到子组件标签中

九、初始化事件

在网页里会有打开网页视频自动播放等默认事件，在vue里需要引入mounted方法，它与data同级。

mounted:function(){ window.addEventListener("scroll",function(){ alert("vue初始化事件！"); }) }

处理事件用mounted,处理数据用created

最新回复(0)