Vue2基础详解

最新推荐文章于 2026-03-24 16:10:37 发布
原创 最新推荐文章于 2026-03-24 16:10:37 发布 · 1.6k 阅读 · 20 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#json #node.js #vue.js #前端 #elementui

1、什么是MVVM模式

MVVM(Model-View-ViewModel)是一种软件架构设计模式，由微软 WPF(用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet，简单点说就是在浏览器上运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。

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

  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互
  1. ‌‌三层架构：‌
    • ‌Model：管理数据与业务逻辑（如用户数据存取）。‌‌
    • ‌View：负责UI呈现（如页面布局）。‌‌
    • ‌ViewModel：通过数据绑定实现双向同步（自动更新视图与数据）。‌‌
  2. ‌核心特性‌：
    • ‌数据驱动视图：开发者无需手动操作DOM。‌‌

在这里插入图片描述

2、什么是Vue

Vue.js（发音为/vjuː/，类似view）是由尤雨溪（Evan You）于2014年2月发布的渐进式JavaScript框架，基于标准HTML、CSS和JavaScript构建，采用MIT开源协议并由社区驱动维护。该框架核心库专注视图层开发，通过声明式、组件化的编程模型提升用户界面构建效率，具备约20KB轻量核心并采用虚拟DOM技术优化性能，能够处理大规模应用且几乎无需手动优化。

2.1、MVVM模式的实现者

  • Model:模型层，在这里表示JavaScript 对象
  • View:视图层，在这里表示 DOM(HTML操作的元素)
  • ViewModel:连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而ViewModel就是定义了一个 Observer 观察者

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

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

2.2、第一个Vue程序

【说明】IDEA可以下载Vue插件！

2.2.1、下载地址

  • 开发版本

    • 包含完整的警告和调试模式：https://v2.cn.vuejs.org/js/vue.js
    • 删除了警告，37.72KB min+gzip：https://v2.cn.vuejs.org/js/vue.min.js

  • CDN

    • <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    • <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>

2.2.2、代码编写

  1. 创建一个HTML文档

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

</head>
<body>

</body>
</html>

  2. 引入Vue.js

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>

  3. 创建一个Vue的实例

    <script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            message: "Hello Vue!"
        }
    });
</script>

    说明：

    el: "#app"：绑定元素的id

    data: {message: "Hello Vue!"}：数据对象中有一个名为message的属性，并设置了初始值 “Hello Vue!”

  4. 将数据绑定到页面元素

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

    说明:只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel层所需的效果，是不是和 EL 表达式非常像?

完整demo.html

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

</head>
<body>

<!--view层 模版-->
<div id="app">
    {{message}}
</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            message: "Hello Vue!"
        }
    });
</script>

</body>
</html>

2.3、Vue的基本语法

2.3.1、v-bind

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

</head>
<body>

<!--view层 模版-->
<div id="app">

    <span v-bind:title="message">
        鼠标在上面悬停几秒！
    </span>

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            message: "Hello Vue!"
        }
    });
</script>

</body>
</html>

通过使用v-bind我们可以让message的值绑定在<span>标签的title属性上。

v-bind的本质是底层调用 DOM 的 setAttribute / removeAttribute，因此只认字符串。

v-bind的语法糖：

v-bind:attr → :attr

四种常见写法

  • 普通属性
    • :title=“msg” // 字符串
  • 布尔属性（存在即真）
  • :disabled=“isBtnOff” // true → 添加属性，false → 移除属性
  • 对象批量绑定（class 最常用）
    • :class=“{ active:isOn, error }” // key 是类名，value 是布尔
  • 数组混合绑定
    • :class=“[isOn?‘active’:‘’, { error }]”

2.3.2、v-if/v-else/v-else-if

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

</head>
<body>

<!--view层 模版-->
<div id="app">


    <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else-if="type=='C'">C</h1>
    <h1 v-else>D</h1>

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            type: 'E'
        }
    });
</script>

</body>
</html>

v-if，v-else-if，v-else为视图渲染加入了条件判断。

v-if的本质不是“隐藏”，而是真正的 DOM 增删。
条件为假时，对应节点及其子组件会被销毁，事件监听、子组件生命周期全部走 destroy。

2.3.3、v-for

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

</head>
<body>

