我是靠谱客的博主 老实香菇,这篇文章主要介绍vue基础总结按键修饰符,现在分享给大家,希望可以做个参考。

vue的作用

用更少的时间,干更多的活

vue是一个渐进式的JavaScript框架,一个mvvm框架

vue开发有两种方式

①传统开发模式:基于html/css/js文件开发vue

②工程化开发模式:在webpack环境中开发vue

vue脚手架

@vue/cli  可以帮助我们快速创建一个vue项目的基础架子

vue脚手架的特点

①开箱即用

②零配置

③内置babel等工具

vue脚手架的基本使用

①全局安装

npm i @vue/cli -g   或  yarn global add @vue/cli

②查看vue的版本

vue --version

③初始化一个vue项目

vue create 项目名(项目名不能用中文)

④启动项目,打包项目

yarn servenpm run serve

yarn buildnpm run build

一个vue文件就是一个组件

一个单文件组件由三部分组成

①template:结构(有且只能有一个根元素)

②script:js逻辑

③style:样式 如果需要less 那么就在style的属性里面添加 lang=“less” 

关于less的支持 脚手架内部已经配好了 只不过不会默认装这个包

原则是我们用到了less,再去安装这个包

安装命令

yarn add less-loader@7.2.1 less -D

vue如何提供数据

①通过data属性可以提供数据。data属性必须是一个函数

②这个函数需要返回一个对象,这个对象就代表vue提供的数据

例如

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script> data() { return { studentArr: [ { id: 1, name: "zs", age: 16 }, { id: 2, name: "ls", age: 18 }, { id: 3, name: "ww", age: 17 }, { id: 4, name: "cq", age: 17 }, { id: 5, name: "ss", age: 19 }, ], }; }, }; </script>

插值表达式

小胡子语法{{}}

例如

复制代码
1
2
3
4
5
6
7
8
//变量调用 <div>{{id}}</div> //对象属性调用 <div>{{studentArr.id}}</div> //字符串的方法调用 <div>{{msg.toUpperCase()}}</div> //三元表达式调用 <div>{{obj.age>18?'成年' : '未成年'}}</div>

能使用三元表达式,但是不能使用if 和for

正常标签的内容部分可以使用{{}}

不能再标签属性中使用{{}}插值

vue指令

特殊的html标签属性。特点是v-开头

每一个v-开头的指令都有自己独立的功能

v-bind 

作用:动态设置html标签属性

用法

v-bind:标签属性名='变量'

简写语法     :标签属性名='变量'

v-on

作用:注册事件

用法

v-on:事件名='要执行的少量代码'

当逻辑只有一句话的就可以执行

例如

v-on:click='money++'

v-on:事件名='methods中的函数名'

值放在data中

方法放在methods中

例如

复制代码
1
2
3
4
5
6
7
8
9
<script> export default { methods:{ getName(){ return '大帅哥' } } }; </script>

v-on: 可以简写成@

阻止默认行为

@click.prevent

阻止冒泡

@click.stop

可以串着使用 前后顺序没有影响 就是不能再事件名之前

@click.prevent.stop

按键修饰符

监听回车键

@keyup.enter

v-show 和 v-if 功能控制盒子的显示隐藏

v-show='true'  v-show='false' 

原理是 控制css中的 display:none

常用于需要频繁切换的场景

v-if="true" v-if="false" 

原理是 创建和删除节点

要么显示要么隐藏 v-if是惰性的

如果一开始就是 v-if='false'那么不会创建该节点 对于一直隐藏的元素, 可以提高性能

v-else  和v-else-if 使用的时候 需要紧贴着 才能被视为一组

例如

复制代码
1
2
3
4
<div v-if="arr.age > 14">14以上18一下</div> <div v-else-if="arr.age > 18">18了成年了</div> <div v-else>小孩子</div>

v-model 作用:给表单使用,双向绑定数据

v-model会忽略掉表单元素原本的value checked等初始值

v-model的修饰符

v-model.number

转数字 以 parse Float 转成数字类型

v-model.trim

去除首尾空白字符

v-model.lazy

在change时出发而非input时

v-for 作用可以遍历数组或者对象  用于渲染结构

遍历数组

 v-for ='item in 数组名'

v-for ='(item,index) in 数组名'

遍历对象

v-for='(value ,key) in 对象名'

遍历数字

v-for='item in 数字'

vue就地服用策略

vue会尽可能就地(同层级,同位置)对比虚拟dom,服用dom结构,进行差异化更新

虚拟dom:本质就是保持节点信息描述真实dom的js对象,可以用最少的属性结构,描述真实dom的js对象,提升了性能

diff算法

策略1:先同层级根元素比较,如果根元素变化,那么不考虑复用,整个dom树删除重建

策略2:对比同级兄弟元素时,默认按照下标进行对比复用,如果对比兄弟元素时,元素指定了key,那么就会按照相同的key元素来进行对比复用

【博学谷学习记录】超强总结,用心分享

最后

以上就是老实香菇最近收集整理的关于vue基础总结按键修饰符的全部内容,更多相关vue基础总结按键修饰符内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(62)

评论列表共有 0 条评论

立即
投稿
返回
顶部