vue学习笔记(1): 大前端预备知识及vue基本语法的使用

最新推荐文章于 2024-11-07 09:58:36 发布
最新推荐文章于 2024-11-07 09:58:36 发布
阅读量1k 收藏 1
点赞数 1
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43815869/article/details/118102671
版权

vue学习笔记(1): 大前端预备知识及vue基本语法的使用

前言：本文属于博主个人观看黑马程序员vue入门课程的学习笔记，博主也是小白。如果有不对的地方希望各位帮忙指出。本文主要还是我的学习总结，因为网上的一些知识分布比较零散故作整理叙述。如果有不对的地方，还请帮忙指正。本文不产生任何收益，如有出现禁止转载、侵权的图片，亦或者文字内容请联系我进行修改。

文章目录

  相关参考:  

  黑马程序员vue前端基础教程-4个小时带你快速入门vue：链接: link.
  爱吃肉的狮子：vue中v-model使用：链接: link.
  a8892117 VueJs(6)—V-on指令：链接: link.
   Vue.js官方文档：链接: link.
  瓜皮唐 MV* 模式不得不说的故事：链接: link.
  Cacra：前端构建工具简介：链接: link.
  JeffreytheCoder【Vue简易入门】什么是Vue？：链接: link.
  huwao:2018几大主流的UI/JS框架——前端框架：链接: link.

  云奕：Sass和less的区别是什么？用哪个好链接: link.

提示：以下是本篇文章正文内容，下面案例可供参考

1. 什么是CSS预处理器？

  CSS作为一个标记语言，本身不是编程语言，存在以下缺点：语法不够强大，无法进行嵌套书写；不可以自定义变量，缺少合理的复用机制；难以维护。
  但CSS有一些扩展功能的写法，可以让CSS能支持一些编程语言才有的功能。但可扩展CSS语言中的写法是不能被浏览器解析的，所以这些扩展CSS的语言有预处理器，作用是把上面这段浏览器不认识的代码，还原做浏览器认识的CSS标准给浏览器解析。
  我们也可以简单地理解，即用一种专门的编程语言来进行Web页面样式设计，再通过编译器转换成正常的CSS文件以供项目使用。
开发者可以使用CSS预处理器进行CSS编码工作。
常用的CSS预处理器：

  1. SASS：基于Ruby环境，服务端处理解析相对快，功能强大，学习难度也更大。
  2. LESS：基于Node.js环境，客户端处理解析相对慢，功能更简单，学习难度也更简单。

2. 常用前端框架介绍

  使用前端框架可以很好的避免重复造轮子的问题，同时可以满足快速开发的需求，节约时间成本，其中JS框架注重的是网页逻辑的搭建，UI框架更像是一个设计师，提供很多已经设计好的风格供你使用。

2.1 JavaScript框架介绍

  1. jQuery：由John Resig创建于2006年的开源项目，具有轻量级，强大选择器，出色DOM操作封装，完善Ajax等优势。
  2. Angular:诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
  3. React:由facebook推出，轻量级框架具有灵活性和响应性，利用虚拟DOM，基于文档对象模型，允许浏览器友好地以HTML，XHTML或XML格式排列文档，但学习路线较为陡峭。
  4. Vue:Vue是由尤雨溪开发的一套用于构建用户界面的渐进式JavaScript框架,开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台，并且有了自己的独特功能-计算属性。形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期。
  5. Axios:Axios关注通信，相当于Ajax，而Vue关注DOM，没有通信能力，所以vue需要搭配Ajax或是Axios来实现异步通信。

2.2 UI框架介绍

  1. Ant-Design: 阿里出品，基于React
  2. ElementUI: 饿了么出品，基于Vue
  3. BootStrap: Twitter出品，开源工具包
  4. AmazeUI: HTML5跨屏前端框架

3. 前端构建工具

3.1 什么是构建工具

  构建工具是为了减少重复工作，实现自动化的工具。
  构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。

