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（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航