【笔记整理】—— 2.13 Vue概述 | 指令 | 添加样式

最新推荐文章于 2022-11-04 16:10:34 发布

今天也努力学习的Paul

最新推荐文章于 2022-11-04 16:10:34 发布

阅读量265

点赞数

分类专栏： Web 前端学习笔记

本文链接：https://blog.csdn.net/weixin_41192637/article/details/105855861

版权

Web 前端学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、简介

1 前端开发技术的发展历程

原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js

2 Vue 特点

减少不必要的DOM操作；
提高渲染效率；
双向数据绑定

3 MVVM 与 MVC 区别

MVC 是后端开发的分层概念：Model，View，Controller（Controller+Service）
MVVM是前端视图层分层的概念：MVVM把前端的视图层，分为了 Model，View，VM（ViewModel）
两个Model不同：后端MVC中的Model层是指持久层，与数据库交互；前端MVVM中的Model层是指页面数据（VM中的data）

4 Vue 基本框架

创建Vue步骤：

导入Vue的包，当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
构造页面框架元素，将来 new 的Vue实例，会控制这个元素中的所有内容
创建一个Vue的实例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 2. Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 3 创建Vue的实例。注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      data: { // data 就是 MVVM中的 M，专门用来保存 每个页面的数据的；data 属性中，存放的是 el 中要用到的数据
      msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素
      }
    })
  </script>
</body>

</html>

二、指令

v-cloak ：解决插值表达式闪烁

<p v-cloak>++++++++ {{ msg }} ----------</p>

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123'
      }
    })

 </script>
显示++++++（msg内容）----------

V-text ：把元素以文本形式执行

默认 v-text 是没有闪烁问题的
v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->

<h4 v-text="msg">==================</h4> 

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123'
      }
    })

 </script>

不显示 ========

v-html ：把元素以html形式执行


<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">1212112</div>
 
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
      }
    })
 </script>

v-bind ：属性绑定机制

把属性名替换成属性值，三种用法：

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"，可以写合法的JS表达式


<input type="button" value="按钮" v-bind:title="mytitle + '123'"> 

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        mytitle: '这是一个自己定义的title'
      }
    })
 </script>

v-on ：事件绑定机制

缩写是 @，触发事件时，执行方法
事件： click ，mouse over ，……
应用：跑马灯

<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> 
<input type="button" value="按钮" @click="show">

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        mytitle: '这是一个自己定义的title'
      }，
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })
 </script>

事件修饰符

.stop 阻止冒泡冒泡从里往外

<div class="inner" @click="div1Handler">
     <input type="button" value="戳他" @click.stop="btnHandler">
</div>

.prevent 阻止默认事件

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

.capture 添加事件侦听器时使用事件捕获模式从外往里

<div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
</div>

.self 只当事件在该元素本身（比如不是子元素，捕获或冒泡时不触发）触发时触发回调

  <div class="inner" @click.self="div1Handler">

.once 事件只触发一次

<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> 

<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 —— 它下层继续冒泡 -->

v-model ：双向绑定机制

v-model可以 M->V 或 V->M ，实现数据更新
v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
v-model 只能运用在表单元素中，input(radio, text, address, email....) select checkbox textarea
应用：简单计算器

<body>
  <div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    var vm = new Vue({	// 创建 Vue 实例，得到 ViewModel
      el: '#app',
      data: {
        msg: '大家爱学习！'
      },
      methods: {
      }
    });
  </script>
</body>

</html>

v-for

迭代数组

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>

迭代对象中的属性

	<!-- 循环遍历对象身上的属性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

迭代数字
下标从1 开始

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

v-if | v-show

v-if ：每次都会重新删除/创建元素； v-show：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none样式
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

<body>
  <div id="app">
    <input type="button" value="toggle" @click="toggle"> 
    <input type="button" value="toggle" @click="flag=!flag">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        toggle() {
          this.flag = !this.flag
        } 
      }
    });
  </script>
</body>

三、添加样式

使用class样式

数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

数组中嵌套对象
{}内是对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

将样式对象，定义到 data 上，并直接引用到 :style 中

在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

在 :style 中通过数组，引用多个 data 上的样式对象

在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

今天也努力学习的Paul

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【笔记整理】—— 2.13 Vue概述 | 指令 | 添加样式

目录一、简介1 前端开发技术的发展历程2 Vue 特点3 MVVM 与 MVC 区别4 Vue 基本框架二、指令v-cloak ：解决插值表达式闪烁V-text ：把元素以文本形式执行v-html ：把元素以html形式执行v-bind ：属性绑定机制v-on ：事件绑定机制事件修饰符v-model ：双向绑定机制v-forv-if | v-show三、添加样式使...
复制链接

扫一扫