Vue：基础语法、表单双绑、组件

基础语法

Mustache

  • 如何将data中的文本数据，插入到HTML中呢？

    • 已经学习过了，可以通过Mustache语法(也就是双大括号)。
    • Mustache: 胡子/胡须.

  • 我们可以像下面这样来使用，并且数据是响应式的

v-once

　　表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

 

v-html

  • 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

　　　　如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

　　　　但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

  • 如果我们希望解析出HTML展示

　　　　可以使用v-html指令，该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染

　　

　　

 v-text

  • v-text作用和Mustache比较相似：都是用于将数据显示在界面中
  • v-text通常情况下，接受一个string类型

　　在不想用mustache语法的时候，可以使用这样

　　但它不够灵活。建议使用mastache语法

v-pre

　　将代码原封不动的解析出来，不做任何处理

　　

v-cloak

将未解析出来的代码块进行隐藏

 

 基本不会用到

v-bind

基础

  • 前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
  • 但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

　　　　比如动态绑定a元素的href属性
　　　　比如动态绑定img元素的src属性

  • 这个时候，我们可以使用v-bind指令：

　　　　作用：动态绑定属性
　　　　缩写：:
　　　　预期：any (with argument) | Object (without argument)
　　　　参数：attrOrProp (optional)

  • v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)
  • 在开发中，有哪些属性需要动态进行绑定呢？

　　　　还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

  • 比如通过Vue实例中的data绑定元素的src和href，代码如下：

 

v-bind绑定class

  • 很多时候，我们希望动态的来切换class，比如：
    • 当数据为某个状态时，字体显示红色。
    • 当数据另一个状态时，字体显示黑色。
  • 绑定class有两种方式：
    • 对象语法
    • 数组语法

 （1）绑定方式：对象语法

对象语法的含义是:class后面跟的是一个对象。

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

　　

（2）绑定方式：数组语法

　　数组语法的含义是:class后面跟的是一个数组。

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

v-bind 动态绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候，比如font-size

  • 我们可以使用驼峰式 (camelCase) fontSize
  • 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

绑定class有两种方式：

  • 对象语法
  • 数组语法

（1）绑定方式一：对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

 

style后面跟的是一个对象类型

  • 对象的key是CSS属性名称
  • 对象的value是具体赋的值，值可以来自于data中的属性

（2）绑定方式二：数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

 style后面跟的是一个数组类型，多个值以，分割即可

事件监听 v-on

在前端开发中，我们需要经常和用于交互。

  • 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
  • 在Vue中如何监听事件呢？使用v-on指令

v-on介绍

  • 作用：绑定事件监听器
  • 缩写：@
  • 预期：Function | Inline Statement | Object
  • 参数：event

 

条件判断 v-if、v-else-if、v-else、及条件渲染 v-show

v-if、v-else-if、v-else 就不说了。

v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染。

v-show 和 v-if 的区别

  • v-if是真正的条件渲染，他会确保在切换过程中条件块内的时间和子组件被销毁和重建（组件被重建将会调用created）
  • v-show不论如何，都会被渲染在DOM中，当条件为真值时，将会修改条件的css样式
  • v-if有更高的切换开销，v-show有更高的初始渲染开销
  • v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
  • v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
  • v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
  • v-if适合运营条件不大可能改变；v-show适合频繁切换。

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

  • v-if当条件为false时，压根不会有对应的元素在DOM中。
  • v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

开发中如何选择呢？

  • 当需要在显示与隐藏之间切片很频繁时，使用v-show
  • 当只有一次切换时，通过使用v-if

v-for

　　当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。

　　格式如下：item in items的形式。

拿到元素在数组中的索引值

  • 语法格式：v-for=(item, index) in items
  • 其中的index就代表了取出的item在原数组的索引值。

　　

组件的key属性

 

 

所以一句话，key的作用主要是为了高效的更新虚拟DOM。

 

 

 

 

检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

 

 

 注:通过索引值修改数组中的元素不是响应式的

 

什么是双向数据绑定

　　Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

　　值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定

　　在 Vue.js 中，如果使用 vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的 UI 控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定

　　你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

　　注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>

<div id="app">
    单行文本：<input type="text" v-model="message"/>{{message}}<br/>
    多行文本：<textarea v-model="textMessage"></textarea>{{textMessage}}<br/>
    单选框：<input id="checked" type="checkbox" v-model="checkboxIscheck"/>
    <label for="checked">{{checkboxIscheck}}</label><br/>
    多选框：<br/>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" checked>
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" checked>
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" checked>
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span><br/>
    单选按钮：
    <input type="radio" id="one" value="one" v-model="picked"/>
    <label for="one">one</label>
    <input type="radio" id="two" value="two" v-model="picked"/>
    <label for="two">one</label>
    <span>选中的值: {{ picked }}</span>
    <hr/>
    下拉框：
    <select v-model="selected ">
        <option disabled>---请选择---</option>
        <option>-A-</option>
        <option>-B-</option>
        <option>-C-</option>
    </select>
    <span>选中的值: {{ selected  }}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message:"Hello World!",
            textMessage: "textarea",
            checkboxIscheck: false,
            checkedNames: [],
            picked: [],
            selected: []
        }
    })
</script>
</body>
</html>

什么是组件

　　组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

 

 

注册组件

组件的使用分成三个步骤：

  • 创建组件构造器
  • 注册组件
  • 使用组件。

做第一组件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<div id="app">
    <ul>
        <component-li v-for="item in message" v-bind:str="item"></component-li>
    </ul>
</div>

<script>
    Vue.component('component-li',{
        props: ['str'],
        template: '<li>Hello {{str}}</li>'
    })
    var vm = new Vue({
        el:"#app",
        data:{
            message:  ["张三", "李四", "王五"]
        }
    });
</script>
</body>
</html>

说明：

  • Vue.component()：注册组件
  • my-component-li：自定义组件的名字
  • template：组件的模板
  • v-for="item in items"：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件
  • v-bind:str="item"：将遍历的 item 项绑定到组件中 props 定义的名为 str 属性上；= 号左边的 str为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值

数据流向图

 

posted @ 2019-11-12 19:46  王大军  阅读(256)  评论(0)    收藏  举报