开发者社区> rlq_浅> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue - day1

简介: Vue - day1 什么是Vue Vue.js 是目前最火的衣一个前端框架 Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.
+关注继续查看

Vue - day1

什么是Vue

  • Vue.js 是目前最火的衣一个前端框架
  • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.

为什么要学习流行框架

  • 企业为了提高开发效率

  • 提高开发效率的发展历程: 原生js => jquery之类的类库 => 前端模板引擎 => angular.js/vue.js

  • 在vue中 一个核心的概念,就是让用户不在操作DOM元素,解放了用户双手,让程序员可以更多的时间去关注业务逻辑;

MVVM (Model View ViewModel)

MVVM 是前端视图层的分层开发思想, 主要把每个页面分成了M, V, VM其中VM 是核心

  • M -> Model(数据模型) (data,就是M)
  • V -> View(视图模型) (vue实例所控制的元素区域,就是V)
  • VM -> ViewModel(一个同步View和Model的对象) (new出来的Vue对象,就是VM调度者)
MVVM (Model View ViewModel)

Vue 常用系统指令

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:(官方)

数据绑定最常见的形式,其中最常见的是使用插值表达式,写法是{{}} 中写表达式

例如:<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。

无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

{{}}对JavaScript 表达式支持,例如:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

但是有个限制就是,每个绑定都只能包含单个表达式,如下表达式无效:

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 这也是语句,不是表达式 -->
{{ number++ }} 会报警告:vue2.js:482 [Vue warn]: You may have an infinite update loop in a component render function.

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

<span v-once>这个将不会改变: {{ msg }}</span>

v-text

v-text可以将一段文本渲染到指定的元素中,例如

<div v-text="msg"></div>
new Vue({
  data:{
      msg:'hello world'
  }
});

输出结果

<div>hello world</div>

v-html

v-html可以将一段html代码插入指定元素中,例如:

<div v-html="rawHtml"></div>
  new Vue({
      data:{
          rawHtml:'<h1>hello world</h1>'
      }
})

注意: 你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

v-bind (:)

Mustache 语法(插值表达式)不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:

<div v-bind:id="dynamicId"></div>

v-for

v-for用法:

item in Array
(item, index) in Array
value in Object
(value, key, index) in Object

:key属性具有唯一性,不能重复,它能够唯一标识数组的每一项

将来数据中的某一项的值发生了改变,则v-for只会更新当前项对应的这个dom元素的值,而不是更新整个数据,从而提高效率,参考https://www.zhihu.com/question/61064119/answer/183717717

注意:以下变动不会触发视图更新

  1. 通过索引给数组设置新值
  2. 通过length改变数组

解决:

  1. Vue.set(arr, index, newValue)
  2. arr.splice(index, 1, newValue)

v-model

  • v-model指令 用来双向数据绑定,就是model和view中的值进行同步变化

  • v-model只能在以下元素中使用:

    • input / textarea / select / components(Vue中的组件)

例如:

文本:

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

v-on (@)

1、作用:绑定事件监听,表达式可以是一个方法的名字或一个内联语句,
如果没有修饰符也可以省略,用在普通的html元素上时,只能监听 原生
DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

2、常用事件:

  v-on:click
  v-on:keydown
  v-on:keyup
  v-on:mousedown
  v-on:mouseover
  v-on:submit
  ....

3、示例:

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 阻止默认行为,没有表达式 -->
<form v-on:submit.prevent></form>

5、v-on的缩写形式:可以使用@替代 v-on:

<button @click="doThis"></button>

6、按键修饰符

触发像keydown这样的按键事件时,可以使用按键修饰符指定按下特殊的键后才触发事件

写法:
  <input type="text" @keydown.enter="kd1">  当按下回车键时才触发kd1事件

  由于回车键对应的keyCode是13,也可以使用如下替代
  <input type="text" @keydown.13="kd1">  当按下回车键时才触发kd1事件

  但是如果需要按下字母a(对应的keyCode=65)才触发kd1事件,有两种写法:
  1、由于默认不支持a这个按键修饰符,需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为:

  Vue.config.keyCodes.a = 65
  <input type="text" @keydown.a="kd1">  这样即可触发

  2、也可以之间加上a对应的数字65作为按键修饰符
  <input type="text" @keydown.65="kd1">  这样即可触发

  键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

v-if

1、作用:根据表达式的值的真假条件来决定是否渲染元素,如果条件为false不渲染(达到隐藏元素的目的),为true则渲染。在切换时元素及它的数据绑定被销毁并重建

2、示例:

<!-- Handlebars 模板 -->
{{#if isShow}}
  <h1>Yes</h1>
{{/if}}

通常我们使用写法居多:

<h1 v-if="isShow">Yes</h1>

也可以用 v-else 添加一个 “else” 块:

<h1 v-if="isShow">Yes</h1>
<h1 v-else>No</h1>

注意:v-else 元素必须紧跟在 v-if 元素否则它不能被识别。

new Vue({
    data:{
      isShow:true
    }
});

v-show

1、根据表达式的真假值,切换元素的 display CSS 属性,如果为false,则在元素上添加 display:none来隐藏元素,否则移除display:none实现显示元素

2、示例:

<h1 v-show="isShow">Yes</h1>

new Vue({
  data:{
    isShow:true
      }
});

v-if和v-show的总结:

v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中,

而v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

v-cloak

v-cloak指令保持在元素上直到关联实例结束编译后自动移除,v-cloak和 CSS 规则如[v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
通常用来防止{{}}表达式闪烁问题
例如:

<style>
[v-cloak] { display: none }
</style>

在span上加上 v-cloak和css样式控制以后,浏览器在加载的时候会先把span隐藏起来,知道 Vue实例化完毕以后,才会将v-cloak从span上移除,那么css就会失去作用而将span中的内容呈现给用户

<span v-cloak>{{msg}}</span>    

new Vue({
  data:{
      msg:'hello ivan'
    }
})

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
day6
day6
204 0
day5
day5
862 0
day004
ecs和polardb搭建门户网站
233 0
day5
1. 创建资源 2. 创建PolarDB数据库账号 3. 连接ECS服务器 4. 安装LAMP环境
84 0
AI视觉DAY1
视觉生产技术
244 0
Vue - day7
day7 使用饿了么的 MintUI 组件 Mint-UI官方文档 使用 ElementUI 组件 Element-UI官方文档 MUI (代码片段) 体验上来说, MUI 和 bootstrap 类似 理论上, 任何项目都可以使用 MUI 或 ...
926 0
Vue - day5
day5 - webpack 在网页中会引用那些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .
1520 0
Vue - day3
day3 Vue 组件 定义Vue组件 什么是组件: 组件的出现, 就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能, 将来需要什么功能, 直接调用对应的组件即可.
1010 0
Day_2
       下面是关于递归的例子:       递归找了个简单的1到n求和的例子,递归我的理解是每次做到快出结果的时候保存pc指针到堆栈中,去调用自己接着同样一件事情,只是参数变化了,也就是重复的函数操作,占用的内存比循环大的多,但是写法简单。
394 0
+关注
rlq_浅
前端开发工程师
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载