Vue基础语法知识

最新推荐文章于 2024-10-10 00:20:44 发布

原创最新推荐文章于 2024-10-10 00:20:44 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue的基本概念，包括其渐进式特性和在Webpack环境下的使用。涵盖了Vue脚手架的搭建、Vue文件结构、指令（v-model、v-bind等）、模板语法、事件处理和修饰符，以及v-for遍历的使用。

1Vue基本概念

下面给出两张图进行简单对比
在这里插入图片描述

由此可以感受到Vue的方便快捷。简而言之，Vue是渐进式JS框架，一套拥有自己规则的语法，链接如下

https://cn.vuejs.org/

Vue里的渐进式，可能现在看不懂这个图，但是在我们大致了解Vue的整体框架后，反过头来就非常容易理解。渐进式就是逐渐使用，集成更多的功能。库是方法的集合，而框架是一套拥有自己规则的语法
在这里插入图片描述
而在如今，我们通常是在webpack环境中开发Vue，因此我下面的所有代码，都是基于Webpack进行演练，关于Webpack我在另外一篇文章有所讲述。

2Vue脚手架

@vue/cli是vue官网提供的一个全局模块包，此包用于创建脚手架项目，脚手架是为了保证施工过程顺利进行而搭设的工作平台。
使用vue create vuecli-demo命令创建项目，并且规定项目名不能有大写字母，中文和特殊符号。然后根据自己需要，选择其他选项配置。然后通过yarn serve启动本地热更新开发服务器。如下图为脚手架中目录和代码分析
在这里插入图片描述
其中main.js作为入口，App.vue作为根组件，其中Helloworld.vue作为其中一个组件。

在以前的webpack中，我们修改端口号是通过webpack.config.js文件进行配置，但是在Vue中我们使用vue.config.js配置端口号

module.exports = {
    // ...其他配置
    lintOnSave: false, // 关闭eslint检查
    devServer: {
        port: 3000,
        open: true
    }
}

需要注意的是我们可以借助eslint进行代码检查，如果我们在main.js随便定义变量，就会报错。这个检查有助于我们的后期学习。当然我们可以通过上述配置关闭检查。

下面我们就单Vue文件进行一个简要的讲述
在这里插入图片描述

推荐采用.vue的文件来开发项目
template里只能有一个跟标签
vue文件是独立模块，作用域是互不影响的
style配合scoped属性，保证样式只针对当前template内标签生效
vue文件配合webpack，把他们打包起来插入的index.html中

3Vue指令

在学习指令之前，我们需要了解Vue的MVVM设计模式，设计模式是一套被反复使用的，多数人知晓的，经过分类编目的，代码设计经验的总结。而MVVM是模型和视图双向关联的一种设计模式。它的好处在于减少DOM操作，提高开发效率。
在这里插入图片描述

下面来介绍一些Vue的基本指令

插值表达式，在DOM标签中，直接插入vue数据变量。又称为声明式渲染/文本插值

<!-- <vue 根据提示回车即可出现如下结构 -->
<template>
  <div>
    <!-- 2. 把值赋予到标签 -->
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age >= 18 ? '成年了' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  // 1. 变量在data函数return的对象上
  data(){
    return {
      msg: 'Hello, Vue',
      obj: {
        name: '小vue',
        age: 5
      }
    }
  }
}
</script>

<style>

</style>

给标签绑定动态属性。以v-开头的标签属性，叫做指令，常见的有v-bind v-on v-model v-text v-html v-show v-if v-else和v-for

<template>
  <div>
    <!-- 2. 值 -> 标签原生属性上 -->
    <!-- 语法: v-bind:原生属性名="vue变量" -->
    <a v-bind:href="url">点击去百度</a>
    <!-- 语法: :原生属性名="vue变量" -->
    <img :src="imgUrl" />
    <img :src="localImg">
  </div>
</template>

<script>
import imgObj from './assets/1.gif' // 唯独js需要导入图片文件(css/标签里可以直接使用图片地址)
export default {
  // 1. 准备变量
  data(){
    return {
      url: 'http://www.baidu.com',
      imgUrl: "http:/Images/20210412/60741c11ab77b.jpg",
      localImg: imgObj
    }
  }
}
</script>

