一、Vue概述

尤雨溪: Vue.js的创建者Vue框架作者

  • 2014年2月 , Vue.js正式发布
  • 2015年10月27日,正式发布1.0.0
  • 2016年4月27日,发布2.0的预览版本

Vue：渐进式JavaScript框架

官网

声明式渲染>组件系统>客户端路由→集中式状态管理>项目构建

  • 易用:熟悉HTML、CSS、 JavaScrip知识后 ,可快速上手Vue
  • 灵活:在一个库和一套完整框架之间自如伸缩
  • 高效: 20kB运行大小,超快虛拟DOM

二、Vue基本使用

1、传统开发模式对比

原生JS：

<div id= "msg"></div>
<script type="text/javascript">
var msg = 'Hello world' ;
var div = document .getElementById( 'msg') ;
div.innerHTML = msg;
</script>

jQuery：

<div id= "msg"></div>
<script type="text/javascript"" src="js/jquery.js"></script>
<script type="text/javascript">
var msg = 'Hello World' ;
$('#msg').html (msg) ;
</script>

Vue.js：

<div id="app">
	<div>{{msg}}</div>
</div>
<script type="text/javascript" src ="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app' ,
data: {
msg: 'Helloworld'
}
})
</script>

2、语法分析

实例参数分析：

  • el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
  • data：模型数据（值是一个对象）

插值表达式用法：

  • 将数据填充到HTML标签中
  • 插值表达式支持基本的计算操作
    | | |
    |–|--|
    | | |

三、Vue模板语法

1、如何理解前端渲染？

把数据填充到HTML标签中

在这里插入图片描述

2、前端渲染方式

  • 原生js拼接字符串

    基本上就是将数据以字符串的形式拼接到HTML标签中：
    在这里插入图片描述

    缺点:不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来。

  • 使用前端模板引擎

    下面是基于模板引擎art-template的一段代码：

    3

    优点:大家都遵循同样的规则写代码分代码可读性明显提高了,方便后期的维护。
    缺点:没有专门提供事件机制。

  • 使用vue特有的模板语法

    模板语法：

    • 差值表达式
    • 指令
    • 事件绑定
    • 属性绑定
    • 样式绑定
    • 分支循环结构

四、指令

1、什么是指令?

  • 什么是自定义属性
  • 指令的本质就是自定义属性
  • 指令的格式:以v开始(比如:v-cloak)
    心

v-cloak指令用法：

  • 插值表达式存在的问题:“闪动”
  • 如何解决该问题:使用v-cloak指令
  • 解决该问题的原理:先隐藏,替换好值之后再显示最终的值

提供样式:

[v-cloak]{
    display: none;
}

在插值表达式所在的标签中添加v-cloak指令

背后的原理:先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

<style>
    [v-clock]{
    	display: none;
 	}
</style>
<div id="app">
	<div v-clock>
		{{msg}}
	</div>
</div>
<script src="../js/vue.min.js"></script>
<script>
var vm = new Vue({
	el:'#app',
	data:{
		msg:'Hello Vue'
	}
})
</script>

2、数据绑定指令

  • v-text填充纯文本

    不存在闪的问题，推荐使用

  • v-html填充HTML片段

    • 存在安全问题
    • 本网站内部数据可以使用，来自第三方的数据不可以使用

  • v-pre填充原始信息

    • 显示原始信息，跳过编译过程

3、指令

数据响应式

  • 如何理解响应式

    • html5中的响应式(屏幕尺寸的变化导致样式的变化)
    • 数据的响应式(数据的变化导致页面内容的变化)

  • 什么是数据绑定

    • 数据绑定 :将数据填充到标签中

  • v-once只编译一次

    • 显示内容之 后不再具有响应式功能

    如果显示的信息后续不需要在修改，可以使用，可提高性能

4、双向数据绑定

双向指的是：

用户修改页面的内容，会影响数据中的内容变化

数据中的内容变化又会影响数据绑定的页面的变化

v-model='uname/'

<div id="app">
        <div v-clock>
            {{msg}}
        </div>
        <input type="text" v-model='msg'>
    </div>
    <script src="../js/vue.min.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: 'Hello Vue',
		}
	})
</script>

效果：

1

MVVM设计思想
  • M(model)
  • V(view)
  • VM(View-Model)1

在这里插入图片描述

5、事件绑定