<!--view层 模版-->
<div id="app">

    <ul>
        <li v-for="item in items">
            {{item.msg}}
        </li>
    </ul>

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            items:[
                {msg:"绫波0"},
                {msg:"绫波1"},
                {msg:"绫波2"}
            ]
        }
    });
</script>

</body>
</html>

v-for为视图渲染加入了循环逻辑。

v-for的完整写法

<li v-for="(item, index) in items" :key="item.id">

其中key 的作用：给 Virtual DOM 一个“身份证号”，就地复用时防止错位。 若不写 key，Vue 默认用 index，会导致“删除中间项”时后续输入框状态错位。

2.3.4、v-on

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

</head>
<body>

<!--view层 模版-->
<div id="app">
    <!--在这里我们使用了 v-on 绑定了click事件，并指定了名为 sayHi 的方法-->
    <button v-on:click="sayHi">
        Click me!
    </button>

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model 数据
        data: {message: "绫波绫波粒！"},
        // 方法必须定义在Vue实例的methods对象中
        methods: {
            sayHi: function (event) {
                alert(this.message)
            }
        }
    });
</script>

</body>
</html>

v-on的语法糖：

v-on:click → @click

v-on可接原生事件名、自定义事件名、动态事件名（Vue2.6+）：
@[eventName]=“handler”

v-on的四种常见用法

  • 直接指向 methods
    @click=“sayHi”
  • 内联语句（可传参）
    @click=“count+=1”
    @click=“add(5, event)” // event 是 Vue 注入的原生事件对象
  • 访问原生事件对象
    不加括号即可拿到 event：
    @mousemove=“updatePos” // methods 里 (event) => {…}, 不用通过updatePos(event)即可取出event
  • 多语句 / 临时函数
    @click=“()=>{ tmp++; done&&save() }” // 2.6+ 支持箭头函数，适合模板极简逻辑

3、Vue数据双向绑定

​ Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
​ 值得注意的是，我们所说的数据双向绑定，一定是对于 UI控件(<input>、<textarea>、<select>、<radio>、<checkbox>等)来说的，非 UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

3.1、input控件双向绑定

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

</head>
<body>

<!--view层 模版-->
<div id="app">

    输入框：<input type="text" v-model="text"> {{text}}

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model 数据
        data: {
            text:"123",
        },
    });
</script>

</body>
</html>

3.2、textarea控件双向绑定

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

</head>
<body>

<!--view层 模版-->
<div id="app">

    多行文本：<textarea name="t1" id="" cols="30" rows="10" v-model="text"></textarea>{{text}}

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model 数据
        data: {
            text:"123",
        },
    });
</script>

</body>
</html>

3.3、radio控件双向绑定

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

</head>
<body>

<!--view层 模版-->
<div id="app">

    <input type="radio" v-model="gender" value="male" name="gender">男
    <input type="radio" v-model="gender" value="female" name="gender">女

    <p>选择了性别为：{{gender}}</p>
</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model 数据
        data: {
            text: "123",
            gender:"",
        },
    });
</script>

</body>
</html>

3.4、select控件双向绑定

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

</head>
<body>

<!--view层 模版-->
<div id="app">

    <select name="language" id="language" v-model="language">
        <option value="" selected disabled>--请选择一门语言--</option>
        <option value="English">英语</option>
        <option value="French">法语</option>
        <option value="German">德语</option>
        <option value="Chinese">中文</option>
    </select>

    <p>选择了性别为：{{language}}</p>
</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model 数据
        data: {
            text: "123",
            gender:"",
            language:"",
        },
    });
</script>

</body>
</html>

4、Vue组件

组件是可复用的 vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf的th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织。

在这里插入图片描述

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

自定义Vue组件

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

</head>
<body>

<!--view层 模版-->
<div id="app">
    <Mylistitem v-for="item in items" v-bind:listitem="item"></Mylistitem>
</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script>
    //定义一个Vue组件 component
    Vue.component("Mylistitem", {
        props: ['listitem'],
        template: "<li>{{listitem}}</li>",
    });

    var vm = new Vue({
        el: "#app",
        // Model 数据
        data: {
            items: ["Java", "C++", "Python"]
        },
    });
</script>

</body>
</html>

说明：

