Vue从入门到精通

原创

于 2024-09-30 09:25:20 发布 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #flutter #前端

1.1Vue:

Vue.js，常简称Vue，是一种专注于用户界面构造的渐进式JavaScript框架。其核心设计哲学围绕着通过一个精炼的API来实现数据的自动响应更新与视图组件的灵活组合，从而极大地提升了开发效率与代码的可维护性。Vue被构想为一个自下而上、层层递进的应用架构体系，这不仅确保了开发者能够平滑地学习曲线并快速上手，同时还赋予了框架足够的深度与弹性，以应对包括高度复杂的单页面应用程序（SPA）在内的广泛应用场景，满足现代前端开发的多元化需求。

核心特点

响应式数据绑定：Vue的核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。Vue.js的响应式系统允许数据模型（JavaScript对象）和DOM之间的双向绑定。当数据变化时，视图会自动更新；当视图中的用户输入被修改时，数据也会相应更新。

组件系统：Vue.js鼓励通过可复用的组件来构建用户界面。每个Vue组件都包含了自己的模板、逻辑和样式，它们是Vue应用的基本构建块。

指令（Directives）：Vue.js使用特殊的HTML属性（指令）来扩展HTML的功能。例如，v-bind用于响应式地更新HTML属性，v-model用于在表单输入和应用状态之间创建双向数据绑定。

虚拟DOM：Vue.js使用虚拟DOM来优化DOM操作。Vue.js在内存中以JavaScript数据结构的形式维护了一个真实DOM的抽象表示（即虚拟DOM）。只有当它检测到数据变化时，Vue.js才会智能地更新实际DOM，以最小化DOM操作的数量和范围，从而提高性能。

易于学习：Vue.js的设计考虑了易于上手和易用性。即便是初学者也能很快掌握Vue.js的基本概念和构建简单应用的能力。

生态系统：Vue.js拥有一个活跃的社区和丰富的生态系统，包括Vue CLI（官方脚手架工具）、Vue Router（官方路由管理器）、Vuex（状态管理模式库）等，这些工具和库极大地简化了Vue应用的开发和维护。

使用场景

Vue.js非常适合用于构建单页应用（SPA），但也可以轻松整合到现有项目中以增加交互性。由于Vue.js的灵活性和轻量级，它也被广泛用于Web开发的各种场景，包括但不限于：

动态网站和Web应用

渐进式增强现有应用

单页应用（SPA）

复杂的前端项目

总结

Vue.js是一个功能强大、易于上手且灵活的前端框架，它通过简洁的API和强大的生态系统，为开发者提供了构建现代Web应用所需的一切。无论是小型项目还是大型应用，Vue.js都能提供高效、可维护和可扩展的解决方案。

npm install
npm run serve

工程目录：

2.1声明式渲染：

 // template即模版的意思，每一个vue文件里必须要有一个，在这里写HTML代码
    <template>
    <div id="app"></div>
    </template>

    // 在这里写js逻辑相关的代码
    <script>
    export default {
    name: "app"
  };
</script>

  // 这里写样式代码
  <style></style>

Vue由三部分组成：template,script,style:他们分别对应HTML,JS,CSS.

template中通常只有一个块元素，通常情况下都是div.

差值表达式：—》两层大括号

渲染一串文字：

<template>
  <h2>{
  
  {title}}</h2>//tem部分确定插值表达式
</template>

<script>//在script中定义字符串变量
  // export default是固定格式，不需要纠结
  export default {
    // 模块的名字
    name: "app",,
    // 页面中数据存放的地方
    data() {
      return {
        title: "优课达--学的比别人好一点"
      };
    }
  };
</script>

<!-- scope的意思表示这段样式只在本xxx.vue文件中生效，其他xxx.vue文件中不会生效，有锁定的意思 -->
<style scope>
  h2 {
    color: deeppink;
    border: 1px solid #cccccc;
  }
</style>

数组：

HTml代码和之前的写法是一样的，填充数据的时候可以吃用数组下标的形式去取数据。

<h2 class="title">{
  
  {title}}</h2>
<ul class="list">
  <li>{
  
  {todoList[0]}}</li>
  <li>{
  
  {todoList[1]}}</li>
  <li>{
  
  {todoList[2]}}</li>
  <li>{
  
  {todoList[3]}}</li>
  <li>{
  
  {todoList[4]}}</li>
