小白vue学习总结

最新推荐文章于 2024-04-04 16:05:34 发布

云中朝颜

最新推荐文章于 2024-04-04 16:05:34 发布

阅读量393

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_44828395/article/details/109029472

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

vue学习

webstorm快捷键：

ctrl + b: 跳到变量申明处
ctrl + r: 替换
ctrl + d: 行复制
ctrl + / : 单行注释
ctrl + shift + / : 块注释
ctrl+alt+L 格式化代码
Ctrl+Shift+N 查找文件
Ctrl+F 查找文本
Ctrl+Shift+Space 自动补全代码

小知识点

类型转换：parseInt() //转为int型数据格式：parse+*

特点：

声明式编程数据驱动 vue的响应式
MVVM：（Model–view–viewmodel）是一种软件架构模式，视图模型是暴露公共属性和命令的视图的抽象（数据绑定，结点监听）双向绑定

JS高阶函数

filter()中的回调函数必须返回一个Boolean值，如果返回的是true则自动加入到一个新的数组中，若为false，则过滤掉
map()中返回的值会直接放入新的数组里面
reduce（）队数组中的所有内容进行汇总

块级作用域：

基础语法：

options对象：创建Vue实例传入的，
el:类型：string|HTMLElement 作用：决定本Vue实例管理哪个DOM
data：类型：Object|function(组件里必须为函数）
methods: function
computed：计算属性可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
watch：监听属性
{{…}}（双大括号）的文本插值 //中间可以插入变量
指令：
v-if=“seen” // v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
v-bind //v-bind 指令被用来响应地更新 HTML 属性,单向绑定缩写：<a v-bind:href="url"></a><a :href="url"></a>
v-on //用于监听 DOM 事件缩写：<a v-on:click="doSomething"></a><a @click="doSomething"></a>
事件修饰符：
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
例：<input v-on:keyup.enter="submit">
.enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right .ctrl. alt .shift .meta
v-model //双向数据绑定
修饰符：
.lazy ：在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
.number ：如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
.trim ：如果要自动过滤用户输入的首尾空格
v-if //v-if 指令将根据表达式的值(true 或 false )来决定是否插入元素
v-else //v-else 指令给 v-if 添加一个 “else” 块
v-else-if // v-if 的 else-if 块
v-show // v-show 指令来根据条件展示元素这个是不管条件是否成立，都会创建，但是不一定会展示
v-for //v-for 指令需要以 site in sites 形式的特殊语法 v-for(value,key) in site 获取键值
{{ message | capitalize }} //自定义过滤器

数组中响应式方法：
pop() , shift()删除数组的第一个元素, unshitf(),splice(),sort(),reverse()
可变参数：形如：…name
？？？

Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
注意：data 必须是一个函数
注册全局组件：Vue.component(tagName, options)
局部组件：new Vue({ el: ‘#app’,
components: {
// 将只在父模板可用
‘runoob’: Child
}
})
例：

<body>
<!--  3. 第三步 组件的使用-->
<div id="app">
    <my-cpn></my-cpn>
</div>

</body>
<script>
    //1.第一步 创建组件构造器对象
    const cpnc = Vue.extend({
        template:
         `<div>
             <h2>test</h2>
          </div>`
    })
    //2.第二步 注册组件
    Vue.component('my-cpn',cpnc)

    // 创建根实例
    //语法糖
    // 注册
   Vue.component('runoob', {
      template: '<h1>自定义组件!</h1>'
    })
    new Vue({
        el: '#app'
    })
</script>

父子组件之间的通信：

父传子：Prop：prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。（注意：驼峰标识，aB->a-b）
动态 Prop： v-bind:todo=“item” 用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中
格式：在这里插入图片描述

子传父：自定义事件
使用 v-on(eventName) 监听事件使用 $emit(eventName) 触发事件

父子组件的访问方式（直接访问对象）：

父访问子：$children或 $refs

//1$children 数组类型
for(let c of this.$children){
     console.log(c)
}
//2$refs  对象类型
//子组件：
<template  ref="yun"></template>
//使用
this.$refs.yun

子访问父： $parent 访问根组件： $root

组件里的插槽slot

//slot的默认值
//如果有多个值，同时放入组件进行替换时，会一起替换
<template id="cpn">
	<h>aaa</h>
	<slot><h>bbb</h></slot>
</template>
<cpn><h>ccc</h></cpn>

//具名插槽的使用
<template id="cpn">
	<h>aaa</h>
	<slot name="标题"><h>bbb</h></slot>
</template>
<cpn><h  slot="标题">ccc</h></cpn>

编译作用域：当前标签使用的变量是从所处的模块中寻找的，例:

div id="app">
//这里的isShow是从当前模块id为app的div里找的
    <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
    <h>aaa</h>
</template>
</body>
<script>
    //1.第一步 创建组件构造器对象
    const cpnc = new Vue({
        el: '#app',
        data:{
            isShow:true
        },
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return{
                        isShow: false
                    }
                }
            }

        }

    })
</script>

作用域插槽：父组件替换插槽里的标签，但是内容由子组件提供

前端模块化

解决命名冲突、代码复用
模块化两个核心：导入和导出
导入：

//ES6
//1.导出方式1
export {
    flag,num
}
//2.导出方式2
export var num1=1000;
export var height=1.88;
//3.导出函数/类
export function mul(num1,num2) {
    return num1*num2;
}
export class person{
    run(){
        console.log("在跑步").log
    }
}
//4.export default 一个模块中包含某个的功能，
//我们并不希望给这个功能命名，而且让导入者可以自己来命名 
//一个文件里只能有一个
export default  function () {
    
}

