vue基础学习笔记

已注销
78 阅读5分钟

vue学习

语法字典

  • vue.config.js相关配置
    • module.export对象
      • devServer修改服务器相关配置
        • open 控制浏览器是否默认打开 true为打开
        • port 修改浏览器端口
      • lintOnsave是否打开eslint代码检查功能 true/false
  • vue基础语法
    • 插值表达式（声明式渲染/文本插值）
      • html语法
        • {{表达式}}
        • 表达式可以为变量，对象，表达式(不可以为if语句等但可以为三元表达式)
      • js语法
        • data(){return { 变量名:值}}
    • MVVM设计模式
    • v-bind指令给标签属性设置vue变量值
      • 语法
        • v-bind：属性="vue变量"
        • 简写格式
          • ：属性="vue变量"
          • vue变量为布尔值时控制属性的有无
    • v-on指令绑定事件
      • v-on：事件名="执行函数"
      • v-on：事件名="methods中函数名"
      • v-on：事件名="methods中函数名（参数）"
      • 简写格式
        • @事件名
      • $event实参代表事件对象（e）
        • e.preventDefault()阻止默认行为
      • vue事件修饰符
        • cn.vuejs.org/v2/guide/ev…
        • @事件名.修饰符
          • .stop——阻止事件冒泡
          • .prevent——阻止默认行为
          • .once——程序运行期间，只触发一次事件处理函数
      • vue按键修饰符
    • v-model 表单标签属性value和vue数据变量捆绑
      • 语法
        • v-model="变量名"
      • 针对不同表单
        • 下拉菜单（select）
          • v-model绑定在select上
        • 复选框（checkbox）
          • v-model绑定在各复选框上
          • 如果v-model对应的vue数据变量是非数组，则绑定checked值(true/false)，是数组绑定value值
        • 单选框（radio）
          • v-model绑定在各单选框上
        • 文本域（textarea）
          • v-model绑定在textarea上
      • 修饰符
        • .number ——以parseFloat转成数字类型
        • .trim——去除首尾空白字符
        • .lazy——在change时触发而非inup时（失去焦点）
    • v-text/v-html
      • 语法
        • v-text/v-html:"vue变量"
        • 会覆盖插值表达式
    • v-show/v-if
      • 语法
        • v-show/v-if="vue变量"
      • 原理
        • v-show采用display：none
        • v-if采用DOM树直接移除
      • v-else，当v-if条件不满足的时候
    • v-for列表渲染
      • 语法
        • v-for="（值变量，索引变量）in 循环目标"
        • v-for="值变量 in 循环目标"
        • v-for="（值变量，key）in 循环目标"
        • 循环目标可以是数组/对象/数字
    • this.$set更新对象或数组
      • 语法
        • this.$set(目标，key，value)
        • 目标可以是对象也可以是数组
    • ：key 页面渲染
      • 给虚拟DOM提供标识符
    • 动态class属性
      • 语法
        • :class="{类名：布尔值}"
    • 动态style属性
      • 语法
        • :style="{css属性名：值}"
    • filters过滤器
      • 使用环境
        • v-bind/插值表达式
      • 使用语法
        • 值｜过滤器名字
        • 同时使用多个过滤器，或给过滤器传参
          • 传参
            • vue变量 ｜ 过滤器（实参）
          • 多个过滤器
            • vue变量 ｜ 过滤器 ｜过滤器
      • 定义语法
        • 只能定义一个——(全局写法)Vue.filter("过滤器名"，(值)=>{return "返回处理后的值"})
        • 同时定义多个——（局部写法）filters{"过滤器名"，(值)=>{return "返回处理后的值"}}
    • computed计算属性（用于动态赋值）
      • 语法
        • computed:{"计算属性名"(){return "值"}}
        • 完整语法
          • computed{"计算属性名"：{set(){ },get(){return 值}}}
      • 优势
        • 依赖项不变的情况下，会将结果进行缓存，当依赖项改变的时候，会将新的结果进行缓存
    • watch侦听器
      • 用途
        • 侦听data/computed中属性值的改变
      • 语法
        • watch:{被侦听的属性名 (newVal,oldVal){ } }
        • 完整写法
    • 组件component
      • 全局创建
        • 语法
          • import 自定义命名 from '文件地址'
          • Vue.component("准备应用到文件中的名字"，上一步的自定义命名)
        • 使用方法
          • 在vue文件中将准备应用到文件中的名字作为元素标签使用
      • 局部创建
        • 语法
          • import 自定义命名 from '文件地址'
          • components{ 准备应用到文件中的名字：上一步的自定义命名 }
        • 使用方法
          • 在vue文件中将准备应用到文件中的名字作为元素标签使用
      • scoped属性
        • style标签上加 属性，保证style的样式只作用于当前页面
      • 组建通信
        • 子组件-props 准备父组件的变量属性
          • 示例写法
            • props：['suibian','suiji']
            • props:{ background:String,color:{ type:String , default:"#fff",required:true , validator(value){ } //自定义校验规则 }} 控制传入的值的数据类型,默认值和是否必选项
        • props是只读属性，对其修改不会改变父亲的值
        • 自定义事件
          • 让子组件可以修改父组件中的数据
          • 语法
            • 在父组件中的子组件上绑定自定义事件
            • @自定义事件名="父组件中的函数方法名"
            • 在子组件中进行触发
              • this.$emit("自定义事件名"，参数)
        • EventBus跨组件通信
          • 新建空白js文件，import方法导入vue，export default new Vue()导出实例化的vue文件
          • 接收方用eventBus.$on（）
          • 发送方用eventBus.$emit（）
    • 生命周期
      • 从创建到销毁
        • eg：new Vue（）
      • 钩子函数
        • 四个阶段八个方法
          • 新增两个
            • activated——组建激活时触发
            • deactivated———组建失去激活状态时触发
    • this.$refs获取原声DOM
      • 语法
        • 标签上挂载ref属性
        • this.$refs.属性名获取
    • this.$nextTick(()=>{ })DOM更新后触发参数中的函数体
    • 创建全局Vue属性
      • Vue.prototype.$axios = axios
    • 动态dynamic组建
      • 在data中声明变量a接受组建名
      • 在templete中用控制要显示哪个组建结构
      • 会创建和销毁隐藏的组建，和v-if一样
      • 组建缓存
        • 在外用包裹
    • slot标签，组建插槽（实现内容分发）
      • 在组建内用slot标签进行占位,占位标签中间的内容为默认内容
        • 默认插值内容
      • 在父组建调用组建标签的位置，插入标签内容
      • 具名插槽 （给slot添加name属性）
        • 父组件在使用时，需要给替换的便签跟标签添加v-slot：name值 属性
          • 简写模式
      • 作用域插槽
        • 目的
          • 使用子组建中的变量来填充slot标签中的内容
        • 语法
          • 子组建使用slot标签，随意声明一个属性名绑定子组建的data数据（:suiji="Vue变量"）
          • 父组建在替换的根标签上使用v-slot="自定义变量名" 在根标签中使用{{自定义变量名.Vue变量}}
            • 这个自定义变量会收集slot上所有的属性和值
    • 自定义指令
      • 语法
        • 全局注册
          • inserted方法只有在初始化的时候执行一次
          • update方法数据更新的时候执行
        • 局部注册
      • 使用方法
        • v-指令名
    • 路由
      • vue-router官方推荐第三方模块包
      • 语法
        • main.js进行全局注册
          • import vuerouter from 'vue-router'
          • Vue.use(vuerouter)
          • const routes = [{ path:'/find'},component:find]
            • 该行为是定义规则
          • const router = new vuerouter({ routes:routes ，mode:"history"})
          • new Vue ({ router ,...........})
          • 页面组件进行使用
              • 根据地址不同去读取main.js全局注册的path地址，有匹配的返回相应的组件进行替换
            • 发现音乐
        • 进行路由传值
          • 方法一
            • 发现音乐
            • 对应的组件内部，可以直接使用$route.query.参数名
          • 方法二
            • main.js中进行相关配置
              • const routes = [{ path:'/find/:参数名/:参数名'},component:find]
            • 发现音乐
            • 对应的组件内部，可以直接使用$route.params.参数名
      • 路由重定向
        • 在main.js定义规则的时候添加{path:'/',redirect:"/find"}
          • 作用是强制切换跟路径到设置的路径上
      • 路由404
        • 先准备404的页面组件notfond
        • 在规则最后面添加 path:* ,compontent:notfond
        • *是任意字符
      • 路由模式设置
        • 在main.js中 router 实例化对象中添加 mode："history"
      • 编程式导航
        • 利用path更改或name更改，path,name都是main.js规则中自己的配置项
        • this.$router.push({ path:zhi })
        • 传参
          • 语法
            • 如果切换使用的是path方法则不能用params进行传参，name两种方法都可以
            • 接收参数同样使用与之对应的route.query.参数名/route.query.参数名/route.params.参数名
      • 路由嵌套
        • 在main.js的规则中进行配置
      • 路由守卫
        • 在main.js中定义router实例化对象.beforeEach((to,from,next)=>{})
          • next()正常跳转
          • next(false)原地停留
          • next("强制修改到另一个路由路径上")
    • 单页面的弊端
      • 第一次加载要请求所有的资源
      • 不利于seo搜索引擎排名
    • vant移动端组件库
    • vant移动端适配
  • js方法复习
    • 数组翻转(.reverse())
    • 字符串转数组(.split())
    • 数组转字符串(.join())
    • 数组截取(slice())
    • 数组尾部添加(push())
    • 数组尾部删除(pop())
    • 数组头部添加(unshift())
    • 数组头部删除(shift())
    • 数组删除某一个或某几个值(splice())
    • 数组值排序(sort())
    • 数组返回匹配的值的索引(findIndex())
    • 数组求和方法(reduce())
    • 保留两位小数(toFixed())
    • 数组筛选符合条件的数据，返回新数组(filter())
    • 数组中的每个元素是否都符合某个条件(every())
    • 本地储存JSON字符串问题
      • JSON.parse 转化为对象或数组等格式
      • JSON.stringify转化为JSON字符串
    • 数组累加方法(reduce())
    • DOM获取焦点方法focus()
    • input自动获取焦点属性 autofocus
    • 失去焦点事件 blur
    • 查找数组中是否有符合条件的值（indexOf()）
    • input表单输入内容改变实时监控（input（）)
    • input表单输入内容改变失去焦点监控（change（）)
  • axios数据库发生ajax交换
    • axios.defaults.baseURL配置全局根路径

Vue脚手架

  • @vue/cli全局模块包
    • yarn global add @vue/cli全局安装脚手架
    • vue -V查看版本
  • 脚手架创建项目
    • vue create vuecli-demo(文件夹名称) 创建项目
    • 选择模版和包管理
    • 切换至项目文件夹
    • 运行yarn serve
    • 目录和代码分析
    • 项目架构了解
      • 入口main.js解读
  • @vue/cli自定义配置
    • 创建vue.config.js进行配置
      • devServer
        • open true自动打开浏览器
        • port 修改浏览器端口
  • eslint代码检查
    • 实例
    • 处理方法
      • 方法1：手动解决错误
      • 方法2:暂时关闭eslint检查
        • vue.config.js中添加lintOnsave:false 关闭eslint检查
  • 单vue文件 （独立作用域不再担心变量重名问题）
    • 简介
    • template标签中只能有一个根标签
      • 根标签意思为最外层标签
    • style 中的 scoped属性
      • 保证样式只针对当前的template内标签生效
avatar
文章
阅读
粉丝