Javascript

Vue基础知识 第一天

本文主要是介绍Vue基础知识 第一天，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
  • 概述
    • 基本使用
      • 实例参数
      • 插值表达式
      • Vue代码运行原理分析
  • Vue模板语法
    • 前端渲染方式
    • 模板语法概览
    • 指令
      • v-cloak
      • v-text
      • v-html
      • v-pre
      • v-once数据响应式
      • 事件绑定
        • v-on
          • 事件函数参数传递以及两种v-on调用的区别
        • 事件修饰符
          • .stop
          • .prevent
        • 按键修饰符
          • .enter
          • .delete
          • 自定义按键修饰符
      • v-model
        • 数据双向绑定
      • v-blind
        • 属性绑定
        • 样式绑定
        • class样式绑定
        • style样式处理
      • 分支结构
        • v-if   v-else-if   v-else
        • v-show
      • 循环结构
        • v-for

概述

渐进式JavaScript框架

声明式渲染-->组件系统-->客户端路由-->集中式状态管理-->项目构建

基本使用

实例参数

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

插值表达式

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

Vue代码运行原理分析

概述编译过程的概念( Vue语法→原生语法)

Vue模板语法

前端渲染方式

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

模板语法概览

  • 插值表达式
  • 指令
  • 事件绑定
  • 属性绑定
  • 样式绑定
  • 分支循环结构

指令

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

v-cloak

  • 解决插值表达式存在的问题:“闪动”

  • 原理:先隐藏,替换好值之后再显示最终的值

  • v-cloak指令的用法

    <head> 
  <style type="text/css">
    /* 1、提供样式 */
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>{{msg}}</div>
  </div>
  <script type=" text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 2、在插值表达式所在的标签中添加v-cloak指令
    var vm = new Vue({
      el:' #app',
      data: {
      msg: ' Hello Vue'
    });
  </script>
</body>

v-text

  • 填充纯文本
  • 相比插值表达式更加简洁
<span v-text=" msg" ></span>
<!--和下面的一样--> 
<span>{ {msg} }</span>

v-html

  • 填充HTML片段
  • 存在安全问题
  • 本网站内部数据可以使用,来自第三方的数据不可以用

v-pre

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

v-once

  • 显示内容之后不再具有响应式功能
  • 应用场景:如果显示的信息后续不需要再修改，你们可以使用v-once,这样可以提高性能

数据响应式

  • 如何理解响应式？
    • htmI5中的响应式(屏幕尺寸的变化导致样式的变化)
    • 数据的响应式(数据的变化导致页面内容的变化)
  • 数据绑定：将数据填充到标签中

事件绑定

v-on

  • v-on指令用法

    <input type='button' v-on:click='num++' />

  • v-on简写形式

    <input type='button' @click='num++' />

  • 调用方式

    • 直接绑定函数名称

      <input type='button' v-on:click='say' />

    • 调用函数

      <input type='button' v-on:click='say()' />

  • 事件函数参数传递以及两种v-on调用的区别

    • 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
    • 如果事件绑定函数调用，那么事件对象必须作为最后一个 参数显示传递，并且事件对象的名称必须是$event

  • 事件修饰符

    .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'>

    自定义按键修饰符

    • Vue只为最常见的键提供了别名

    • 全局config.keyCodes对象

    • Vue.config.keyCode = 65
// Vue.config.keyCode.按键名称 = 值
Vue.config.keyCode.a = 65

      自定义按键修饰符的名称是自定义的，但是对应值必须是keyCode值

v-model

  • 实现双向数据绑定

数据双向绑定

  • 什么是双向数据绑定？

    • 我们先从单向绑定切入，单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新
    • 在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定

    MVVM设计模式

    • 当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定，关系图如下

  • 低层实现原理

    <input v-blind:value="msg" v-on:input="msg=$event.target.value">

  • 用法

    <input type='text' v-model='uname' />
/* uname这个值也是位于data中的 */

v-blind

属性绑定

  • 用法
    <a v-blind:href='url'>跳转</a>
  • 缩写形式
    <a :href='url'>跳转</a>

样式绑定

  • class样式绑定

    • 对象语法

      <div v-bind:class="{active:isActive }"></div>

    • 数组语法

      <div v-bind:class="[activeClass, errorClass]"></div>

  • style样式处理

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

分支结构

v-if   v-else-if   v-else

  • 控制元素是否渲染到页面
  • 可以在

v-show

  • 控制元素是否显示（已经渲染到页面）
  • 原理：控制display:none

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环结构

v-for

  • 把映射为一组元素

    • 一个参数情况下，参数是被迭代的数组元素
      <li v-for='item in list'>{{item}}</li>
    • 两个参数情况下，第一个参数是内容，第二个参数为索引号
      <li v-for='(item,index) in list'>{{item}} + --- + {{index}}</li>

  • 在v-for中使用对象

    • 一个参数情况下，参数是对象中的值

      <li v-for="value in myObject">{{value}}</li>

    • 两个参数情况下，参数分别是值和键

      <li v-for="(value, name) in myObject">
  {{ name }}: {{ value }}
</li>

    • 三个参数情况下，参数分别是值、键和索引

      <li v-for="(value, name, index) in myObject">
  {{ index }}. {{ name }}: {{ value }}
</li>

  • v-for 中也可以接收整数，重复对应次数(从1开始到n)

  • 也可以在

这篇关于Vue基础知识 第一天的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航