构建可以实现如下内容：

  1. 代码转换：将 TypeScript/es6 编译成JavaScript、将 SCSS 编译成 CSS等。
  2. 文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。
  3. 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步记在。
  4. 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
  5. 自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。
  6. 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  7. 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

3.2 构建工具简单介绍

  构建工具发展：Npm Scripts、Grunt、Gulp、FIS 3、Webpack、Rollup、Parcel
  这里简单介绍Babel和WebPack:
1. Babel: JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
2. WebPack:模块打包器，主要作用是打包、压缩、合并及按序加载。在Webpack里一切文件皆模块，通过 loader 转换文件，通过Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。
  一切文件，如JavaScript、CSS、SCSS、图片、模板，对于Webpack 来说都是一个个模块，这样的好处是能清晰地描绘各个模块之间的依赖关系，以方便Webpack进行组合和打包，经过Webpack的处理，最终会输出浏览器能使用的静态资源。
（官网图片）在这里插入图片描述

4. MV* 模式

4.1 MV*模式有哪些

  1. MVC:同步通信为主，Model-View-Controller 最早应用于后端开发，渐渐也应用在前端领域，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。具有低耦合、重用性高、部署快的优点。但由于模型和视图的分离，会给调试带来一定的困难。
  2. MVP:异步通信为主，Model-View-Presenter(呈现)，是MVC架构的一种演变。MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。 MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
    各部分之间的通信，都是双向的。 View 与 Model 不发生联系，都通过 Presenter 传递。
  3. MVVM:异步通信为主,Model-View-ViewModel，是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。实现了前后端更好的分离。

4.2 MVVM 模式

  前后端分手大师，比起MVC更加彻底的实现了前后端分离，前端不应该做复杂的数据处理工作，只要请求后端对外接口得到返还数据即可，促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率，使用接口来进行前后端数据通信，通过双向数据绑定视图与数据，数据传递是双向的，也就是说当数据改变时会导致视图改变，同理，视图改变时，数据也会发生改变。
  ViewModel相当于观察者，即可观察数据变化，并对视图对应内容进行更新，也可监听视图变化，并能通知数据发生改变。Vue.js就是ViewModel层的实现者。
（图转）
在这里插入图片描述

5. Vue 基本语法介绍及使用示例

5.1 Vue实例

5.1.1 创建一个Vue实例

  任何Vue应用都是通过用Vue函数创建一个Vue实例开始的。我们可以往实例中传入选项数据，诸如data(数据),methods(方法),computed(计算属性)等。完整选项数据可以参考Vue官网API文档。

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
	var vm = new Vue({
	  // 选项
	})
</script>

5.1.2 数据与方法

  当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<script>
	// 我们的数据对象
	var data = { a: 1 }
	
	// 该对象被加入到一个 Vue 实例中
	var vm = new Vue({
	  data: data
	})
	
	//你也可以直接写在一起
	var vm=new Vue({
		data:{a:1}
	})
	
	// 获得这个实例上的 property
	// 返回源数据中对应的字段
	vm.a == data.a // => true
	
	// 设置 property 也会影响到原始数据
	vm.a = 2
	data.a // => 2
	
	// ……反之亦然
	data.a = 3
	vm.a // => 3
</script>

   当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
   如果新添加一个property

vm.b = 'hi'

   那么，b的改动不会触发视图更新。观察左端{{data}}，没有发生同步变化。在这里插入图片描述

5.1.3 生命周期钩子

   每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
   比如 created 钩子可以用来在一个实例被创建之后执行代码：

<script>
	new Vue({
	  data: {
	    a: 1
	  },
	  created: function () {
	    // `this` 指向 vm 实例
	    console.log('a is: ' + this.a)
	  }
	})
	// => "a is: 1"
</script>

   也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