事件的处理：

  • v-on指令

    <input type='button' v-on:click='num++'/>

    如下示例代码：

    <div id="app">
        <div>{{num}}</div>
        <div>
            <input type="button" v-on:click='num++' value="点击">
        </div>
    </div>
    <script src="../js/vue.min.js"></script>
<script>
    var vm = new Vue({
    	el:'#app',
   		 	data: {
    		num : 0
   		 }
    })
</script>

    效果：

在这里插入图片描述

  • v-on简写形式

    <input type='button' @click='num++'/>

事件函数的调用：

  • 直接绑定函数名称

    <button v-on:click='say'>点击</button>

    示例代码：

     <div id="app">
        <div>{{num}}</div>
        <div>
            <input type="button" v-on:click='num++' value="点击">
            <input type="button" @click='num++' value="点击">
            <input type="button" @click='handle' value="点击1">
            <input type="button" @click='handle()' value="点击1">
        </div>
    </div>
    <script src="../js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                num : 0
            },
            methods:{
                handle:function(){
                    this.num++//this指的是vm
                }
            }
        })
    </script>

    效果：

在这里插入图片描述

  • 调用函数

    <button v-on:click='say()'>点击</button>

    函数传参的时候使用

参数传参：

看如下例子：

<div id="app">
    <div>{{num}}</div>
    <div>
        <button @click="handle1($event)">点击1</button>
        <button @click="handle2(111,222,$event)">点击2</button>
    </div>
</div>


<script src="../js/vue.min.js"></script>
<script >
   var vm = new Vue({
       el:'#app',
       data:{
           num:0
       },
       methods:{
            handle1: function (event) {
                this.num++
                console.log(event.target.innerHTML);
            },
           handle2: function (a,b,event) {
                this.num++
               console.log(a, b);
               console.log(event.target.innerHTML);
               console.log(event.target.tagName);
           }
       }
   })
</script><div id="app">
    <div>{{num}}</div>
    <div>
        <button @click="handle1($event)">点击1</button>
        <button @click="handle2(111,222,$event)">点击2</button>
    </div>
</div>


<script src="../js/vue.min.js"></script>
<script >
   var vm = new Vue({
       el:'#app',
       data:{
           num:0
       },
       methods:{
            handle1: function (event) {
                this.num++
                console.log(event.target.innerHTML);
            },
           handle2: function (a,b,event) {
                this.num++
               console.log(a, b);
               console.log(event.target.innerHTML);
               console.log(event.target.tagName);
           }
       }
   })
</script>
  • 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
  • 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，且参数名为$event
事件修饰符：

1、阻止事件冒泡

实例如下：

<div id="app">
    <div>{{num}}</div>
    <div v-on:click="handle0">
        <button v-on:click="handle1">点击</button>
    </div>
</div>
<script >
    var vm = new Vue({
        el: '#app',
        data: {
            num:0
        },
        methods: {
            handle0: function () {
                this.num ++
            },
            handle1: function (event) {
                // event.stopPropagation()//阻止事件冒泡
            }
        }
    })
</script>

当点击button的时候必定会冒泡到他的父元素div中，从而触发了handle0方法，使得num++

为了解决事件冒泡，点击button的时候num++不会触发，所以有了事件修饰符

  • 方法1：在函数中添加event.stopPropagation()来阻止事件冒泡

  • 方法2：在事件后面直接添加.stop即可阻止

    <button v-on:click.stop="handle1">点击</button>

2、阻止默认行为.preventDefault()或.prevent

<a v-on:click.prevent="handle">跳转</a>
按键修饰符：
<script src="../js/vue.min.js"></script>
<div id="app">
    <form action="#">
        <div>
            用户名
            <input type="text" v-on:keyup.delete="clearContent" v-model="uname">
        </div>
        <div>
            密码
            <input type="text" v-on:keyup.enter="handleSubmit" v-model="pwd">
        </div>
        <div>
            <input type="button" v-on:click="handleSubmit" value="提交">
        </div>

    </form>
</div>
<script >
    var vm = new Vue({
        el: '#app',
        data: {
            uname: '',
            pwd: ''
        },
        methods: {
            handleSubmit: function () {
                console.log(this.uname, this.pwd);
            },
            clearContent: function () {
                this.uname = ''; //按delete键的时候，清空内容
            }
        }
    })
</script>

通过按键修饰符来设置，当提交表单的时候用enter键就可以提交，delete一键清空用户名或者密码

  • .enter回车键
  • .delete删除键

自定义按键修饰符：

全局config.keyCodes对象

规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

Vue.config.keyCode.a=65

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue