VUE 学习心得

爱编程的阿宣
43 阅读2分钟

Vue-cli  脚手架的使用

安装命令   npm install -g @vue/cli    -g 代表全局安装

创建项目

1. vue create projectName    

src目录结构

1. assets  存放静态资源 图片 css样式表等  

2. components  封装的组件

3. main.js  项目的入口

4. App.vue  定义UI结构  项目根组件

Vue 项目的运行流程

通过main.js  把App.vue渲染到index.html的指定区域

注意 eslint报错：Parsing error: No Babel config file detected?

SQL 这个报错是由编辑器中你下载的ESLint插件检测到，而不是vue脚手架中eslint的文件检测到 这是因为浏览器中ESLint插件会从根目录开始检测，也就是在编辑器中打开的根目录中检测，因此找不到这个babel配置文件 解决方法一（不推荐）： 在eslint里面加一个  requireConfigFile:false，这样eslint就不会发出报错了。 解决方法二 （推荐）： 直接打开项目的根目录，不要有任何上层目录 解决方法三： 禁用编辑器插件ESLint

注意  Vue实例的.$mount('')方法跟el属性作用一样

SQL new Vue({   render: h => h(Testvue) }).mount('#app')       ==(相等)                      Vue实例的.mount('')方法跟el属性作用一样 new Vue({   el: '#app'   render: h => h(Testvue)                })

注意  .vue 组件的 data 必须是函数，不能指向对象

HTML .test-box{   background-color: pink; }

注意    中只能有一个根结点  

注册单个组件

HTML 1. import Count from '@/components/CountVue.vue' 2. 3.

注册全局组件

在main.js入口文件中，通过Vue.component（）方法注册全局组件

HTML //导入全局注册的组件 import Count from '@/components/CountVue.vue' Vue.component('MyCount', Count)

Props  设置值 协助组件复用      组件中 props 的值是只读的 不要直接修改

HTML

Props 基本用法

HTML   props: {         init: {           default: 0,      默认值           type: Number,    规定类型           required: true   是否必填项         }     }

组件中的样式冲突问题

  默认情况下，写在.vue（组件）中的 css 样式会全局生效

原因： 单页面应用中，所有组件的dom结构都是基于唯一的 index.html 页面呈现的，所以每个组件的样式都会影响整个 index.html 的 dom 元素

data-v-xxx  代表自定义属性  

HTML 1. h3[data-v-xxx]{   color: red; } 2. 给 scoped 中的每个选择器的最后一个选择器添加一个属性选择器  原选择器[data-v-xxxx] 或者直接加scoped   会自动生成 data-v-xxx 使用 scoped 后，父组件的样式将不会渗透到子组件中。 不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。 这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

使用deep在父组件中直接修改子组件的样式

HTML /deep/ h3{   color: red; }

组件的生命周期   及  生命周期函数

image.png

 

 

 组件创建阶段new Vue()  ->   beforeCreate  ->  created  ->  beforeMount   ->   mounted    组件运行阶段beforUpdate  ->   updated 组件销毁阶段beforeDestroy   ->   destroyed  Created  可以拿到 props  data  methods  的数据，但组件结构还未生成  Created 一般用于发起ajax请求获取数据Mounted 是组件被渲染到浏览，是操作Dom的最早的时机Updated 能够操作到最新的DOM元素

原生 ajax    Created 方法 常用来通过ajax请求拿到想要的数据转存到 data ，供template 模版渲染的时候使用         created 仅能拿到数据不能拿到dom

HTML ')         xhr.send()       }     },     created () {         this.ajaxTest()     } } 注意 ： function() 会影响this的指向，可以替换成 （）=>

beforeUpdate 方法跟 updated  方法会监听 data 的变化，当 data 里数据变化时会根据最新的数据渲染组件的模版结构

注意 ： beforeUpdate 拿到的页面dom元素是未更改的，updated 是更改之后的  （数据变化之后为了操作最新的dom必须要在updated生命周期函数里写）

父组件向子组件传值

image.png  

父子组件的关系是 父组件内包含子组件，在父组件中向声明的子组件以   : msg  的方式传值，子组件用props 接收

子组件向父组件传值

image.png

 

兄弟组件传值用到的共享的方案 是 EventBus

image.png

image.png

 

 

ref 属性 操作dom元素

image.png

注意：ref属性的名字唯一

image.png  

注意：也可以通过给子组件设置ref       然后通过this.$refs.test 拿到子组件实例对象，来调用子组件的方法或者data数据

 

this.$nextTick(callback)  将callback方法推迟到下一次dom元素更新之后，即组件dom更新完成之后再执行回调函数，保证每次执行回调函数都可以操作最新的dom元素

注意：为什么不能用updated 钩子 生命周期函数，因为每次有变化都会更新，所以 inputVisible 为 false时，拿不到this.$refs.iptRef 的dom，会报错

 

image.png  

数组循环方法

 

数组循环 forEach  一旦开始不能结束，只能循环完

数组支持过滤器  arr.fliter( xxx=true ).forEach( item => {

xxxx

} ) image.png

 

数组循环使用 some 从一个循环中找某个元素时，不想再遍历后面的，使用         return ture 退出循环

image.png  

every---遍历数组中的对象，判断是否都满足条件时使用 every 都满足时返回 true，否则返回 false

 

image.png

Reduce 累加器 会将循环中的结果做累加

arr.filter ( item => item.state ). reduce( ( 累加的结果， 当前循环项) => { } , 初始值)

image.png  

注意  当（）=> { }  箭头函数里面只有一行代码时可以省略简写

image.png  

安装 axios 来向后台发起请求

Npm i axios -S

Router 路由

image.png  

image.png  

 

image.png  

image.png  

将默认路径重定向为执行页面

image.png  

通过children 属性声明子路由规则

注意：子路径path 不要加 /

image.png  

想要在页面中默认展示出某个子路由时有两种方式

1. 修改给父类增加重定向 “about/tab1”

2. 使用默认子路由 ：如果children数组中，有path为‘’ 空字符串时，则为默认子路由

image.png  

动态路由

概念

image.png  

注意：

this.$route 是路由的参数对象

this.$router 是路由的导航对象

avatar
文章
阅读
粉丝