v-bind:listitem="item"：将遍历的 item项绑定到组件中 props定义的名为 listitem属项的值性上，=号左边的 listitem 为 props定义的属性名，右边的为 item in items 中遍历的。

5、什么是Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequest。

Axios的特性：

  • 从浏览器创建 XMLHttpRequest
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 自动将请求体序列化为：
    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)
    • URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求
  • 自动转换JSON数据
  • 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
  • 为 node.js 设置带宽限制
  • 兼容符合规范的 FormData 和 Blob（包括 node.js）
  • 客户端支持防御XSRF

5.1、为什么使用Axios

由于 Vue.js是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC(关注度分离原则)，所以Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁!

5.2、初探Axios

准备一个data.json放在我们的html文件的同级目录下。

{
  "name": "绫波绫波粒",
  "url": "https://www.pku.edu.cn/",
  "page": "1",
  "isNonProfit": "true",
  "address": {
    "street": "西三环",
    "city": "北京海淀",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

在我们的demo.html中，通过Axios来获取data.json中的JSON对象。

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

</head>
<body>

<!--view层 模版-->
<div id="vue">

    <h1>{{info.name}}</h1>
    <h2>{{info.address.country}}</h2>
    <h2>{{info.address.city}}</h2>
    <h2>{{info.address.street}}</h2>
    <a v-bind:href="info.url">学校官网</a>

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        // Model 数据
        // data: 属性
        data() {
            return {
                //请求的返回参数合适，必须和JSON字符串一样
                info: {
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        street: null
                    },
                    url: null
                }
            }
        },
        mounted() { //钩子函数 链式编程
            axios.get('data.json').then(response => (this.info = response.data));
        }
    });
</script>

</body>
</html>

5.3、Vue实例的生命周期

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

比如在上面一个例子中 mounted 钩子被用来在一个实例被创建之后执行代码：

mounted() { //钩子函数 链式编程
    axios.get('data.json').then(response => (this.info = response.data));
}

下图展示了实例的生命周期。

请添加图片描述

6、Vue的计算属性

计算属性的重点突出在 属性两个字上(属性是名词)，首先它是个 属性 其次这个属性有的能力(计算是动词) 这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的计算属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

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

</head>
<body>

<!--view层 模版-->
<div id="vue">


<p>currentTime1: {{currentTime1()}}</p>
<!--计算属性不需要带()-->
<p>currentTime2: {{currentTime2}}</p>


</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        data() {
            return {
                message: "Lingbo",
            }
        },
        methods: {
            currentTime1: function (){
                return Date.now(); // 返回一个时间戳
            }
        },
        computed: {
            //计算属性
            //currentTime2 这是一个属性！不是方法
            currentTime2:function (){
                this.message;
                return Date.now();
            }
        }
    });
</script>

</body>
</html>

在控制台查看vm.currentTime1()和vm.currentTime2，可以发现vm.currentTime2不会改变输出的时间戳。因为计算属性已被缓存在内存里，只有当计算属性中**被监视的值(message)**发生改变，才会刷新缓存！

在这里插入图片描述
在这里插入图片描述
说明：

  • methods：定义方法，调用方法使用 currentTime1()，需要带括号。
  • computed：定义计算属性，调用属性使用 currentTime2，不需要带括号;this.message 是为了能够让 currentTime2 观察到数据变化而变化。
  • 假如在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用 vm.message="lingbo”，改变下数据的值，再次测试观察效果!

结论：
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

7、Vue内容分发

7.1、插槽Slot

在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中：

准备三个自定义组件，待办事项组件(todo)，该组件的内容由待办标题(todo-title)和待办内容(todo-items)组成，但是这三个组件又是相互独立的，我们需要通过插槽来完成组件的组合。

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

</head>
<body>

<!--view层 模版-->
<div id="vue">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-item slot="todo-item" v-for="item in items" v-bind:item="item"></todo-item>
    </todo>

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">

    Vue.component("todo",{
        template: '<div>' +
            '    <slot name="todo-title"></slot>' +
            '    <ul>' +
            '        <slot name="todo-item"></slot>' +
            '    </ul>' +
            '</div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<h1>{{title}}</h1>'
    });

    Vue.component("todo-item",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    })

    var vm = new Vue({
        el: "#vue",
        data() {
            return {
                title: "绫波绫波粒",
                items: ['Java',"Python","C++"],
            }
        },
        methods: {
            currentTime1: function (){
                return Date.now(); // 返回一个时间戳
            }
        },
        computed: {
            //计算属性
            //currentTime2 这是一个属性！不是方法
            currentTime2:function (){
                this.message;
                return Date.now();
            }
        }
    });
