vue基础知识总结

最新推荐文章于 2023-11-26 20:22:27 发布

旧城丫

最新推荐文章于 2023-11-26 20:22:27 发布

阅读量155

点赞数 1

文章标签： vue.js css javascript html

本文链接：https://blog.csdn.net/weixin_50558756/article/details/114371551

版权

一.vue与js.区别

1.原生js

<body>
    <input type="text" v-model="msg" id="msg" />
    <br />
    <span></span>
    <script>
      let msg_ele = document.querySelector("#msg");
      let span_ele = document.querySelector("span");
      msg_ele.addEventListener("keyup", () => {
        let that=msg_ele
        span_ele.innerHTML = that.value;
      });
    </script>
  </body>

vue：

<body>
  <div id="app">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>
</html>

2.对比
vue 中不用操作 dom 元素，这可以让开发者将经历集中到数据处理及业务逻辑开发中。
3. vue 的使用方法
（1）创建dom结构，作为vue实例挂载点，vue实例中的所有数据只能在此dom范围内使用

 <div id="app">
 </div>

（2）通过 new Vue 创建 vue 实例
（3）el 属性指定当前 vue 实例的挂载点
（4）data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中通过下面方式访问data中数据

app.msg

（5）可以通过插值表达式使用 data 中的数据

4.数据绑定

所谓属于绑定，就是将 vue 实例中的 data 属性中的变量显示到挂载点(dom结构)中

4.1 内容绑定
将 data 中的数据显示成内容（开始标签与结束标签之间）
使用 {{}}

 <div id="app">
   <p>{{title}}</p>
  </div>

上面只能显示纯文本，如果要显示 html 内容，需要使用 v-html 指令

<p v-html="content"></p>

4.2 属性绑定
将data中的数据作为某个元素的属性的值

使用 v-bind:属性名称指令，属性可以是内置，也可以是自定义的

<p v-bind:id="id">{{title}}</p>

v-bind: 可以缩写为 :

<p v-bind:id="id" :class="title_class">{{title}}</p>

4.3 表单控件的值
可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

（1）text 和 textarea 元素使用 value property 和 input 事件；
（2）checkbox 和 radio 使用 checked property 和 change 事件；
（3）select 字段将 value 作为 prop 并将 change 作为事件。

文本框和文本域

<input type="text" v-model="message">
<textarea v-model="message"  cols="30" rows="10"></textarea>

复选框，v-model 绑定的是 checked 属性

var vm = new Vue({
      el: '#app',
      data: {
        isSwim: true,
        isRead:false,
        isPlay:false
      }
    })

<div id="app">
    <label for="swip">游泳</label>
    <input type="checkbox" id="swim" v-model="isSwim">
    <label for="read">阅读</label>
    <input type="checkbox" id="read" v-model="isRead">
    <label for="play">游戏</label>
    <input type="checkbox" id="play" v-model="isPlay">
  </div>

设置多个单选框的 v-model 为同样的值，就可以省略 name 属性，

选择某个单选框后，此单选框的 vlue 属性值会赋值给 gender 属性，

设置 gender 属性的值为某个单选框的 value 值，此单选框就会默认选中。

5.列表渲染

created 函数会再 vue 实例实例化时执行

<body>
    <div id="app">
      <!-- <p>{{blogs}}</p> -->
      <ul>
        <li v-for="blog in blogs">{{blog}}</li>
      </ul>
      <ul>
        <li v-for="item in books">{{item.title}}--- {{item.author}}</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          blogs: ['今天下雪了', '明天还下雪', '后天就30°了', '外面好冷啊'],
          books: [
            { id: 1, title: '庆余年', author: '忘了' },
            { id: 2, title: '鬼吹灯', author: '天下霸唱' },
            { id: 3, title: '盗墓笔记', author: '南派三叔' },
          ],
        },
      })
    </script>
  </body>

6.条件渲染

可以单独使用 v-if，或者 v-if 和 v-else，或者 v-if 和 v-else-if 搭配使用

v-if在单独使用的时候，与 v-show 的作用是一样的，都是根据变量的值决定是显示还是隐藏当前元素。

<body>
  <div id="app">
    <h1 v-if="isMary">已婚</h1>
    <h1 v-else>未婚</h1>

    <div v-if="type">v-if</div>
    <div v-show="type">v-show</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        isMary: false,
        type: true
      },
    })
  </script>
</body>

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

7.样式处理

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组
7.1 vue操作class
（1）class 与 v-bind:class 可以共存，但是其实最终操作的都是元素的 class 属性
（2）v-bind:class 的值可以是字符串、对象或者数组
（3）v-bind:class 的值如果为对象，如{active:isActive,color:isColor}，则属性名称是 style 中定义的样式类名称，属性值是 data 中定义的变量名称。
7.2 vue操作style

<body>
  <div id="app">
    <p :style="{width:w,height:h,backgroundColor:a}"></p>
    <p :style="obj"></p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        w: '300px',
        h: "200px",
        a: 'lightblue',
        obj: {
          width: '400px',
          height: '100px',
          backgroundColor: 'blue'
        }
      },
    })
  </script>
</body>

8.事件

js 中可以通过 addEventListener 的方式为元素注册各种事件类型

vue 中通过 v-on 指令为元素注册事件监听

<body>
  <div id="app">
    <button v-on:click="greet">按钮</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        name: 'onlifes'
      },
      methods: {
        greet: function () {
          // 事件当中， this 指向的是当前 vue 实例
          console.log(this.name);
          this.name = 'yhb'
        }
      }
    })
  </script>
</body>

9.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

格式化日期事件格式
控制台中修改 create_time 的值测试计算属性，注意不能加上引号

所以，对于任何复杂逻辑，你都应当使用计算属性。

<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>标题</th>
          <th>发表时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in blogList">
          <td>{{item.id}}</td>
          <td>{{item.title}}</td>
          <td>{{formatTime(item.create_time)}}</td>
        </tr>
      </tbody>
    </table>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script>

    let app = new Vue({
      el: '#app',
      data: {
        blogList: [
          { id: 1, title: '今天真的好冷', create_time: 1614665768000 },
          { id: 2, title: '明天气温就回升了', create_time: 1614579284000 },
          { id: 3, title: '春暖花开', create_time: 1583043284000 }
        ]
      },
      // 用户自定义的方法
      methods: {
        formatTime: function (a) {
          return moment(a).format('YYYY-MM-DD HH:mm:ss')
        }
      },
    })
  </script>
</body>

10.侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
在这里插入图片描述

旧城丫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue基础知识总结

一.vue与js.区别1.原生js<body> <input type="text" v-model="msg" id="msg" /> <br /> <span></span> <script> let msg_ele = document.querySelector("#msg"); let span_ele = document.querySelector("span")
复制链接

扫一扫