</ul>
//然后在script中定义数组 
  <script>
export default {
  name: "app",
  data() {
    return {
      title: "今日待完成事项",
      todoList: [
        "完成HTML标签学习",
        "完成CSS文字样式学习",
        "完成CSS盒模型学习",
        "完成Flex布局学习",
        "完成JavaScript入门学习"
      ]
    };
  }
};
</script>
  //修改一下样式CSS
<style lang="scss" scope>
  .title {
    box-sizing: border-box;
    width: 300px;
    height: 30px;
    margin: 0;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: white;
    background: #fd6821;
    border-radius: 6px;
  }
  .list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 15px;
    li {
      box-sizing: border-box;
      width: 300px;
      height: 30px;
      padding: 0 20px;
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 30px;
      background: #8d999d;
      color: white;
      border-radius: 5px;
    }
  }
</style>

注意：data,scope:

data:方法里面是用来存放数据或者全局变量

scope:将css代码锁定在本文件中，只能在本文件中有用。

差值表达式-对象

渲染一个班级名单列表：

<script>
export default {
  name: "app",
  data(){
      return {
          list:[
              {
                  name:"张三",
                  grade:"三年级二班",
                  mark:290
              },
              {
                  name:"李四",
                  grade:"三年级二班",
                  mark:270
              },
              {
                  name:"王五",
                  grade:"三年级二班",
                  mark:270
              }
          ]
      }
  }
};
</script>

2.2处理用户输入

v-model(双向绑定)–input

双向绑定：两个输入框

上面的框的内容改变的时候下面的框的内容跟随改变。

用法：

<template>
  <p class="page">{
  
  {message}}</p>
  <input type="text" v-model="message" placeholder="请输入你想输入的内容" />
</template>
<script>
export default {
    name: "app",
    data() {
        return {
            message: ""
        };
    }
};
</script>
<textarea v-model="message" placeholder="请在输入框内输入...">

双向绑定+复选框：

示例：

<div class="food">
  <div class="check-box">
    <input type="checkbox" value="新奥尔良鸡腿堡" v-model="checkedGoods" />
  </div>
  <div class="food-name">新奥尔良鸡腿堡</div>
  <div class="food-price">￥24</div>
</div>
<script>
  
export default {
    name: "app",
    data() {
        return {
            checkedGoods: []
        };
    }
};
</script>

2.3处理用户事件

v-on事件绑定：

第一步：给元素添加点击事件

<button v-on:click="add">按钮</button>
//这样就给按钮注册了一个点击的事件
当点击该按钮的时候就会驱动add方法

简写：Vue为了方便用户开发，每个指令都有一个简写的模式

v-on的简写就是@符号

<button @click="add">按钮</button>

methods（方法）

第二步：给点击事件添加方法

抽离方法

将js代码中的方法写在vue中的规定位置

let alertFn = function () {
  alert("Hello World");
};

document.getElementById("btn").addEventListener("click", alertFn);

认识方法的书写位置

<script>
export default{
    name:"app",
    methods:{
        // 在这里存放方法
    }
}
</script>

将抽离的方法放在对应的位置

存放方法的形式的键值对key:value的形式key就是方法名。

value就是方法体

<script>
export default{
    name:"app",
    methods:{
        alertFn:function(){
            alert("Hello World");
        }
    }
}
</script>

案例：

点击按钮数字+1；

<template>
  <p>{
  
  { counter }}</p>
  <button @click="add">点击</button>
</template>
<script>
export default {
     
     
    name: "app",
    data() {
     
     
        return {
     
     
            // 初始次数
            counter:0
        };
    },
    methods:{
     
     
        add:function(){
     
     
            // 这里的this指向当前的vue实例
            this.counter++
        }
    }
};
</script>
//this纸箱的是当前vue的实例，用在data定义的变量就必须在变量面前加this

<button @click="add">点击</button>
<!-- 等同于 -->
<button @click="add()">点击</button>

<!-- 当你的方法需要接收参数的时候，你可以将参数写在这个括号内 -->
<button @click="add(number)">点击</button

事件修饰符：

阻止冒泡事件

<div @click.stop="fn2"></div>

捕获事件

<div class="div2" @click.capture="fn2"></div>

阻止默认事件

<div class="div2" @click.prevent="fn2"></div

最低0.47元/天解锁文章

200万优质内容无限畅学