</script>

</body>
</html>

说明：

​ 我们的todo-title和todo-item组件分别被分发到了todo组件的<slot name="todo-title">和<slot name="todo-item">中。

7.2、自定义事件

​ 通过以上代码不难发现，数据项在 Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除 Vue 实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用 this.$emit('自定义事件名',参数)，操作过程如下:
1、在Vue的实例中，增加了 methods 对象并定义了一个名为 removeItems的方法：

methods: {
    removeItems: function (index){
        this.items.splice(index,1);
    }
}

2、为todo-item组件添加index参数，并在template后面新增一个删除按钮，使用 props 传递 item 和 index；

Vue.component("todo-item",{
    props: ['item','index'],
    template: '<li>{{index}}---{{item}} <button>删除</button></li>'
})

3、为删除按钮绑定一个remove方法，使用 this.$emit('remove', index) 在子组件中触发自定义事件；

Vue.component("todo-item",{
    props: ['item','index'],
    methods: {
        remove: function (index){
            this.$emit('remove',index)
        }
    },
    template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>'
})

4、在todo-item标签中绑定自定义事件remove，其调用的方法为Vue实例中的removeItems方法，父组件通过 v-on:remove="removeItems(index)" 监听并处理事件；

<todo-item slot="todo-item" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index"
           v-on:remove="removeItems(index)"
           ></todo-item>

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

</head>
<body>

<!--view层 模版-->
<div id="vue">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-item slot="todo-item" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index"
                   v-on:remove="removeItems(index)"
        ></todo-item>
    </todo>

</div>


<!--1、导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">

    Vue.component("todo", {
        template: '<div>' +
            '    <slot name="todo-title"></slot>' +
            '    <ul>' +
            '        <slot name="todo-item"></slot>' +
            '    </ul>' +
            '</div>'
    });

    Vue.component("todo-title", {
        props: ['title'],
        template: '<h1>{{title}}</h1>'
    });

    Vue.component("todo-item", {
        props: ['item', 'index'],
        methods: {
            remove: function (index) {
                this.$emit('remove', index)
            }
        },
        template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>'
    })

    var vm = new Vue({
        el: "#vue",
        data() {
            return {
                title: "绫波绫波粒",
                items: ['Java', "Python", "C++"],
            }
        },
        methods: {
            removeItems: function (index) {
                this.items.splice(index, 1);
            }

        }
    });
</script>

</body>
</html>

8、第一个Vue CLI项目

8.1、什么是Vue CLI

​ Vue CLI 官方提供的一个脚手架,用于快速生成一个 Vue 的项目模板；

​ 预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，使我们的开发更加的快速。

​ 主要的功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

​ 需要的环境：

  • Node.js：https://nodejs.cn/download/

    安装就无脑下一步就好，安装在自己的环境目录下

确认nodejs安装成功:

  • cmd 下输入 node -v，查看是否能够正确打印出版本号即可！
  • cmd 下输入 npm -v，查看是否能够正确打印出版本号即可！

这个npm，就是一个软件包管理工具，就和Linux下的apt软件安装差不多!

安装 Node.js 淘宝镜像加速器(cnpm)

这样子的话，下载会快很多~

# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装 vue-cli

# cnpm install vue-cli -g
# 新版本使用
npm install -g @vue/cli

8.2、创建Vue CLI应用程序

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建一个基于webpack模板的Vue应用程序。

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

一路选择no即可；

F:\001Java\Vue>vue init webpack myvue

? Project name myvue
? Project description A Vue.js project
? Author lingboli
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) no

初始化Vue CLI项目

  cd myvue
  npm install (or if using yarn: yarn)
  npm run dev

9、webpack学习使用

9.1、什么是webpack

​ 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当它会递归地构建一个依赖关系图(dependency graph)，其中包含应用webpack 处理应用程序时，程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

​ Webpack 是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过 loader 转换，任何形式的资源都可以当做模块，比如 CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS 等;

