Vue.JS

Vue.JS介绍

概述

• Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的前端框架。Vue 的核心库只关注视图层
• Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
• 上手比较容易

MVVM模式

? MVVM是Model-View-ViewModel的简写
? 它本质上就是MVC 的改进版
? MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开
? MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
? Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层
? 它的核心是 MVVM 中的 VM，也就是 ViewModel
? ViewModel负责连接 View 和 Model，保证视图和数据的一致性

示例图

快速入门

<!-- 1.在页面中引入vue的js文件。 -->
<script src="js/vuejs-2.5.16.js"></script>

<!-- 2.在页面中定义一个根节点。一般就是div -->
<div id="root">
    <input type="text" v-model="message">
{{message}}
</div>

<!-- 3.在js代码中初始化一个vue对象，基于上面的根节点初始化。 -->
<script>
    //初始化Vue对象
    new Vue({
        //初始化vue对象的根节点
        el:"#root",
        //定义页面使用的模型数据js变量
        data:{
        message:"hello vue!"
        }
    });
</script>

事件绑定

什么是事件

图形界面的操作系统都是事件驱动。
系统中只要是有一个变化就会触发一个事件。
js也是事件驱动的。

单击事件绑定

原生JS

onclick="onClick()"

vuejs绑定

v-on:事件名称=处理方法

示例

<!-- 绑定事件 -->
<div id="root">
    <h1>{{message}}</h1>
    <button v-on:click="onClick()">点我</button>
    <button @click="onClick()">点我</button>
</div>

<!-- 处理事件 -->
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            message:"hello vue!"
        },
        methods:{
            onClick:function () {
                alert("你点了我");
                this.message = "你已经点击了按钮";
            }
        }
    });
</script>

键盘事件

? 事件名称
? keydown
? 在文本框中敲击回车键，会触发一个keydown。
? 概述
? 敲击键盘上任意按键都会触发keydown事件
? 每个按键都有一个唯一的编号keycode
? 可以判断keycode是多少就可以判断出那个键按下。

示例

?
?

<!-- 事件绑定 -->
<div id="root">
    <input type="text" @keydown="onKeydown($event)">
    <br>
    keycode:{{keyCode}}
</div>

<!-- 处理事件 -->
<script>
    new Vue({
        el:"#root",
        data:{
            keyCode:0,
        },
        methods:{
            onKeydown:function (event) {
                var keyCode = event.keyCode;
                this.keyCode = keyCode;
                if (keyCode == 13) {
                    alert("你按下了回车键！");
                }
            }
        }
    });
</script>

按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值
vue 定义了一些按键修饰符, 可以直接使用监听,不需要再判断keycode

常用按钮修饰符
    .enter 
    .tab 
    .delete (捕获 “删除” 和 “退格” 键) 
    .esc 
    .space 
    .up 
    .down 
    .left 
    .right

示例

<div id="root">
    <input type="text" name="keyword" v-on:keydown.enter="enterKeyDown()">
</div>

<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        methods:{
            enterKeyDown:function () {
                alert("回车时间触发");
            }
        }
    });
</script>

鼠标事件

? 事件名称
? mousemove
? 当鼠标移动时就会触发事件
? 示例
?

<!-- 绑定事件 -->
<div id="root">
    <div id="testdiv"  @mousemove="onMouseMove($event)">
    X:{{X}},Y:{{Y}}
    </div>
</div>
<!-- 处理事件 -->
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            X:0,
            Y:0
        },
        methods:{
            onMouseMove:function (event) {
            //取鼠标位置
            this.X = event.x;
            this.Y = event.y;
            }
        }
    });
</script>

事件修饰符

阻止事件默认

<!-- 传统阻止事件默认 -->
<div id="root">
    <a href="http://www.baidu.com" @click="@
    aclick($event)">点击</a>
</div>


<!-- 事件修饰符 -->
<script>
    //初始化Vue对象
    new Vue({
        el:" #root”,
        methods: {
        aclick: function(event){
            alert("点击了a标签");
            event.preventDefault();
        }
    });
</script>

事件冒泡

<div id= root">
    <div style="width:100px; height:100px; background:red;" @click="divClick">
        <a href="http://www.baidu.com" @click.prevent.stop="aClick()">点击</a>
    </div>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        methods: {
            aClick:function() {
                alert("点击了a标签”):
            },
            divClick:function() {
                alert("div-Click");
            }
        }
    });
</script>

数据绑定

插值

• 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
• 无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新

示例

<div id="root" >
    {{1+2}}<br>
    {{'aaa' + '123' }}<br>
    {{num + 1}}<br>
    {{3>2?true:false}} <br>
    {{user.username}}
</div>
<script>
    //初始化Vue对象
    new Vue({
        el: ' #root",
        data: {
            num: 100,
            user: {username:" myxq"，password:"1234"}
        }，
    });
</script>

v-text

• v-text指令可以将变量的值原封不动的显示到页面的标签内部
• v-htm会将变量的值解释后显示到页面的标签内部

? 示例

<div id="root">
    <div>{{content}}</div>
    <div v-text="content"></div>
    <div v-html="content"></div>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            content:"<h1>abc</h1>"
        },
    });
</script>

v-bind

• v-bind只能将变量的值绑定到属性上
• 当属性发生变化后，并不能改变变量的值

示例

?

<div id="root">
    <input type="text" v-bind:value="message">
    {{message}}<br>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            message:"testData"
        }
    });
</script>

双向绑定 v-model

• 修改文本框中的内容，对应的变量的值也随之发生变化
• 值变化时, 文本的内容随着变化

示例

?

<div id="root">
    <input type="text" v-model="message">
    {{message}}<br>
    <button @click="testClick">点击</button>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            message:"testData"
        },
        methods:{
            testClick:function () {
                this.message = 'clickData'
            }
        }
    });
</script>

?

集合类型绑定

v-for="item in list"
v-for="(item,index) in list"
v-for=" (item,index) in listObj"
v-for="(value,key,index) in obj"

节点控制

• v-if
• v-show

生命周期

beforeCreate:function(){}
    创建前状态
created:function(){}
    创建完毕状态
beforeMount:function(){}
    挂载前状态
mounted:function(){}
    挂载完毕状态
beforeUpdate(){}
    更新界面之前
updated:function(){}
    更新界面之后
beforeDestroy:funection(){}
    销毁前状态
destroyed:function(){}
    销毁之后状态

Vue简单归纳

原文：https://www.cnblogs.com/mumuyinxin/p/11704330.html