5.1 v-bind

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .active{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<div id="app">
<!--    通过v-bind为元素绑定属性 v-bind：属性名    也可以简写 ：属性名-->
<!--    <img v-bind:src="imgSrc">-->
<!--    <img v-bind:title="imgTitle">-->

    <!--    通过v-bind进行元素绑定时，把v-bind省略只写：也是可以的-->
<!--    <img :src="imgSrc">-->
<!--    <img :title="imgTitle+'!!!!!!'">-->
<!--    <br/>-->

<!--    利用isActive做判断条件进行三元组判定的两种写法-->
<!--    点击之后给图片加上边框-->
<!--   只有isActive为真时，类名才为active，才能激活css修饰-->![在这里插入图片描述](https://img-blog.csdnimg.cn/20210622191917620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE1ODY5,size_16,color_FFFFFF,t_70)

    <img :class="isActive?'active':''" :src="imgSrc" :title="imgTitle" @click="imgClick">
    <!--    <img v-bind:class="{active:isActive}">-->


</div>
</body>
<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
    //el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
    //可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
        el:"#app",
        data:{
            imgSrc:"show.jpg",
            imgTitle:"kouti",
            isActive:false
        },
		//定义一个图片点击相应函数
        methods:{
            imgClick:function (){
            //点击之后isActive取反
                this.isActive=!this.isActive;
            }
        }
    })
</script>
</html>

   点击图片之后，出现css设定好的边框修饰，再点击消失。
在这里插入图片描述

.

5.2 v-if

   v-if使用一般有两个场景：

  1. 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素
  2. 进行两个视图之间的切换

  下面演示的是情形1的实现。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--v-if根据表达值的真假切换元素的显示和隐藏（操纵dom元素）-->
<div id="app">
<!--v-on 绑定点击事件 -->
  <input type="button" v-on:click="toggleIsShow" value="click_show">
<!--  v-if 和v-show一个操作的样式一个操作dom 有速度快慢上的区别-->
  <p v-if="isShow">v-if</p>
</div>
</body>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      isShow:false
    },
    methods:{
      toggleIsShow:function(){
        this.isShow=!this.isShow;
      }
    }
  })
</script>
</html>

.

5.3 v-show

  作用与v-if类似。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--v-show根据表达值的真假来切换元素的显示和隐藏-->
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <img v-show="isShow" src="show.jpg">
</div>
</body>
<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
        isShow:false
    },
    methods:{
      changeIsShow:function (){
        this.isShow=!this.isShow;
      }
    }
  })
</script>
</html>

.

5.4 v-for

  当需要将一个数组遍历或枚举一个对象循环显示时候，可以使用指令v-for结合着in 或者of来使用。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="add" @click="add">
    <input type="button" value="remove" @click="remove">

    <ul>
<!--        利用v-for进行遍历，其中it为组内元素，index为元素索引 遍历对象为data中的arr数组 将会循环生成若干条li标签-->
       <li v-for="(it,index) in arr">
<!--           v-for之后 可以直接引用it,index-->
           {{index +1}}程序员校区：{{it}}
       </li>
    </ul>

    <h2 v-for="(it,index) in vegetables" :title="it.name">
        {{index}}素菜名字：{{it.name}}
    </h2>

</div>
</body>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            arr:["beijing","shanghai","guangzhou"],
            vegetables:[
                {name:"tomato"},
                {name:"banana"}
            ]
        },
        methods:{
            add:function (){
      		//这里没有连接数据库。我们模拟添加情况，要添加的时候，就给一个西瓜到数组里面,观察页面变化
                this.vegetables.push({name:"suika"});
            },
            remove:function(){
            //删除的时候，直接进行数组元素移除即可
                this.vegetables.shift();
            }
        }
    })
</script>
</html>

在这里插入图片描述

.

5.5 v-on

  v-on是用来绑定事件监听器，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。可以事件和按键进行绑定。
事件修饰符：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!--    记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名 -->

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  绑定点击事件-->
<!--  <input type="button" value="v-on指令_click" v-on:click="changeFood">-->
<!--  <input type="button" value="monseenter" v-on:monseenter="fun3">-->

<!--  绑定双击事件-->
  <input type="button" value="dblclick" v-on:dblclick="fun1">
<!--   你也可以将v-on写成@-->
  <input type="button" value="v-on简写" @dblclick="fun1">

  <h2 @click="changeFood">{{food}}</h2>