​ 伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了 WebApp 模式。它们运行在现代浏览器里，使用 HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求；WebApp 通常是一个 SPA (单页面应用)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JS 代码，这给前端的开发流程和资源组织带来了巨大挑战。

​ 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

9.2、安装webpack

​ WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

​ 安装：

npm install webpack -g
npm install webpack-cli -g

​ 测试安装成功

  • webpack -v
  • webpack-cli -v

9.3、使用webpack

  1. 创建项目目录webpack-study

  2. 创建一个名为 modules 的目录，用于放置 JS 模块等资源文件

  3. 在modules下创建模块文件，如 hello.js，用于编写 JS 模块相关代码

    //暴露一个方法:sayHi
exports.sayHi = function (){
    document.write("<h1>ES5规范</h1>");
};

  4. 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

    //require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

  5. 在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包

    module.exports = {
    entry: './modules/main.js',
    output:{
        filename: "./js/bundle.js"
    }
};

  6. 在项目目录下创建 HTML 页面，如 index.html，导入 WebPack 打包后的 JS 文件

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

<!--前端的模块化开发-->
<script src="dist/js/bundle.js"></script>

</body>
</html>

  7. 在IDEA控制台中直接执行webpack；如果失败的话,就使用管理员权限运行即可!

  8. 运行HTML看效果

10、Vue-Router

​ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接。
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为

10.1、安装Vue-Router

基于第一个 vue-cli 进行测试学习；先査看node modules中是否存在 vue-router

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router@3 --save

如果在一个模块化工程中使用它，必须要通过 Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from'vue-router'

Vue.use(VueRouter);

10.2、测试使用Vue-Router

  1. components目录下存放我们自己编写的组件

  2. 定义一个Content.vue的组件和一个Main.vue组件

    <script>
export default {
name: "Content"
}
</script>

<template>
  <h1>内容页</h1>
</template>

<style scoped>

</style>


    <script>
export default {
name: "Main"
}
</script>

<template>
  <h1>首页</h1>
</template>

<style scoped>

</style>

  3. 安装路由，在src目录下，新建一个文件夹:router，在index.js文件中专门存放路由。

    import Vue from 'vue'
import VueRouter from "vue-router";

import Content from "../components/Content";
import Main from "../components/Main";

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/content',
      name:'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path:'/main',
      name:'main',
      //跳转的组件
      component: Main
    }
  ]
});

  4. 在main.js中配置路由

    import Vue from 'vue'
import App from './App'
import router from "./router";

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

  5. 在App.vue中使用路由

    <template>
  <div id="app">

    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>

    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

11、ElementUI

11.1、创建工程

1、创建一个名为hello-vue的工程 vue init webpack hello-vue

2、安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router@3 --save
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
npm install sass-loader@^7.3.1 sass@^1.32.13 --save-dev
# 启动测试
npm run dev

3、Npm命令解释

  • npm install moduleName：安装模块到项目目录下
  • npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置要看 npm config prefix 的位置
  • npm install -save moduleName：-save 的意思是将模块安装到项目目录下，并在package 文件的 dependencies 节点写入依赖，-S 为该命令的缩写
  • npm install -save-dev moduleName ：-save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D 为该命令的缩写

11.2、测试ElementUI组件

1、在views文件夹下新建两个组件Login.vue和Main.vue，分别代表登录页面和首页。

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" class="login-box" label-width="80px">
      <h3 class="login-title">欢迎 登录</h3>
      <el-form-item label=" 账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号" type="text"/>
      </el-form-item>
      <el-form-item label=" 密码" prop="password">
        <el-input v-model="form.password" placeholder=" 请输入密码" type="password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit( 'loginForm' )">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        :before-close="handLeClose"
        :visible.sync="dialogVisible"
        title="温馨提示"
        width="30%">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog- footer">
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
//表单验证，需要在el-form-item 元素中增加prop 属性
      rules: {
        username: [
          {required: true, message: " 账号不可为空", trigger: 'blur'}
        ],
        password: [
          {required: true, message: " 密码不可为空 ", trigger: 'blur'}
        ]
      },
