Vue笔记基础 - 码农知识堂 - 文章详情页

Vue笔记基础
Vue

0、前言

概念：一款渐进式 JavaScript 框架、所谓渐进式就是逐步实现新特性的意思、如实现模块化开发、路由、状态管理新特性。其特点是综合了Angular（模块化）和 React （虚拟DOM）的优点

注：Vue处理DOM、Axios处理前端通信框架、类似于AJAX与服务器进行交互、也可使用原生的jQuery的ajax进行通信。

0.1、UI框架
- Ant-Design：阿里巴巴出品，基于React
- ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架
- Bootstrap：Twitter推出的用于前端开发的开源工具包
- AmazeUI：HTML5跨屏前端框架（常用）
0.2、JavaScript构建工具
- Babel：JS编译工具、主要用于浏览器不支持的ES新特性、比如用于编译 TypeScript
- WebPack：模块打包器、主要作用是打包、压缩、合并及按序加载
0.3、ElementUI
- vue-element-admin（掌握）
0.4、MVVM

异步通信为主、Model、View、ViewModel

0.5、Vue开发

基于NodesJs，实际开发采用 vue-cli 脚手架，vue-router 路由（页面跳转），vuex做状态管理（类似于cookie），Vue UI 界面一般使用 ElementUI或者ICE。

1、第一个vue

vue分为三层、View、ViewModel（连接视图和数据的中间件）、Model（模型层，表示js中的对象）

双向数据绑定：ViewModel可以监听Model里面的对象，如果里面对象值发生改变，能够立即反馈到View层并显示。

即、如果在浏览器的控制台中输入vm.message="1111"那么页面上的hello，vue会变成1111且不需要刷新页面。

好处：解耦了前端与后端，且可以在模型层中模拟后端的数据。
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

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


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!"
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
```
2、v-bind

作用：相当于代替了{{}}
```
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    span>
div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!"
        }
    });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
3、v-if、v-else、v-else-if
```
<body>
<div id="app">
    <h1 v-if="type==='A'">Ah1>
    <h1 v-else-if="type==='B'">Bh1>
    <h1 v-else>Ch1>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            type: 'A'
        }
    });
script>
body>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
4、v-for
```
<body>
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    li>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            items: [
                {message:'邹某1'},
                {message:'邹某2'},
                {message:'邹某3'}
            ]
        }
    });
script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
5、事件绑定：v-on:click

1、click是按钮点击事件、可在https://www.jquery123.com/jQuery中文文档中查看相应的事件
```
<body>
<div id="app">
   <button v-on:click="sayHi">点击button>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: "1111"
        },
        methods: {
            // 方法必须绑定在 Vue 的 methods 对象中，v-on：事件
            sayHi: function (){
                alert(this.message);
            }
        }
    });
script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
6、表单的双向绑定

含义：如在输入框中输入数据，此数据会实时赋值给已绑定的变量

注意：v-model 会忽略所有表单元素的 value 、checked、selected、特性的初始值而始终将Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

6.1、文本框绑定
```
<body>
<div id="app">
    单行文本：<input type="text" v-model="message" value="hello"/>{{message}}
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: ""
        },

    });
script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
6.2、下拉框绑定
注：在苹果系统中如果v-model表达式的初始值未能匹配任何选项，