vue学习总结_vuejs总结-CSDN博客

本文链接：https://blog.csdn.net/YangJianzuiniubi/article/details/103318069

一，相关技术

1.NodeJs

Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统

2.MVVM模式

M：Model，模型，包括数据和一些基本操作

V：View，视图，页面渲染结果

VM：View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。

当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上.

3.主流前端框架

Vue:vue.js以轻量易用著称

React.js:vue.js和React.js发展速度最快，集web前端与app于一身技术

AngularJS:曾经很火

二，Vue

1.介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html

Vue只关注视图层。

Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue学习起来非常简单。

2.特性

轻量：Vue.js库的体积非常小的，并且不依赖其他基础库。

数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

指令：内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

插件化：Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

组件化：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

3.入门

3.1 以本地js或csn直接引入到页面中

3.2 在npm引入vue 命令：npm install vue

4.vue实例对象

4.1 el属性

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中

使用。

4.2 data属性

Vue实例的数据保存在配置属性data中, data自身也是一个对象

通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

4.3 methods属性

Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体

方法都是被Vue对象调用,所以方法中的this代表Vue对象

4.4 vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用

5.vue表达式

VueJS表达式写在双大括号内：{{ expression }}。

VueJS表达式把数据绑定到 HTML

VueJS将在表达式书写的位置"输出"数据

VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

6.vue指令

6.1 什么是指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式

6.2常见的指令

v-model=“表达式” 数据双向绑定

v-text=“表达式” 设置标签中的文本

V-html=“表达式” 设置标签中的html

V-for=“表达式” 循环

V-on=“表达式” 注册事件

6.3指令的使用

v-model=“表达式” 数据双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="myDiv">
        <input v-model="hello">

        游泳:<input type="checkbox" v-model="checkboxValue" value="游泳">
        健身:<input type="checkbox" v-model="checkboxValue" value="健身">
        data中的值:{{checkboxValue}}<hr/>

        篮球:<input type="radio" v-model="radioValue" value="篮球">
        乒乓:<input type="radio" v-model="radioValue" value="乒乓">
        data中的值:{{radioValue}}<hr/>


        文本域:<textarea v-model="textAreaValue" value="是什么让你如此自行"></textarea>
        data中的值:{{textAreaValue}}<hr/>

        我精通:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value="python">python</option>
        </select>
        data中的值:{{skills}}<hr/>
    </div>

    <script>
        var myDiv = new Vue({
            el: '#myDiv',
            data: {
                hello:'每个对象都有这么一句话',
                checkboxValue:["游泳"],
                radioValue:'篮球',
                textAreaValue:'寒风刺骨',
                skills:'python'
            }
        });
    </script>
</body>
</html>

v-text=“表达式” 和v-html 设置标签中的文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="myDiv">
        <!--设置标签中的内容-->
        <span v-text="word"></span>
        <!--设置标签中的内容，如果字符串中存在html标签，能够解析出来-->
        <span v-html="whtml"></span>
    </div>

    <script>
        var myDiv = new Vue({
            el:"#myDiv",
            data:{
                word:"你好啊，朋友们",
                whtml:'<p style="color: blue">恩很</p>'
            }
        })
    </script>
</body>
</html>

V-for=“表达式” 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="myDiv">
        <ul v-for="(pro) in bird">
            <li>
                {{pro}}
            </li>
        </ul>
        <!--一个属性代表值；两个参数一个是key一个是值；三个参数一个是下标，一个是key，衣蛾是值-->
        <ul v-for="(index,bir) in bird">
            <li>
                {{index}} ----{{bir}}
            </li>
        </ul>
        <ul v-for="(pro,key,index) in bird">
            <li>
                {{index}} --{{key}}--{{pro}}
            </li>
        </ul>
        <ul v-for="(key,index) in bird">
            <li>
                {{index}} --{{key}}
            </li>
        </ul>
        <ul v-for="(key) in bird">
            <li>
                {{key}}
            </li>
        </ul>

        <table v-for="student in students">
            <tr>
                <td>编号</td>
                <td>名字</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr>
                <td>{{student.id}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.sex}}</td>
            </tr>
        </table>
    </div>

    <script>
        var myDiv = new Vue({
            el: '#myDiv',
            data: {
                hello:'每个对象都有这么一句话',
                bird:{
                    name:'百灵鸟',
                    age:2,
                    sex:'ci'
                },
                hobby:['篮球','足球','排球','高尔夫球'],
                students:[
                    {id:1,name: "松江", age: 9, sex: "熊"},
                    {id:2,name: "流浪狗", age: 5, sex: "次"},
                    {id:3,name: "白虎", age: 6, sex: "次"}
                ]
            }
        });
    </script>
</body>
</html>

v-bind 设置标签中属性的值:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--v-bind:设置标签中属性的值-->
    <div id="myDiv">
        <img v-bind:src="headImage">
        <!--v-bind="" 批量设置标签的属性-->
        <input v-bind="nene"/>
    </div>

    <script>
        var app = new Vue({
            el:"#myDiv",
            data:{
                title:"这是我这只的标题",
                headImage:'images/12.jpg',
                nene:{
                    type:'text',
                    name:'username'
                }
            }
        })
    </script>
</body>
</html>

v-show 设置标签是否显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

    <div id="myDiv">
        <span v-show="show">回答</span>
        <span v-show="hide">滴滴滴</span>
        <span v-show="v>50">啊啊啊啊</span>
    </div>

    <script>
        var myDiv = new Vue({
            el:"#myDiv",
            data: {
                show: true,
                hide: false,
                v: 75
            }
        })
    </script>
</body>
</html>

v-if,v-else-if,v-else，条件判断：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

    <!--<div id="myDiv">
        <div v-if="show">在这里</div>
        <div v-if="hide">看不见啊</div>
        <div v-if="v>80">是吗</div>
    </div>-->
    <div id="myDiv">
        <div v-if="v<18">年轻正好</div>
        <div v-else-if="v > 18 && v < 40">正值奋斗</div>
        <div v-else-if="v > 40 && v < 60">别太拼了</div>
        <div v-else>老年人</div>
    </div>
    <script>
        var myDiv = new Vue({
            el:"#myDiv",
            data: {
                show: true,
                hide: false,
                v: 100
            }
        })
    </script>
</body>
</html>