//对话框显示和隐藏
      dialogVisible: false
    }
  }, methods: {
    onSubmit(formName) {
//为表单绑定验证功能
      this.$refs [formName].validate((valid) => {
        if (valid) {
//使用vue-router路由到指定页面，该方式称之为编程式导航
          this.$router.push("/main");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>


<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>


<script>
export default {
name: "Main"
}
</script>

<template>
  <h1>首页</h1>
</template>

<style scoped>

</style>

2、在router文件夹下的index.js中配置路由文件。

import Vue from 'vue'
import Router from  'vue-router'

import Login from "../views/Login";
import Main from  "../views/Main"

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/login',
      component:Login
    },
    {
      path:'/main',
      component:Main
    }
  ]
});

3、在main.js中导入ElementUI和router路由文件。

import Vue from 'vue'
import App from './App'

import router from "./router";

Vue.config.productionTip = false

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(ElementUI);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App) //ElementUI
})

4、通过npm run dev启动测试，在/login路径下的登录组件。

12、路由嵌套

​ 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件，例如:

/user/foo/profile ------------> /user/foo/posts

​ 为了在Vue中实现路由嵌套，我们在views文件夹下新建user文件夹，并新建两个视图文件：List.vue和Profile.vue。

1、List.vue

<script>
export default {
  name: "List"
}
</script>

<template>
<h1>用户列表</h1>
</template>

<style scoped>

</style>

2、Profile.vue

<script>
export default {
  name: "Profile"
}
</script>

<template>
<h1>个人主页</h1>
</template>

<style scoped>

</style>

3、为两个新视图创建子路由

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login";
import Main from "../views/Main";
import List from "../views/user/List";
import Profile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main',
      component: Main,//嵌套路由
      children: [
        {
          path: '/user/profile',
          component: Profile
        },
        {
          path: '/user/list',
          component: List
        },
      ]
    }
  ]
});

4、在Main.vue中增加侧边栏，作为导航

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right:15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #048bd1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

5、在侧边栏点击导航项，即可跳转子路由。

13、参数传递及重定向

在进行路由跳转时，我们可以通过在跳转路由URL中使用问号(：)实现参数传递。

方法一

在router/index.js中配置：

{
   		 path: '/user/profile/:id',
         name: 'Profile',
         component: Profile
}

在router-link中绑定要传入的参数：

<router-link v-bind:to="{name:'Profile',params:{id:1}}">个人信息</router-link>

我们在Profile.vue中添加{{$route.params.id}}以查看传入的参数。

<script>
export default {
  name: "Profile"
}
</script>

<template>
  <div>
    <h1>个人主页</h1>
    {{$route.params.id}}
  </div>
</template>

<style scoped>

</style>

方法二

这种方法可以通过props解耦。

在router/index.js中配置：

{
      path: '/user/profile/:id',
      name: 'Profile',
      component: Profile,
      props:true
}

不变的是，在router-link中绑定要传入的参数：

<router-link v-bind:to="{name:'Profile',params:{id:1}}">个人信息</router-link>

我们在Profile.vue中不再需要{{$route.params.id}}以查看传入的参数。

定义props:['id']即可直接在<template>中解耦。

<script>
export default {
  name: "Profile",
  props:['id']
}
</script>

<template>
  <div>
    <h1>个人主页</h1>
    {{id}}
  </div>
</template>

<style scoped>

</style>

重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下，比如:

{
  path: '/main',
  component: Main
},
{
  path:'/goHome',
  redirect:'/main'
}

说明:

​ 这里定义了两个路径，一个是/main，一个是 /goHome，其中 /goHome 重定向到了/main 路径，由此可以看出重定向不需要定义组件;
​ 使用的话，只需要设置对应路径即可：

<el-menu-item index="1-3">
  <router-link to="/goHome">返回首页</router-link>
</el-menu-item>

14、404页面和路由钩子

路由模式有两种

  • hash：路径带 #符号，如 http://localhost/#/login
  • history：路径不带#符号，如 http://localhost/login

14.1、路由模式和404页面设置

1、通过在router/index.js中设置mode:"history"，即可访问不带#符号的路由。

export default new Router({
  mode:"history",
  routes: [
    ...
  ]
});

2、在views目录下新建NotFound.vue视图

<script>
export default {
  name: "NotFound"
}
</script>

<template>
<div>
  <h1>404，页面走丢了！</h1>
</div>
</template>

<style scoped>

</style>

3、在router/index.js中为404页面设置路由，这样路由表中匹配不到的路径都会显示404页面。

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login";
import NotFound from "../views/NotFound";

