阅读 85

Vue的一些基础

这是我参与8月更文挑战的第28天,活动详情查看:8月更文挑战

1.vue.js

1.1Hello Vue.js

 <div id="app">
     <div>{{msg}}</div>
 </div>
 <script src="vue.js"></script>
 <Script>
       new Vue ({
         el: '#app',
         data:{
             msg:'Hello Vue.js'
         }
 })
 </script>
复制代码

1.2 实例参数分析

  • el: 元素的挂载位置(值可以是css选择器或者是dom元素)
  • data:模型数据(值是一个对象)

1.3插值表达式用法

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

1.4Vue代码运行原理分析

  • 概述编译过程的概念(Vue语法--> 原生语法)image.png

2.Vue模板语法

2.1 如何理解前端渲染

把数据填充到HTML标签中

image.png

2.2前端渲染方式

  • 原生js拼接字符串
  • 使用前端模板引擎
  • 使用vue特有的模板语法

3.指令

3.1 什么是指令

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

3.2 v-cloak指令用法

  • 插值表达式存在的问题:"闪动"
  • 如何解决该问题: 使用v-cloak 指令
  • 解决该问题的原理: 先隐藏,替换好值之后再显示最终的值
 <style>
     [v-cloak]{
         display:none
 }
 </style>
 <div id="app">
     <div v-cloak>{{msg}}</div>
 </div>
 <script src="vue.js"></script>
 <Script>
       new Vue ({
         el: '#app',
         data:{
             msg:'Hello Vue.js'
         }
 })
 </script>
复制代码

3.3数据绑定

  • v-text 填充纯文本

    • 相比插值表达式更加简洁,没有闪动问题,更推荐用
  • v-html 填充HTML片段

    • 存在安全问题
    • 本网站内部数据可以使用,来自第三方的数据不可以用
  • v-pre 填充原始信息

    • 显示原始信息,跳过编译过程(分析编译过程)

3.4 数据响应式

  • 如何理解响应式

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

    • 数据绑定:将数据填充到标签中
  • v-once 只编译一次

    • 显示内容之后不再具有响应式功能,可以提高性能

3.5 双向数据绑定

就是修改页面会影响到数据的更改,修改数据也会影响到页面的更改

 <input type="text" v-model='msg'/>
复制代码

3.6 事件绑定

  • v-on 指令用法
 <input type ="button" v-on:click='num++'/>
复制代码
  • v-on 简写形式
 <input type ="button" @click='num++'/>
复制代码

函数事件的调用方式

  • 直接绑定函数名称 不需要传递事件对象
 <button v-on:click ='say'>
     hello
 </button>
复制代码
  • 调用函数 最后一个参数就是事件对象
 <button v-on:click ='say()'>
     sayhi
 </button>
复制代码

3.7 事件函数参数传递

  • 普通参数和事件对象
 <button v-on:click='say("hi",$event)'>
     say hi
 </button>
复制代码
  1. 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
  2. 如果事件绑定函数调用,那么事件对象必须作为最后一个参数进行传递,并且事件对象的名称必须是$event

3.8 事件修饰符

  • .stop 阻止冒泡

<a v-on:click.stop='handle'>跳转</a>

  • .prevent 阻止默认行为

<a v-on:click.prevent='handle'>跳转</a>

这样子就不会发生跳转了

按键修饰符

  • .enter 回车键

<input v-on:keyup.enter='submit'>

  • .delete 删除键

<input v-on:keyup.delete='handle'>

自定义按键修饰符

  • 全局config.keyCodes.f1 = 112
 Vue.config.keyCodes.f1 = 112 (112 是 keycode的值)
复制代码

3.9 属性绑定

Vue如何动态处理属性

  • v-bind 指令用法
 <a v-bind:href='url'>跳转</a>
复制代码
  • 缩写形式
 <a :href='url'>跳转</a>
复制代码

v-model 的底层实现原理

 <input v-bind:value='msg' v-on:input="msg=$event.target.value">
复制代码

4.1 样式绑定

  • 对象语法
 <div v-bind:class="{active: isActive}">
     
 </div>
复制代码
  • 数组语法
 <div v-bind:class="[activeClass,errorClass]">
     
 </div>
复制代码

4.2 样式绑定相关语法细节

  1. 对象绑定和数组绑定可以结合使用
  2. class绑定的值可以简化操作
  3. 默认的class如何处理

默认的class不会覆盖,会保留

4.3 style 样式处理

  • 对象语法
 <div v-bind:style="{color: activeColor,fontSize:fontSize}">
     
 </div>
复制代码
  • 数组语法
 <div v-bind:style="[baseStyles,overridingStyles]">
     
 </div>
复制代码

4.4 分支循环结构

  • v-if
  • v-else
  • v-else-if
  • v-show 单纯的控制 display:none/block

v-if and v-show 的区别

  • v-if 控制元素是否渲染到页面
  • v-show 控制元素是否已经显示(已经渲染到了页面)

4.5 循环结构

  • v-for 遍历循环
 <li v-for='item in list'>{{item}}</li>
 ​
 <li v-for='(item,index) in list'>{{item}} + '--' {{index}}</li>
复制代码
  • key的作用: 帮助vue区分不同的元素,从而提高性能
 <li :key='item.id' v-for="(item,index) in list">{{item}} +'--' {{index}}</li>
复制代码
  • v-for 遍历对象
 <div v-for='(value,key,index) in object'>
     
 </div>
复制代码
  • v-if 和 v-for 结合使用
 <div v-if='value==12' v-for'(value,key,index) in object'>
     
 </div>
复制代码
文章分类
前端
文章标签