vue学习day01-day02

Paitmmer
105 阅读7分钟

vue-day01

MVC 和 MVVM 的区别

  • MVC: 针对后端的分层方式

  - model 数据连接层

  - view 视图层 .html .jsp ...

  - controller 控制层

    - router 路由分发

    - service 业务逻辑处理

  - ps: mvc 的数据流式单向

  • MVVM: 针对前端的分层方式，可以理解为在 MVC，V 层的基础上进一步划分 3 层

  - model 数据模型（后端网络请求得到的数据或者是自己写的死数据）

  - view 视图层 指定 model 的渲染区域

  - view model 管理 model 和 view 对数据的 存、取操作

  • MVP

vue 的模板语法

  • 渲染数据

{{msg}}

  • 数字计算

{{1+1}}

  • 解析函数

{{getData()}}

  • 三元运算

{{flag?'显示'：'隐藏''}}

指令

渲染数据

  • 插值表达式

  {{}}

  • v-html

  • v-text

  • v-pre

v-html、v-text、插值表达式有什么区别

  • 插值表达式 和 v-text 都是原样输出数据

  • v-html 先解析 html 元素再进行渲染

如何解决插值表达式的页面闪烁问题

  • 方式 1： 使用 v-text 代替 插值表达式

  • 方式 2： 使用 v-cloak 配置显示隐藏的样式

属性绑定

基本使用

  • string

  v-bind:属性名称 = "属性值" 简写 :属性名称 = "属性值"

  • object

  v-bind:属性名称 = "obj.属性值"

  v-bind="obj"

class 样式绑定

  • 普通数组

  :class="['class1','class2','class3']"

  • 数组三元

 

  :class="['class1','class2',flag?'class3':'']"

  • 数组对象

 

  :class="['class1','class2',{class3:flag}]"

  • 普通对象  

  :class="{class1:true,class2:true,class3:true}"

  :class="objStyle"

style 样式绑定

  • object

  :style="obj"

  • array

  :style="[obj1,obj2]"

v-model 双向数据绑定

  • 数据流

  - 单向数据绑定： model 改变，view 跟着改变，不能反过来

  - 双向数据绑定： model 改变，view 跟着改变，反之亦然

  • 小结

  v-model 是 vue 中唯一一个可以使用双向数据绑定的指令，可以使用在表单和组件

  v-model 的原理

  1. 使用 v-bind 绑定数据

  2. 使用 v-on 绑定监听的函数如果数据发生改变重新赋值最新的数据

使用 js 模拟 vue 的双向数据绑定

事件绑定

v-on:事件类型="事件处理函数" 简写 @事件类型="事件处理函数"

修饰符

  • 事件修饰符

  stop 阻止冒泡

  prevent 阻止默认行为

  once 只阻止一次,跟随其他修饰符一起使用

  • 按键修饰符

  enter

列表渲染

基本使用

v-for="(item,index) in 数据"

  • arr

  • arrObj

  • obj

     <div v-for="(value,key,index) in obj"></div>

  • 数字

  <div v-for="(count,index) in obj"></div>
  <!-- count 的数值从 1 开始到指定的数据 -->

v-for 为什么跟随 key 一起使用

key 可以是唯一的 string/number

key 建议不要使用 index 配置，因为 index 在使用 unshift 的时候不断的修改

  • 给指定的标签添加唯一的标识，防止页面在重新绘制的时候发生错乱

  • 确保 model 的值和 view 的值保持一致

... Diff 算法

条件渲染

v-if/v-else-if/v-else/v-show

v-if 和 v-show 的区别

  • v-if: 通过 js 操作 DOM 元素的添加和删除

  • v-show: 通过 css 控制元素的显示和隐藏

v-if和v-for的优先级

当 v-for 和 v-if 出现在同一级时

在vue 2.x 语法中 v-for 的优先级更高，如果同时出现在同级每次渲染都会先执行循环再判断条件，由此可见对性能损耗比较大，可使用计算属性先筛选需要的数据

在vue 3.x 语法中 v-if 的优先级更高，因为 v-if 优先级高了，这意味着 v-if 将没有权限访问 v-for 里的变量，抛出错误

cn.vuejs.org/guide/essen…

使用场景

  • v-if: 逻辑判断或者是少量的 DOM 操作

  • v-show: 用于频繁的点击操作

vue-day02

vue2中的生命周期

生命周期的4个阶段  

  创建  

  beforeCreate  

        console.group("------beforeCreate创建前状态------");

        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined

        console.log("%c%s", "color:red", "data   : " + this.$data); //undefined

  created  

        console.group("------created创建完毕状态------");

        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined

        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化

        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

      一般用于发送网络请求  

  挂载  

  beforeMounte  

        console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化

        console.log(this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化

        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

  mounted  

        console.group("------mounted 挂载结束状态------");

        console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化

        console.log(this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化

        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

   

      这个时候DOM元素已经挂载完毕了可以实现一些 DOM操作

  更新  

  beforeUpdate  

  updated

  销毁  

beforeDistroy

一般在这里清楚定时器,释放引用变量

 destroyed

模拟数据

mock 数据  

  线上模拟数据  

 

    fastmock

  本地模拟数据

    json-server

  1. 安装json-server 到全局环境  

          npm i json-server -g  

  2. 创建data.json 文件  

  3. 通过命名元素 data.json 文件生成后端的接口

      json-server ./data.json  

      --watch 实时监听文件变化  

      --port 设置端口号， 默认为3000  

      --host 设置ip，默认为localhost       json-server --watch --host 10.41.151.1 --port 8888 ./data.json

 4. 常用的接口  

    请求所有的资源

      get http://localhost:8888/users

    根据id请求资源  

  get http://localhost:8888/users/:id

   添加资源  

       post http://localhost:8888/users

根据id更新资源

       put、patch http://localhost:8888/users/:id

put 会覆盖资源

patch 只更新指定的资源

根据id删除资源

    delete http://localhost:8888/users/:id

分页查询数据  

get http://localhost:8888/users?_page=1&_limit=2

模糊查询  

  get http://localhost:8888/users?q=关键词

axios

      // 设置根路径
      axios.defaults.baseURL = "http://localhost:8888";
      // const request = axios.create({
      //   baseURL: "http://localhost:8888",
      // });
      // 请求拦截
      axios.interceptors.request.use(
        function (config) {
          // console.log(config);
          // Do something before request is sent
          config.headers["Authorization"] = "FLSJFLSJFLUORSR";
          return config;
        },
        function (error) {
          // Do something with request error
          return Promise.reject(error);
        }
      );
      axios.interceptors.response.use(
        function (response) {
          // Any status code that lie within the range of 2xx cause this function to trigger
          // Do something with response data
          // console.log(response);
          if (response.status === 200) {
            console.log("请求成功");
          }
          return response;
        },
        function (error) {
          // Any status codes that falls outside the range of 2xx cause this function to trigger
          // Do something with response error
          return Promise.reject(error);
        }
      );
axios({
              method: "post",
              url: "/users",
              data: {
                name: "ls",
                age: 18,
                sex: "男",
                ctime: Date.now(),
              },
            }).then((res) => {
              console.log(res);
            })

中文文档 www.axios-js.com/zh-cn/docs/…

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

全局过滤器

定义在全局的过滤在管理的区域内都可以使用

Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

组件内的过滤器

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

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

当全局过滤器和组件内的过滤器名字重合时会采用局部的过滤器

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指

全局定义

Vue.directive("focus", {
        bind(el) {
          // 当做样式操作的时候使用bind
          el.style.color = "red";
        },
        inserted(el) {
          // 当做一些DOM操作的时候使用 inserted
          el.focus();
        },
      });

组件内定义

    directives: {
          focus: {
            bind(el) {
              // 当做样式操作的时候使用bind
              el.style.color = "red";
            },
            inserted(el) {
              // 当做一些DOM操作的时候使用 inserted
              el.focus();
            },
          },
        },

动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库，如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
.ms-enter, .ms-leave-to {
        transform: translateX(300px);
        opacity: 0;
      }
      .ms-enter-active,
      .ms-leave-active {
       transition: all 0.5s ease;
      }

      <transition name="ms">
        <div v-show="isShow">显示隐藏</div>
      </transition>

transition 是vue提供的动画组件, name 设置使用的指定动画 ，如果不指定默认使用 .v- 的动画 为了防止使用上的错误，建议在定义样式的时候配置 name.

使用animate.css

<transition

        enter-active-class="fadeInRight"
        leave-active-class="fadeOutRight"
        :duration="{enter: 800, leave: 300}"
      >
       <div v-show="isShow" class="animated">显示隐藏</div>
 </transition>

enter-active-class 设置进入的动画

leave-active-lass 设置离开的动画

animated 动画的基础样式  

duration  

string  

duration="800"  统一设置进入和离开的时间

obj  

:duration="{enter: 800, leave: 300}" 分开设置进入和离开的时间

avatar
文章
阅读
粉丝