Javascript

VUE(一)

本文主要是介绍VUE(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

vue简介

什么是vue?

官方给出的概念:Vue(读音/vju:/,类似于view)是一套用于构建用户界面的前端框架

vue的特性

vue框架的特性,主要体现在如下两方面:
① 数据驱动视图
② 双向数据绑定

数据驱动视图

在使用了vue的页面中,vue会监听数据的变化,从而自动重新渲染页面的结构。

好处:当数据发生变化时,页面会自动重新渲染!

数据驱动视图是单向的数据绑定。

双向数据绑定

填写表单时,双向数据绑定可以辅助开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据中。
好处:开发者不再需要手动操作DOM元素,来获取表单元素最新的值!

MVVM

MVVM是vue实现数据驱动视图双向数据绑定的核心原理。MVVM指的是 Model、View和ViewModel,它把每个HTML页面都拆分成了这三个部分,如图所示:
image

在MVVM概念中:
Model表示当前页面渲染时所依赖的数据源。
View表示当前页面所渲染的DOM结构。
ViewModel表示vue的实例,它是MVVM的核心。

MVVM的工作原理

ViewModel作为MVVM的核心,是它把当前页面的数据源(Model)页面结构(Vive)连接在了一起。

数据源发生变化时,会被ViewModel监听到,VM会根据最新的数据源自动更新页面的结构
表单元素的值发生变化时,也会被VM监听到,VM会把变化过后最新的值自动同步到Model数据源中。

vue的基本使用

基本使用步骤

① 导入vue.js的script脚本文件
② 在页面中声明一个将要被vue所控制的DOM区域
③ 创建vm实例对象(vue 实例对象)

<body>
    <!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id='app'>{{username}}</div>

    <!-- 导入 vue.js 的script 脚本文件 -->
    <script src='./lib/vue-2.6.12.js'></script>
    <script>
        const vm =  new Vue({
            el:'#app',
            data:{
                username:'zhangsan'
            }
        })
    </script>
</body>

vue 的指令与过滤器

指令的概念

指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构
vue中的指令按照不同的用途可以分为如下六大类:
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令

指令是vue开发中最基础、最常用、最简单的知识点。

内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容
常用的内容渲染指令有如下3个:

  • v-text
  • {{}}
  • v-html

v-text

用法实例:

<!-- 把 username 对应的值,渲染到第一个 p 标签中 -->
<p v-text='username'></p>

<!-- 把 gender 对应的值,渲染到第二个p标签中 -->
<!-- 注意:第二个p标签中,默认的文本“性别”会被 gender 的值覆盖掉 -->
<p v-text='gender'>性别</p>
v-text指令会覆盖元素内默认的值。

{{}}语法

vue提供的{{}}语法,专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式(英文名为:Mustache)

相对于v-text指令来说,插值表达式在开发中更常用一些!因为它不会覆盖元素中默认的文本内容。

v-html

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-html这个指令:

<p v-html='disciption'></p>

属性绑定指令

差值表达式只能用在元素的内容节点中,不能用在元素的属性节点中! 如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令。用法示例如下:
<input type='text' v-bind:placeholder='tips'>

vue规定v-bind:指令可以简写为 :

使用JavaScript表达式

在vue提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持JavaScript表达式的运算,例如:

{{ number+1 }}

{{ OK ? 'YES':'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

事件绑定指令

vue提供了 v-onn 事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。语法格式如下:

<h3>count 的值为:{{count}}</h3>
<!-- 语法格式为v-on:事件名称="事件处理函数的名称" -->
<button v-on:click='addCount'>+1</button>

函数来源于methods对象

methods:{
    addCount:function(){
        this.count++;
    }
}

定义函数可以去掉:function进行简写:

methods:{
    addCount(){
        this.count++;
    }
}

v-on: 指令可以简写为 @

原生DOM对象有 onclick、oninput、onkeyup 等原生事件,替换为vue的事件绑定形式后,分别为:v-on:click、v-on:input、v-on:keyup

事件修饰符

在事件处理函数中调用 event.preventDefault()或event.stopPropagation()似乎非常常见的需求。因此,vue提供了事件修饰符的概念,来辅助程序员更方便地对事件的触发进行控制。常用的五个事件修饰符如下:

事件修饰符 说明
.prevent 阻止默认行为(例如:阻止a连接的跳转、阻止表单的提交等)
.stop 阻止冒泡事件
.capture 以捕获模式触发当前的实践处理函数
.once 绑定的事件只触发1次
.self 只有在event.target是当前元素自身时触发事件处理函数

按键修饰符

在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符,例如:

<!-- 只有在‘key’是‘Enter’时调用‘vm.submit()’ -->
<input @keyup.enter='submit'>

<!-- 只有在‘key’是‘Esc’时调用‘vm.clearInput()’ -->
<input @keyup.esc='clearInput'>

双向数据绑定指令

vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下,快速获取表单的数据

<p>用户名是:{{username}}</p>
<input type='text' v-model='username'/>

<p>选中的省份是:{{province}}</p>
<select v-model='province'>
    <option value=''>请选择</option>
    <option value='1'>北京</option>
    <option value='2'>河北</option>
    <option value='3'>黑龙江</option>
</select>

v-model指令的修饰符

为了方便对用户输入的内容进行处理,vue为v-model指令提供了3个修饰符,分别是:

修饰符 作用 示例
.number 自动将用户的输入值转为数值类型 <input v-model.number='age'/>
.trim 自动过滤用户输入的首尾空白字符 <input v-model.trim='msg'/>
.lazy 在“change”时而非“input”时更新 <input v-model.lazy='msg'/>

示例用法如下:

<input type='text' v-model.number='h1'>+
<input type='text' v-model.number='n2'=
<span>{{n1 + n2}}</span>

条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个,分别是:

  • v-if
  • v-show

示例如下:

<div id='app'>
    <p v-if='networkState === 200'请求成功 --- 被 v-if 控制</p>
    <p v-show="networkState === 200">请求成功 --- 被 v-show 控制</p>
</div>
  1. v-show 的原理是:动态为元素添加或移除display:none样式,来实现元素的显示和隐藏

    • 如果要频繁地切换元素的显示状态,用v-show性能会更好
  2. v-if 的原理是:每次动态创建或移除元素,实现元素的显示和隐藏。

    • 如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时v-if性能更好。

v-else-if

v-else-if指令,顾名思义,充当v-if的“else-if块”,可以连续使用:

<div v-if="type=== 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
v-else-if指令必须配合v-if指令一起使用,否则它将不被识别!

列表渲染指令

vue提供了v-for列表渲染指令,用来辅助开发者基于数组来循环渲染一个列表结构。v-for指令需要使用 item in items形式的特殊语法,其中:

  • items 是待循环的数组
  • items 是被循环的每一项
data:{
    list:[
        {id:1,name:'zhangsan'},
        {id:2,name:'lisi'}
    ]
}

<ul>
    <li v-for="item in list">姓名是:{{item.name}}</li>
</ul>

v-for中的索引

v-for指令还支持一个可选的第二个参数,即当前索引。语法格式为(item,index) in items

v-for指令中的item项和index索引都是形参,可以根据需要进行重命名。例如(user,i) in userlist

官方建议:只要用到了v-for指令,那么一定要绑定一个 :key 属性。而且尽量把id作为key的值。官方对key的值类型,是有要求的:字符串或数字类型.

key的注意事项

  • ① key的值只能是字符串或数字类型

  • ② key的值必须具有唯一性(即:key的值不能重复)

  • ③ 建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)

  • ④ 使用 index 的值当做key的值没有任何意义(因为index的值不具有唯一性)

  • ⑤ 建议使用v-for指令一定要指定key的值(既提升性能、又防止列表状态紊乱)

过滤器(vue3中被移除)

过滤器(Filter)是vue为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部,由“管道符”进行调用,实例代码如下:

<!-- 在双花括号中通过“管道符”调用capitalize过滤器,对message的值进行格式化 -->
<p>{{ message | capitalize }}</p>

<!-- 在 v-bind 中通过“管道符”调用formatId 过滤器,对rawId 的值进行格式化 -->
<div v-bind:id='rawId | formatId'></div>

私有过滤器和全局过滤器

在filters节点下定义的过滤器,称为“私有过滤器”,因为当它只能在当前vm实例所控制的el区域内使用。如果希望再多个vue实例之间共享过滤器,则可以按照如下格式定义全局过滤器

// 全局过滤器 - 独立于每个 vm 实例之外
// Vue.filter() 方法接收两个参数:
//  第一个参数,是全局过滤器的“名字”
//  第二个参数,是全局过滤器的“处理函数”
Vue.filter('capitalize',(str)=>{
    return str.charAt(0).toUpperCase()+ str.slice(1)+'~~'
})

连续调用多个过滤器

过滤器可以串联地进行调用,例如:

<!-- 把 message 的值,交给 filterA 进行处理 -->
<!-- 把 filterA 处理的结果,再交给 filterB 进行处理 -->
<!-- 最终把 filterB 处理的结果,作为最终的值渲染到页面上 -->
{{ message | filterA | filterB }}

过滤器传参

过滤器的本质JavaScript函数,因此可以接收参数,格式如下:

<!-- arg1 和 arg2 是传递给 filterA 的参数 -->
<p>{{ message | filterA(arg1,arg2) }}</p>

// 过滤器处理的形参列表中:
//   第一个参数:永远都是“管道符”前面待处理的值
//   从第二个参数开始,才是调用过滤器是传递过来的参数

Vue.filter("filterA",(msg,agr1,agr2)=>{
    // 过滤器的代码逻辑...
})
这篇关于VUE(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!