<style>

</style>

事件绑定

<template>
  <div>
    <p>你要购买商品的数量: {{ count }}</p>
    <!-- 1. 绑定事件
     语法: v-on:事件名="少量代码"
     语法: v-on:事件名="methods里函数名"
     语法: v-on:事件名="methods里函数名(值)"
     语法: @事件名="methods里函数名"
     -->
    <button v-on:click="count = count + 1">+1</button>
    <button v-on:click="addFn">+1</button>
    <button v-on:click="addCountFn(5)">+5</button>
    <button @click="subFn">减少1</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      count: 1
    }
  },
  // 2. 定义函数
  methods: {
    addFn(){ // this代表export default后{}对象
    //data和methods里的属性都直接挂在它身上
      this.count++
    },
    addCountFn(num){
      this.count = this.count + num
    },
    subFn(){
      this.count--
    }
  }
}
</script>

<style>

</style>

事件对象 Vue在处理事件函数时，如果无形参，那么直接在形参接受。如果有形参，则手动传入$event对象。如下代码所示

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">百度</a>
    <hr />
    <a @click="two(10, $event)" href="http://www.taobao.com">淘宝</a>
  </div>
</template>

<script>
export default {
  methods: {
    // 1. 事件触发, 无传值, 可以直接获取事件对象是
    one(e){
      e.preventDefault()
    },
    // 2. 事件触发, 传值, 需要手动传入$event
    two(num, e){
      e.preventDefault()
    }
  }
};
</script>
<style>
</style>

事件修饰符

<template>
  <div>
    <div @click="fatherFn">
      <p @click.stop="oneFn">.stop - 阻止事件冒泡</p>
      <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>
      <p @click.once="twoFn">点击观察事件处理函数执行几次</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("fahter-触发click事件");
    },
    oneFn(){
      console.log("p标签点击了");
    },
    twoFn(){
      console.log("p标签被点击了");
    }
  }
}
</script>

<style>

</style>

键盘修饰符用于判断用户是否按下回车键

<template>
  <div>
    <!-- 1. 绑定键盘按下事件.enter-回车 -->
    <input type="text" @keydown.enter="enterFn">
    <!-- 2. .esc修饰符 - 取消键 -->
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
  methods: {
    enterFn(){
      console.log("用户按下的回车");
    },
    escFn(){
      console.log("用户按下esc键");
    }
  }
}
</script>

<style>

</style>

翻转字符串功能实现最简单的字符串翻转，每点击一次按钮，字符串翻转一次。核心思路是如何书写翻转函数，我们可以通过split从字符串变成数组，再通过数组的翻转方法，得到翻转后的结果，在将数组拼接起来。

<template>
  <div>
    <!-- 1. 变量准备-静态页面铺设 -->
    <h1>{{ msg }}</h1>
    <!-- 2. 绑定点击事件 -->
    <button @click="btn">逆转世界</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "Hello, World"
    }
  },
  methods: {
    btn(){
      // // 3. 截取字符串返回数组
      // let arr = this.msg.split("")
      // // 4. 翻转
      // arr.reverse()
      // // 5. 数组拼接起来
      // this.msg = arr.join("")

      // 简化
      this.msg = this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>

v-model基本使用暂时只能用在表单标签上，主要作用是把vue的数据变量和表单的value属性双向绑定在一起

input标签有很多类型，也就是type，以下是一些常用type的说明
text：文本框，input默认的type，不写就是这个，value表示文本框里的值。
password：密码框，value表示密码框里的值。
submit：提交按钮，value表示按钮上的文字
button：普通按钮，value表示按钮上的文字
reset：重置按钮，value表示按钮上的文字
radio：单选框，value表示该单选框的真实值（一般真实值和数据库对应，显示的值给用户参考的）
checkbox：复选框，value表示该复选框的真实值

<template>
  <div>
    <div>
      <span>用户名:</span>
      <!-- 1. v-model
         双向数据绑定
         value属性 - vue变量
       -->
      <input type="text" v-model="username">
    </div>
    <div>
      <span>密码: </span>
      <input type="password" v-model="pass">
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      username: "",
      pass: ""
    }
  }
}
</script>

