Vue简单归纳

目录

• Vue.JS
  • Vue.JS介绍
    • 概述
    • MVVM模式
    • 示例图
    • 快速入门
  • 事件绑定
    • 什么是事件
    • 单击事件绑定
      • 原生JS
      • vuejs绑定
      • 示例
    • 键盘事件
      • 示例
    • 按键修饰符
      • 示例
    • 鼠标事件
    • 事件修饰符
      • 阻止事件默认
      • 事件冒泡
  • 数据绑定
    • 插值
      • 示例
    • v-text
    • v-bind
      • 示例
    • 双向绑定 v-model
      • 示例
    • 集合类型绑定
  • 节点控制
  • 生命周期

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(){}
	销毁之后状态