Vue学习笔记

最新推荐文章于 2024-02-15 07:00:00 发布

FARO_Z

最新推荐文章于 2024-02-15 07:00:00 发布

阅读量1.9k

点赞数

分类专栏：前端框架文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_44062380/article/details/114796625

版权

本文详细介绍了Vue的核心概念，包括前端三要素、MVVM模式以及Vue的渐进式特性。通过实例展示了如何编写第一个Vue程序，详细讲解了Vue的语法，如条件判断、循环、属性绑定、事件绑定、双向绑定、组件化以及网络通信使用Axios。此外，还涵盖了Vue的计算属性、内容分发、自定义事件、vue-cli项目创建、Webpack、vue-router、Vue-element UI的使用，以及嵌套路由、参数传递和重定向。文章深入浅出，适合Vue初学者阅读。

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

Vue

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

有一些和Vue相关的概念：

Soc：关注点分离原则

HTML + CSS + JS : 视图： 给用户看，刷新后台给的数据

网络通信： axios

页面跳转： vue-router

状态管理：vuex

Vue-UI : ICE , Element UI

1、前端的核心概念

Vue概念

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

前端三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为

JavaScript框架

Query: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)
React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

前端三大框架：Angular、React、Vue

2、第一个Vue程序

什么是MVVM（Model View ViewModel）

MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

Hello Vue

在Idea中下载Vue插件，然后重启

新建一个html，导入vue的CDN

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

编写代码

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

<div id="app">
    {
  {haha}}
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm=new Vue({
    
        el: "#app",
        data: {
    
            haha: "hello vue"
        }
    });

</script>

</body>
</html>

测试

我们在控制台中修改，不需要刷新，页面就可以更新

这，就是MVVM的思想（我们只是体会到了数据变了，视图变；视图变了，数据变还要在后面）

3、Vue语法

判断

if判断

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

<div id="app">
	  <!--if - else 判断-->
    <h1 v-if="ele">OK</h1>
    <h1 v-else>No</h1>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm=new Vue({
    
        el: "#app",
        data: {
    
            ele: true
        }
    });

</script>

</body>
</html>

if-else判断

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

<div id="app">
    <h1 v-if="ele==='A'">A</h1>
    <h1 v-else-if="ele==='B'">B</h1>
    <h1 v-else-if="ele==='C'">C</h1>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm=new Vue({
    
        el: "#app",
        data: {
    
            ele: "A"
        }
    });
</script>

</body>
</html>

循环

for

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

<div id="app">
    <table>
        <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody v-for="item in list">
        <tr>
            <td>{
  {item.name}}</td>
            <td>{
  {item.age}}</td>
        </tr>
        </tbody>
    </table>


</div>


<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<script>
    var vm=new Vue({
    
        el: "#app",
        data: {
    
            list: [
                {
    "name":"faro_z","age":21},
                {
    "name":"DIO","age":17},
                {
    "name":"JOJO","age":11},
                {
    "name":"KKK","age":30}
            ]
        }
    });

</script>
</body>
</html>

4、属性绑定 v-bind

可以简写为:

属性绑定，就是为标签里获得的属性起个别名，然后可以在Vue.component里

通过props[]来获取这个自定义属性

或者让标签里的属性来使用Vue里的值

最低0.47元/天解锁文章

FARO_Z

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记

VueVue 的核心库只关注视图层，方便与第三方库或既有项目整合。有一些和Vue相关的概念：Soc：关注点分离原则HTML + CSS + JS : 视图：给用户看，刷新后台给的数据网络通信： axios页面跳转： vue-router状态管理：vuexVue-UI : ICE , Element UI1、前端的核心概念Vue概念Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向
复制链接

扫一扫