<style>

</style>

此时在input框中输入的值会自动同步到vue的相关变量中，实现数据的双向绑定。

v-model更多用法

<template>
  <div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="抽烟">抽烟
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      from: "",
      hobby: [],
      gender: "男",
      intro: ""
    }
  }
}
</script>

<style>

</style>

v-model修饰符简要介绍三个修饰符number trim和lazy

<template>
  <div>
    <div>
      <span>年龄</span>
      <!-- .number修饰符-把值parseFloat转数值再赋予给v-model对应的变量 -->
      <input type="text" v-model.number="age">
    </div>
    <div>
      <!-- .trim修饰 - 去除首尾两边空格 -->
      <span>人生格言</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <!-- .lazy修饰符 - 失去焦点内容改变时(onchange事件),
       把内容同步给v-model的变量 -->
      <span>个人简介</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      age: 0,
      motto: "",
      intro: ""
    }
  }
}
</script>

<style>

</style>

v-text/v-html的区别前者会把值当成普通字符串显示，后者会把值当成标签进行解析显示。并且他们有一个共同点，他们都会覆盖插值表达式，比如p标签原来有内容，但是加了v-html属性后，原来内容就会被覆盖掉

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str">{{ 10 + 20 }}</p>
    <!-- 注意: v-text或v-html会覆盖插值表达式 -->
  </div>
</template>

<script>
export default {
  data(){
    return {
      str: "<span>我是一个span</span>"
    }
  }
}
</script>

<style>

</style>

v-if/v-show的区别 true为显示,false为隐藏，前者是从DOM树上移除，并且可以配合v-else和v-else-if来使用，后者是用css方式隐藏标签也就是display:none

<template>
  <div>
    <!-- v-show 或者 v-if
       v-show="vue变量"
       v-if="vue变量"
     -->
    <h1 v-show="isShow">我是h1</h1>
    <h2 v-if="isOk">我是h2</h2>
    <!-- 
      v-show隐藏: 采用display:none   // 频繁切换
      v-if隐藏:   采用从DOM树直接移除 // 移除
     -->

     <!-- v-if和v-else使用 -->
     <p v-if="age >= 18">成年了</p>
     <p v-else>未成年</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isShow: false,
      isOk: false,
      age: 2
    }
  }
}
</script>

<style>

</style>

折叠面板默认是显示，按钮显示的是收起。当我们点击收起按钮后，下面的内容会进行隐藏，并且收起文字变为展开文字。

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <!-- 1.绑定点击事件 -->
        <span class="btn" @click="btn">
          <!-- 4. 根据isShow的值显示不同文字 -->
          {{ isShow ? '收起' : '展开'}}
        </span>
      </div>
      <!-- 2. v-show配合变量来控制标签隐藏出现 -->
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    btn(){
      // 3. 点击时, 把值改成false
      this.isShow = !this.isShow
    }
  }
}
</script>

v-for的使用，主要用于遍历数组和对象，其中比较重要的是Key属性如何设置，正确的设置可以简化DOM操作，涉及到_diff算法，我会在下一章去描述。

<template>
  <div>
    <!-- 语法1:
      v-for="(值变量名, 索引变量名) in 目标结构"
      口诀: 想要谁循环就放到谁身上
     -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} ---- {{ index }}
      </li>
    </ul>
    
    <!-- 语法2:
      v-for="值变量名 in 目标结构"
      -->
    <ul>
      <li v-for="obj in stuArr" :key="obj.id">
        <span>{{ obj.name }}</span>
        <span>{{ obj.sex }}</span>
        <span>{{ obj.hobby }}</span>
      </li>
    </ul>
    <!-- 语法3:(了解)
      v-for="(value, key) in 对象"
       -->
    <div>
      <p v-for="(value, key) in tObj" :key="value">
        <span>{{ value }}</span>
        =======
        <span>{{ key }}</span>
      </p>
    </div>
    <!-- 语法4: (了解)
      v-for="变量名 in 固定数字"
      从1开始遍历
     -->
    <div v-for="n in count" :key="n">{{ n }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>

<style>
</style>