Vue基础使用

CHUAIXYu

已于 2022-12-28 09:52:24 修改

阅读量63

点赞数

文章标签： vue.js 前端 javascript 前端框架

于 2022-12-26 22:54:02 首次发布

本文链接：https://blog.csdn.net/chuaixingyu/article/details/128450144

版权

什么是vue.js

vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计
vue的核心库只关注图层（核心：数据驱动视图）
前端三大主流框架：vue.js、Angular.js、React.js
作者：尤雨溪

为什么使用vue.js

提高开发效率
减少DOM操作，更多关注业务逻辑
提高开发效率的发展历程
原生js—jQuery之类的类库—前端模板引擎—Angular.js/Vue.js

框架与库的区别

框架：一套完整的解决方案，对项目的侵入性较大
库（插件）：提供某一个小功能，对项目的侵入性较小

MVC与MVVM的区别

MVC是后端的分层开发概念
MVVM是前端视图层的概念，主要关注于试图从分离

v-text、v-html异同：

相同点：覆盖元素原来的节点
不同点：v-text:不能解析富文本
v-html:可以解析富文本

属性绑定、事件绑定

在这里插入<div id="app">
    <!-- 属性绑定 -->
    <img v-bind:src="imgSrc" alt="">
    <!-- 事件绑定 -->
    <button v-on:click="hit">点我</button>
    <button @click="change">换图</button>
    <!-- 箭头函数的this永远指向父作用域，不能发生改变，要想改变，就改变父作用域的this指向，通过apply/bind/call -->
  </div>代码片

事件修饰符

<div id="app">
    <!-- .stop阻止冒泡 -->
    <header @click="log3">
      <article @click="log2">
        <button @click.stop="log1">点我</button>
      </article>
    </header>

    <!-- .capture添加事件侦听器使用事件捕获模式 -->
    <header @click="log3">
      <article @click.capture="log2">
        <button @click="log1">点我</button>
      </article>
    </header>

    <!-- .seif只当事件在该元素本身出发时出发回调 -->
    <header @click="log3">
      <article @click.self="log2">
        <button @click="log1">点我</button>
      </article>
    </header>

    <!-- .once事件只触发一次 -->
    <header @click.once="log3">
      <article @click="log2">
        <button @click="log1">点我</button>
      </article>
    </header>

    <!-- .prevent阻止默认事件 -->
    <a href="https://www.baidu.com" @click.prevent.once="target">百度一下</a>
  </div>

v-model数据双向绑定

在这里插入代<div id="app">
    <input type="text" :value="value">
    <input type="text" v-model:value="value">
  </div>码片

vue中样式的使用

<div id="app">
    <!-- 三目运算符 -->
    <div :class="flag?'big':'' ">很烦</div>

    <!-- 数组的内置对象 -->
    <div :class="[class1,{'big':false}]">想放假</div>

    <!-- 对象 -->
    <div :class="{'red':false,'italic':true}">头疼</div>
  </div>

内联样式

直接在元素上通过：style的形式，书写样式对象

<div style="color: brown;">廊坊到石家庄高铁开通</div>

将样式对象，定义到data中，直接引用到：style中

<div :style="style1">廊坊到石家庄高铁开通</div>

let vm = new Vue({
    el: '#app',
    data: {
      style1: 'color: brown',
    },
    methods: {
      
    }
  })

在：style中通过数组，引用多个data中的样式对象

<div :style="[style1,style2]">廊坊到石家庄高铁开通</div>

let vm = new Vue({
    el: '#app',
    data: {
      style1: 'color: brown',
      style2: {
        color: 'hotpink',
        fontSize: '30px'
      }
    },
    methods: {

    }
  })

v-for和key属性

v-for

<!-- 遍历数组 -->
      <li v-for="(item,index) in list" :key="index">
        {{item}}...........{{index}}
      </li>

在这里插入代<!-- 遍历对象 -->
      <li v-for="(value,key,index) in obj" ::key="index">
        {{value}}..........{{key}}...........{{index}}
      </li>码片

<!-- 遍历数字 -->
      <li v-for="(item,index) in 3" :key="index">777</li>

key属性

key必须是唯一值，必须是字符串或者数字
key的作用：提高重排效率，就地复用。

v-if和v-show区别

相同点：显示隐藏元素
不同点：v-if是删除DOM元素
v-show通过display：none隐藏元素
应用场景：v-if用于一次显示隐藏
v-show用于多次显示隐藏

<body>
  <div id="app">
    <div v-if=false>qwe</div>
    <div v-show=false>qwe</div>

    <div v-if="score<60">不及格</div>
    <div v-else-if="score<80">良</div>
    <div v-else-if="score<100">优</div>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      score: 77
    },
    methods: {

    }
  })
</script>