</div>
</body>
<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      food:"西红柿"
    },
    methods:{
        fun1:function (){
          // 弹窗输出
            alert("fun1");
        },
        changeFood:function (){
          // 控制台输出
            console.log(this.food);
            // 点击之后字符串末尾加上‘好好吃’，越点越好吃
            this.food+="好好吃";
        },
    },
  })
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--传递自定义参数，事件修饰符-->
<div id="app">
  <input value="点我" type="button" @click="doIt(666,'good')">
<!--  空格事件，点击键盘的空格会触发事件-->
  <input type="text" @keyup="sayHi">
</div>
</body>
<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
    },
    methods:{
      doIt:function (p1,p2){
        console.log("doIt");
        // 通过形参来获取传递进来的参数
        console.log(p1+p2);
      },
      sayHi:function (){
        alert("Hi");
      }
    }
  })
</script>
</html>

.

5.6 v-model

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
  1. v-bind绑定一个value属性
  2. v-on指令给当前元素绑定input事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--利用v-model实现双向绑定-->
<!--v-model指令的作用是便捷的设置和获取表单元素的值-->
<!--绑定的数据会和表单元素值相关联-->
<div id="app">
    <input type="button" value="修改信息" @click="setM">
    <input type="text" v-model="message" @keyup="getM">
    <h2>{{message}}</h2>
</div>
</body>
<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"vue入门"
        },
        methods:{
            getM:function (){
               alert(this.message);
            },
            setM:function (){
                this.message="vue入土";
            }
        }
    })
</script>
</html>

. 

5.7 v-text

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  设置标签的文本值-->
  <h2 v-text="message+'!'"></h2>
  <h1 v-text="info"></h1>
<!--  等价于-->
  <h2>深圳{{message+"!"}}</h2>
</div>
</body>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      message:"aaaaa",
      info:"vue"
    }
  })
</script>
</html>

.

5.8 v-html

在v-html的运行中，它解析了HTML代码。而v-text并没有解析，它将msg原样输出。也就是说，v-htnl会把你接受到的文本内容看作html语句，而v-text是看作普通文本
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  会将content解析成html语句-->
  <p v-html="content"></p>
<!--  会以文本形式原封不动的输出出来-->
  <p v-text="content"></p>
</div>
</body>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      selected:'aaaa',
      content:"<a href='https://www.baidu.com/'>java是世界上最好的语言，不信baidu</a>"
    }
  })
</script>
</html>

在这里插入图片描述

.

总结

  博主只是出于总结自己学习知识的目的完成了这篇博客，文中除了自己的一些思考之外还有数初引用其他博主的观点。相应的原文出处博主已经在文章开头处列出方便大家进行进一步的学习，如有不可转载的文字内容，请联系博主进行删除。有错误的地方，希望能够帮助博主指正，共同学习进步，同时，文中的所有图片出自博主绘制，引用请注明链接。