Vue.use(Router);

export default new Router({
  mode:"history",
  routes: [
    {
      path: '/login',
      component: Login
    },
	...
    {
      path:'*',
      component:NotFound
    }
  ]
});

14.2、路由钩子和异步请求

beforeRouteEnter：在进入路由前执行

beforeRouteLeave：在离开路由前执行

  //类似于拦截器
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前");
    next();
  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后");
    next();
  }

参数说明

  • to：路由将要跳转的路径信息
  • from：路径跳转前的路径信息
  • next：路由的控制参数
  • next( )：跳入下一个页面
  • next(‘/path’)：改变路由的跳转方向，使其跳到另一个路由
  • next(false)：返回原来的页面
  • next((vm)=>{})：仅在 beforeRouteEnter 中可用，vm 是组件实例

在钩子函数中调用异步请求

1、安装 Axios

npm install axios@^0.27.2 --save
npm install vue-axios --save

2、main.js引用Axios

import Vue from 'vue'
import App from './App'

import router from "./router";
import axios from "axios";
import VueAxios from "vue-axios"

Vue.config.productionTip = false

Vue.use(VueAxios,axios);
Vue.use(router);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App) //ElementUI
})

3、在static文件夹中放一个mock/data.json数据文件

{
  "name": "绫波绫波粒",
  "url": "https://www.pku.edu.cn/",
  "page": "1",
  "isNonProfit": "true",
  "address": {
    "street": "西三环",
    "city": "北京海淀",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

4、在Profile.vue中编写getData方法，通过axios发起异步请求。

<script>
export default {
  name: "Profile",
  props:['id'],
  //拦截器
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前");
    next(vm => {
      vm.getData(); //进入路由之前执行getData
    });
  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后");
    next();
  },
  methods:{
    getData: function (){
    this.axios({
      method:"get",
        //注意端口号与npm run dev开启的相同
      url:"http://localhost:8082/static/mock/data.json"
    }).then(function (response){
      console.log(response)
    })
    }
  }
}
</script>

<template>
  <div>
    <h1>个人主页</h1>
    {{id}}
  </div>
</template>

<style scoped>

</style>

5、在console控制台中查看输出。

绫波粒
关注
Vue基础之指令与过滤器
fanlingfang的博客
11-06 961
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
vue2学习文档
zsy1833579605的博客
05-29 3765
vue2的基础语法及相关插件使用
Vue2 和 Vue3 所有区别
最新发布
weixin_45549481的博客
03-24 488
Vue2与Vue3的核心区别包括：1) API设计不同，Vue2使用Options API而Vue3主推Composition API；2) 响应式系统升级，Vue3采用Proxy替代Object.defineProperty，支持更全面的数据监听；3) 生命周期钩子变化，组合式API中setup替代beforeCreate/created；4) 模板语法改进，支持多根节点；5) 全局API重构为应用实例；6) 路由和状态管理优化，推荐Pinia替代Vuex；7) 原生TypeScript支持；8) 性能显
Vue2全面解析 - 从入门到精通
weixin_51040479的博客
07-07 2266
Vue2 核心指南摘要 Vue2 是一个渐进式 JavaScript 框架，核心特点包括： 响应式系统：通过 Object.defineProperty 实现数据绑定 组件化：支持单文件组件（.vue 文件） 模板语法：提供插值、指令等模板功能 路由管理：集成 VueRouter 实现 SPA 开发 状态管理：通过 Vuex 实现集中式状态管理 主要技术要点： 生命周期：8 个核心钩子函数控制组件行为 指令系统：v-model、v-for、v-if 等常用指令 组件通信：Props/$emit、provid
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 4万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
Vue2（初识vue）
passerby的博客
08-02 1万+
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。vue环境的搭建有很多种：对于我们初次学习，我们使用自行下载js的方式。 注意 面试题： Data为啥要写成函数？ Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。什么是指令
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8801
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
vuejs插件_VueJS 2的基本翻译插件
cuk5340的博客
07-26 1818
vuejs插件 Vue-Polyglot (Vue-Polyglot) basic translation plugin for VueJS 2+. VueJS 2+的基本翻译插件。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm install --save vue-polyglot TLDR (TLDR) can lo...
VueJS2 todoList Demo
Carl·铭的博客
01-22 333
VueJS2 todoList Demo最近在学习VueJS,先看2.0的API,目前看完了基础部分,搭建Demo练习一下工具: sublime, vue-cli 环境: 按教程,通过cnpm安装; app.vue代码如下:<template> <div id="app"> <h1 v-text="title"></h1> <input type="text" v-mo
vuejs 排序map_vuejs2的简单干净数据表，具有排序之类的基本功能
cuk5239的博客
07-20 1264
vuejs 排序map Vue好表 (Vue-good-table) A simple, clean data table for VueJS (2.x) with essential features like sorting, column filtering, pagination etc. 一个简单，干净的VueJS(2.x)数据表，具有诸如排序，列过滤，分页等基本功能。 现场演示 ...
vuejs插件_VueJS 2的访问控制列表插件
cuk5239的博客
07-21 311
vuejs插件 Vue JS 2中的访问控制列表插件 (Plugin of Access Control List from Vue JS 2) This plugin aims to control the layout of the system and block access to certain routes of the vue-router, that according to th...
Vue2-基础知识
qq_54379580的博客
09-28 1万+
一些vue的基础知识啦, 基本用法, 指令相关,侦听器,过滤器,计算属性, 组件相关, 路由相关的基础知识点啦~~~
【VUE2】VUE2基础知识和原理--超详细--超简介--零基础（一）
m0_55644132的博客
12-02 5265
2 模板语法 Vue模板语法有2大类:插值语法：功能：用于解析标签体内容写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性指令语法:功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性 3 数据绑定 Vue中有2种数据绑定的方式：单向绑定(v-bind)：数据只能从data流向页面双向绑定(v-model)：数据不仅能从data流向页
Vue2 概述
Dailyblue的专栏
04-28 1万+
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。...
Vue2学习(一)——Vue简介、Vue指令与指令修饰符
雷神乐乐的博客
12-22 3269
Vue2学习(一)——Vue简介、Vue指令与指令修饰符
Vue2详解(二)
internet__的博客
08-29 3443
v-bind : 单向绑定解析表达式, 可简写为 :xxxv-model : 双向数据绑定v-for : 遍历数组/对象/字符串v-on : 绑定事件监听, 可简写为@v-if : 条件渲染（动态控制节点是否存存在）v-else : 条件渲染（动态控制节点是否存存在）v-show : 条件渲染 (动态控制节点是否展示)v-text指令：1.作用：向其所在的节点中渲染文本内容。2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
Vue2和Vue3
秋书一叶的博客
08-26 8398
Vue.js 2（通常称为Vue 2）是一款流行的JavaScript前端框架，用于构建现代、交互式、响应式的用户界面。它由Evan You开发，于2016年发布，是Vue.js框架的第二个主要版本。Vue 2的核心思想是将数据驱动和组件化开发相结合，使开发者能够更轻松地构建复杂的Web应用程序。Vue 2主要包含以下特点和特性：组件化架构： Vue 2采用组件化的开发方式，将界面拆分为多个可重用的组件。每个组件具有自己的状态、模板、方法和生命周期钩子，使得开发更具模块化、可维护性更高。
Vue2详解
m0_71229255的博客
10-02 3380
Vue是一套**构建用户界面**的**渐进式 框架****构建用户界面**：基于数据渲染出用户可以看到的界面**渐进式**：所谓渐进式就是循序渐进，不一定非得把Vue中所有的API都学完才能开发Vue，可以学一点开发一点 * Vue的两种开发方式： 1. Vue核心包开发。场景：局部模块改造 2. Vue核心包&Vue插件&工程化
Vue2基础知识概览与总结
qq_40529733的博客
07-10 1882
Vue2的模版语法、生命周期等内容。有例子，较详细
Vue2简单使用及相关基础知识概念（适合小白入门，看完就能上手）
熊凯瑞的博客
10-30 3895
Vue是一套用于构建用户界面的渐进式框架。同时被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，利于上手和第三方库进行整合。 其中ViewModel是连接视图和数据的中间件。能够观察到数据的变化，并对视图对应的内容进行更新，同时也能监听到视图的变化，并能够通知数据发生改变。 因此Vue.js就是MVVM中的ViewModel层的实现者，核心是实现了DOM监听与数据绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值