导出：

//导入export default的形式的
import name from "./aaa.js"
//依次导入
import {name1,name2,name3} from "./aaa.js"
//全部导入
import * as name from "./aaa.js"

webpack:模块化打包功能
vuecli-脚手架:
初始化项目：

//vuecli2
vue init webpack projectName
//vuecli3

在这里插入图片描述
vuecli-脚手架目录结构：

runtime-compiler 和runtime-only的区别：
Vue程序的运行过程：
runtime-compiler：template -解析-> ast(抽象语法树) -编译-> render -->vdom(虚拟dom)–>UI(真实dom)
runtime-only:render -->vdom(虚拟dom)–>UI(真实dom) (性能更高，代码量更少)
render的用法：

new Vue({
  el: '#app',
  router,
  render:function (createElement) {
    //1.普通用法
    //return createElement('h2',{class:'box'},['hello world'])
    //return createElement('h2',{class:'box'},['hello world',createElement('button',['按钮'])])
    //2.传入组件
    return createElement(App)
  }
})

创建CLi3项目：vue create name

箭头函数的使用：

//箭头函数是一种定义函数的方式
//1.定义函数的方式：function
const aaa=function () {
}
//2.对象字面量中定义函数
const obj ={
  bbb:function () {
  },
  bb(){
  }
}
//3.ES6中的箭头函数
const ccc = (参数列表)=>{
}
const ccc = () =>{
}
  //1.参数问题
  //1.1 放入两个参数
  const sum= (num1,num2) =>{
        return num2+num1
  }
  //1.2 放入一个参数
   const power = num =>{
         return num*num
   }
   //2.函数中只有一行代码
   const sum =(num1,num2) => num1+num2

//什么时候使用箭头函数  ：在函数里使用函数作为参数时
//箭头函数中的this是如何查找的：向外层一层一层查找，直到有this的定义

路由

前端渲染和后端渲染：

后端渲染：在后端（服务器端已经把网页写好了到前端只有（HTML+css））
后端路由：后端处理URL和页面之间的映射关系
前端渲染：浏览器中显示的网页中大部分内容，都是由前端写的js代码在浏览器中执行的，最终渲染出来的网页。
前端路由：不同的URL在前端判断然后从一开始的全部资源里获取，URL和页面的映射关系有前端管理

SPA页面：单页面富应用

改变URL而不刷新整个界面：

改变URL的hash来改变：location.hash=“name”
改变HTML5的history：
1.history.pushState({},’’,‘name’)
2.history.replaceState({},’’,‘name’)
3.history.go()

vue-router

使用过程：

//1.通过vue.use插入插件
Vue.use(VueRouter)

//配置路由和组件之间的映射关系
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

//2.创建VueRouter对象
const router = new VueRouter({
  routes
})

//3.将router对象传入vue实例中
export default router

//4.使用路由
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view/>

路由的默认值：

默认首页：使用重定向（redirect）
模式修改为history：在创建VueRouter对象时加入mode:“history”
router-link的属性：
to:跳转的目的地址
tag:可以指定router-link之后被渲染成什么属性
replace：不留下历史记录
active-class:设置激活状态的class名称（统一修改：在路由里添加linkActiveClass）
使用代码跳转路由：this.$router.push("/home")

动态路由的使用：

 //1
 path: '/about/:userId',
 //2
 <router-link to="/about/zhangsan">About</router-link>
 //3
 <router-link :to="'/about/'+userId">About</router-link>
 //4 使用路由里的参数  取出当前活跃路由的参数
 this.$route.params.userId

路由的懒加载：用到时再加载，会将用到懒加载的路由的组件进行分别的打包成js文件
写法：
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
嵌套路由的使用：在路由的里面写一个‘子路由’：
children:[ { path: 'news', component:news } ]
路由的参数传递：
传递参数有两种方式：params（动态路由）和query（对象）：
<router-link :to="{path:'about',query:{userId:'刘聪'}}">信息</router-link>
路由的全局导航守卫：
在跳转路由的时候可以更改网页title等等

router.beforeEach((to,from,next)=>{
  document.title=to.matched[0].meta.title
  next()
})

路由的导航守卫：

路由独享的守卫
组件内的守卫

路由-keep-alive：
用法：<keep-live><router-view/></keep-live>
只有路由使用了keep-live才有活跃和非活跃状态，否则只有创建和销毁状态
属性：include（只有包含的组件才有用）exclude（排除某一些组件）

<keep-live exclude="profile,user"><router-view/></keep-live>

Vuex

VueX是适用于在Vue项目开发时使用的状态管理工具.如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用
(就是有个全部空间放变量，然后对这个空间的变量进行监听更新)

axios

在这里插入图片描述
config是对象类型

axios的基本使用：
在这里插入图片描述
axios的并发请求：

axios.all([axios(),axios()]).then(results=>{
  
})

axios的基本配置：axios.default.*
在这里插入图片描述
封装axios模块：

或：

在这里插入图片描述
拦截器：

Vue.js 自定义指令

云中朝颜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白vue学习总结

vue学习webstorm快捷键：ctrl + b: 跳到变量申明处ctrl + r: 替换ctrl + d: 行复制ctrl + / : 单行注释ctrl + shift + / : 块注释ctrl+alt+L 格式化代码Ctrl+Shift+N 查找文件Ctrl+F 查找文本Ctrl+Shift+Space 自动补全代码特点：声明式编程数据驱动 vue的响应式MVVM：（Model–view–viewmodel）是一种软件架构模式，视图模型是暴露公
复制链接

扫一扫