vue-day01

(ꐦÒ‸Ó)老迷

已于 2023-10-16 20:34:33 修改

阅读量46

点赞数

分类专栏：笔记文章标签： vue.js

于 2023-10-16 20:33:45 首次发布

本文链接：https://blog.csdn.net/m0_71458584/article/details/133868061

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基本概念，包括其作为轻量级框架的原因、MVC与MVVM的区别，以及Vue的代码结构、插值表达式、v-bind/v-on绑定、样式使用、v-for循环和v-if/v-show条件渲染。适合初学者了解和入门。

摘要由CSDN通过智能技术生成

vue-day01

知识点

知识点

什么是vue.js

是⼀套⽤于构建⽤户界⾯的渐进式框架，可以⾃底向上逐层应⽤。Vue 的核⼼库只关注视图层，不仅易于上⼿，还便于与第三⽅库或既有项⽬整合
● 核⼼理念：数据驱动视图，组件化开发
● Vue.js 是前端的主流框架之⼀，和Angular.js、React.js ⼀起，并成为前端三⼤主流框架

为什么学习流行框架

● 轻量级框架：【只关注视图层，是⼀个构建数据的视图集合】
● 简单易学：【国⼈开发，中⽂⽂档，不存在语⾔障碍，易于理解和学习】
● 视图、数据、结构分离：【使数据的更改更为简单】
● 【不需要进⾏逻辑代码的修改，只需要操作数据就能完成相关操作】
● 虚拟DOM：【不再使⽤原⽣的dom操作节点，极⼤解放dom操作】
● 运⾏速度更快:【相⽐较与react⽽⾔，vue存在很⼤的优势】

框架和库的区别

框架
是⼀套完整的解决⽅案；对项⽬的侵⼊性较⼤。
库
提供某⼀个⼩功能，对项⽬的侵⼊性较⼩。

MVC和MVVM区别

在这里插入图片描述

vue.js的代码结构

引⼊vue.js
书写视图层
实例化Vue()

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>vue代码结构</title>
   <!-- 1、引入vue -->
   <script src="./vue-2.4.0.js"></script>
</head>

<body>
   <!-- 2、书写视图层 -->
   <div id="#app">

   </div>
</body>
<script>
   // 3、实例化vue
   let vm = new Vue({
      el: "#app",
      // 存放数据
      data: {

      },
      // 存放方法
      methods: {

      }

   })
</script>

</html>

插值表达式

      <!-- 插值表达式  展示数据 -->
      <span>{{src}}</span>
        data: {
         src: './img/1.jpg',
         }

v-bind/v-on

	  <!-- v-on 元素事件的绑定 -->
      <!-- 简写 @ -->
      <button @click="change">change</button>
      <button @click="start" :disabled="isdisabled">开始</button>
      <button @click="end" :disabled="!isdisabled">结束</button>
      <p>{{msg}}</p>
      <div>
         <!-- v-bind 元素的属性绑定 -->
         <!-- 简写 : -->
         <img :src="src" alt="">
      </div>

vue中样式的使用

1、使⽤class样式
2、三⽬表达式
3、直接通过对象：对象的键是样式的名字（样式类名），值是Boolean类型
4、数组内置对象

v-for

	  <!-- 遍历数组 -->
      <!-- item：数组的每⼀项 index：数组的索引（索引从0开始） -->
      <div v-for="(item,index) in list">{{item}}</div>
      <!-- 遍历对象 -->
      <!-- value：值 key：键 index：索引 -->
      <div v-for="(value,key,index) in obj">{{key}}==>{{value}}</div>
      <!-- 遍历数字   n次 -->
      <!-- 索引从1开始 in 后的值为重复的遍数   文本值为重复内容  -->
      <div v-for="num in 5">10</div>