marikaだよ
关注
Vue项目预备知识介绍
weixin_42551921的博客
06-02 515
vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue的核心库只关注视图层，容易入门，
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
Vue.js（预备知识）
AI-fisher的博客
09-13 1441
文章目录一、Vue.js简介1.1 优缺点1.1.1优点1.1.2 缺点1.2 安装1.3 引入Vue二、 编程思想2.1 面向事件2.2 面向过程2.3 面向对象 一、Vue.js简介  &emspVue.js是一个轻巧、高性能、可组件化的MVVM框架，同时拥有非常容易上手的API。它一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核...
vue学习的预备知识为学好vue打好基础
个人学习笔记库，一篇一篇记录成长的足迹
04-26 709
vue学习的预备知识为学好vue打好基础
VUE项目学习——01开发vue项目预备知识学习（待补充）
weixin_43749381的博客
10-09 130
1.创建项目注意事项 建议使用脚手架创建一个完整的工程化项目 create项目时，命令行中不要包含中文和大写 新项目要先看package.json文件看配置 搭建脚手架需要创建config配置文件配置脚手架 eslint：是一个用来检测代码的检测工具，避免低级错误和同意代码风格，可以在package配置文件中的eslintConfig中找到eslint的配置信息 2.新项目一定要注意的文件： Main.js是项目的入口文件 Package.json是项目的配置文件 Vue-config.j
Vue的重要知识点
qq_41706280的博客
02-18 223
Vue的响应式原理 （https://www.bilibili.com/video/av89760569?p=229）
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue学习笔记（超详细）
jiey0407的博客
03-09 5834
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记
upgrade_bro的博客
08-21 2543
2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手！
vue总线机制(bus)知识点详解
10-15
在本篇文章中小编给大家整理的是关于vue总线机制(bus)知识点总结，有兴趣的朋友们可以跟着学习下。
Vue必会知识点——使用篇
weixin_45494904的博客
08-19 544
文章目录使用Vue的基本使用组件Vue高级特性VuexVue-router 使用 Vue的基本使用 v-html和v-text： 都会覆盖掉子组件 v-html能解析html标签 v-html有xxs风险 computed和watch： computed有缓存，data不变则不会重新计算。 cpmputed在v-model绑定的时候需要有get(),set() watch需要设置deep为true才能深度监听 watch监听引用类型，拿不到oldVal，因为同一个引用类型指针相同，修改值之后指向新的v
Vue超详细知识点学习（第一节）
草莓味的青
11-19 162
学习内容： Vue全家桶（vue/vue-router/vuex/axios） 1，MVVM 学习vue之前 首先了解什么是MVVM架构模式，MVVM，是一种架构模式，也有人叫做设计模式。 M：model数据类型。 V：view视图（页面） VM：ViewModel 视图模型 MVVM通过‘数据双向绑定’让数据自动滴双向同步。 V（修改视图）=> M（数据自动同步） M（修改数据）=> （视图自动同步）。 Vue就是一个MVVM的框架，在vue中，通过数据驱动视图..
Vue必备知识点(简单+快速上手Vue)
心态的博客
09-29 3572
Vue前端人员需看完整知识点体系，本知识点只是作为Vue入门，还有主要学习后端的，想了解Vue的，能上手简单的运用Vue的人群。如想要做前端开发，还需要学的更细致些。基本介绍Vue：1.Vue.js目前最火的的一个前端框架，三大主流前端框架之一。2.Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。3.提高开发效率，帮助减少不必要的dom操作；
最全Vue知识点总结，助你快速上手
weixin_51812604的博客
04-23 4510
最全Vue知识点总结
学习 Vue 源码的必要知识储备
阳光下的冷静的博客
06-20 693
学习 Vue 源码的必要知识储备
web前端开发学习经验总结
han8888的专栏
11-27 1819
web开发大概分为前台和后端，前台又可以分为美工，交互设计，js编程。后端了解不多，前端的话，可以按如下思路系统学习： 基础知识： 1. html + css。这部分建议在 www.w3school.com.cn 上学习，边学边练，每章后还有小测试。之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《head first html 与 css 中文版》，不过这本
智能化健身房管理：Spring Boot与Vue的创新解决方案
最新发布
Yaml4的博客
11-07 745
在现代社会，人们对健康和健身的重视程度不断提高。健身房作为人们进行体育锻炼和追求健康生活的重要场所，其数量和规模也在不断增长。然而，传统的健身房管理方式面临着诸多挑战。一方面，随着健身房会员数量的增加和业务的不断扩展，传统的人工管理方式变得越来越繁琐和低效。例如，会员信息的登记、课程安排、教练分配、设备管理等工作都需要大量的人力和时间，而且容易出现错误和漏洞。此外，传统的管理方式也难以满足会员对个性化服务和便捷体验的需求。另一方面，随着科技的不断进步，人们对智能化、数字化的服务需求也越来越高。
Vue 自定义icon组件封装SVG图标
gaowxx的博客
11-04 401
通过自定义子组件CustomIcon.vue使用SVG图标，相比iconfont下载文件重新替换更节省时间
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值