vue01

vue01 基础API

Vue

是一套构建用户页面的渐进式框架
Vue被设计为可以自底向上逐层应用

渐进式思想

一层一层、一步步来做的事情

声明式渲染
组件系统
路由vue-router
大规模状态管理vuex
构建系统
- vue-cli
- vue-test-utils

使用-创建 hello world

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>  // 视图
    <script>
      new Vue({                 // model
        el: "#app",  //作用域，挂载到根节点
        data: {
          msg: "Hello,World",
        },
      });
    </script>
  </body>
</html>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统(声明式渲染)

模板
数据

插值

文本{{文本插值}}
attribute v-bind
使用 js 表达式

v-bind （`v-bind` 对应的缩写为：`:`

绑定数据到指定的属性名上

<div :id="myId"></div>

事件处理

v-on （缩写：@
指令修饰符

<组件 @函数名.修饰符1.修饰符2="值" />

.lazy
取代 input 监听 change 事件
.number
输入字符串转为有效的数字
.trim
输入首尾空格过滤
.once
只生效一次
.prevent
阻止表单提交

计算属性computed

可读性

可缓存：依赖于其他属性，所依赖属性不变计算属性也不变

        computed: {
          reverseMsg() {
            // 缓存
            console.log("222");
            return this.msg.split("").reverse().join("");
          },
        },

多对一：一个计算属性依赖于多个依赖属性

watch

数据变化时发起异步请求/开销较大的操作时

一对多：更新多个值
deep深侦听
immediate立即执行

 watch: {
          msg: {
            handler(newValue, oldValue) {
              console.log(newValue, oldValue);
              // 更新多个值
              this.msg1 = newValue + ":msg1";
              this.msg2 = newValue + ":msg2";
              this.msg3 = newValue + ":msg3";
             // 请求后端接口，获取数据
              axios("test").then((res) => {
                console.log(res);
              });
            },
            immediate: true,
          },
          "info": {
            handler(newValue, oldValue) {
              console.log(newValue, oldValue);
            },
            deep: true,
          },

条件渲染

v-if
- v-else-if
- v-else
v-show
- 基于 CSS 进行控制display
v-if vs v-show
- v-show 基于 CSS 进行控制display；有更高的初始渲染开销。适用于非常频繁地切换，
- v-if` 也是惰性的：条件第一次变为真时才会开始渲染条件块。用于不频繁地切换

列表渲染

v-for

遍历数组 v-for="(Val,key) in list"
遍历对象 v-for="(Val,key,index) in list"
- 2个参数(Val,key)
- 3个参数(val,key,index)
key :key="index"
- 复用
- diff 算法优化:加速节点对比
v-for 和 v-if 结合筛选数据

class（推荐使用

数组写法：

<div :class="['box1', 'box2']"></div>

对象写法：

<div :class="{'box1': isActive, 'box2': false}"></div>

style

对象形式：

<div :style=" {width: '100px', height: '100px', background: 'green' }"></div>

数组形式 :

<div :style="[style1, style2]"></div>

表单输入绑定

v-model双向数据绑定

<input type="text" v-model="title" />

原理

只是语法糖,不是双向数据流哦)

  <input type="text" @input="handleInput" :value="content" />

 app = new Vue({
        el: "#app",
        data: {
          content: "test",
          isCheck: false,
        },
        methods: {
          handleInput(e) {
            this.content = e.target.value;
          },
        },
      });

posted @ 2021-11-09 19:14 忘川酒阅读(32) 评论(0) 收藏举报

刷新页面返回顶部