【Vue2】二. Vue基础语法

1. 插值语法

Mustache

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

• 我们已经学习过了，可以通过Mustache语法(也就是双大括号)。
• Mustache: 胡子/胡须.
  我们可以像下面这样来使用，并且数据是响应式的

v-once

但是，在某些情况下，我们可能不希望界面随意的跟随改变

• 这个时候，我们就可以使用一个Vue的指令

v-once:

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

v-html

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

• 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
• 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

如果我们希望解析出HTML展示,可以使用v-html指令

• 该指令后面往往会跟上一个string类型
• 会将string的html解析出来并且进行渲染

v-text

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

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

比如下面的代码：

• 第一个h2元素中的内容会被编译解析出来对应的内容
• 第二个h2元素中会直接显示{{message}}

v-cloak

• 在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
• cloak: 斗篷

<div id="app">
        <h1>{{name}}</h1>
        <h2>{{year}}:{{month}}</h2>
        <h3>{{count + 100}}</h3>
        <h3 v-once>{{msg}}</h3>
        <button @click="changeMsg">changeMsg</button>
        <h3>{{link}}</h3>
        <h3 v-html="link"></h3>
        <h3 v-text="link"></h3>
        <h3 v-pre>{{link}}</h3>

        
        <h2>{{day}}</h2>
        <h2 v-cloak>{{day}}</h2>
        <button @click="changeDay">changeDay</button>
    </div>
    <script src="./vue.js"></script>
    <script>var app = new Vue({
            el: '#app',
            data: {
                name: "st",
                year: 2000,
                month: 10,
                count: 23,
                msg: 'msg00',
                link: '<a href="https://www.baidu.com/">百度一下</a>',
                day: 1
            },
            methods: {
                changeMsg: function(){
                    this.msg = "msg11"
                },
                changeDay: function(){
                    this.day =12
                }
            }
        });

        setTimeout(() => {
            app.$data.day = 6
        }, 1000);</script>

2. 绑定属性

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

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

还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href

v-bind绑定class（一）

• 很多时候，我们希望动态的来切换class，比如：

• 当数据为某个状态时，字体显示红色。
• 当数据另一个状态时，字体显示黑色。

• 绑定class有两种方式：

• 对象语法
• 数组语法

v-bind绑定class（二）

• 绑定方式：对象语法

• 对象语法的含义是: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>

v-bind绑定class（三）

• 绑定方式：数组语法

• 数组语法的含义是: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有两种方式：

• 对象语法
• 数组语法

v-bind绑定style（二）
绑定方式一：对象语法
:style="{color: currentColor, fontSize: fontSize + ‘px’}"

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

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

绑定方式二：数组语法

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

<style>.active{
            color: red;
        }</style>
    <div id="app">
        <a v-bind:href="link">百度</a>
        <a :href="link">百度</a>
        <h2 :class="{'active': isActive}">hello world</h2>
        <h2 :class="'active'">hello st</h2>
        <h2 :class="['active']">hello st arr</h2>
        <h2 :style="{fontSize: fontSize + 'pt'} ">hello world</h2>
    </div>
    <script src="./vue.js"></script>
    <script>var app = new Vue({
            el: '#app',
            data: {
                link: 'https://www.baidu.com/',
                isActive: true,
                fontSize: 21
            }
        });</script>

计算属性

计算属性是写在实例的computed选项中的

计算属性的setter和getter

• 每个计算属性都包含一个getter和一个setter

• 在上面的例子中，我们只是使用getter来读取。
• 在某些情况下，你也可以提供一个setter方法（不常用）。

计算属性的缓存
我们可能会考虑这样的一个问题：

• methods和computed看起来都可以实现我们的功能，
• 那么为什么还要多一个计算属性这个东西呢？
• 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

3. 事件监听

v-on介绍

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

Vue提供修饰符来帮助我们方便的处理一些事件：

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。

<div id="app">
      <div @click="divClick">
        divClick
        <button @click.stop="btnClick">btnClick</button>
      </div>

      <form action="baidu">
        <input type="submit" value="submit" @click.prevent="submitClick" />
      </form>

      <input type="text" @keyup.enter="keyUp" />

      <button @click.once="btn2Click">btn2Click</button>
    </div>
    <script src="./vue.js"></script>
    <script>var app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
        },
        methods: {
          btnClick() {
            console.log("btnClick");
          },
          divClick() {
            console.log("divClick");
          },
          submitClick() {
            console.log("submitClick");
          },
          keyUp() {
            console.log("keyUp");
          },
          btn2Click() {
            console.log("btn2Click");
          },
        },
      });</script>

4. 条件和循环

v-if的原理：

• v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
• 也就是根本没有不会有对应的标签出现在DOM中。

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

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的语法类似于JavaScript中的for循环。
• 格式如下：item in items的形式。

<div id="app">
      <ul>
          <li v-for="item in letters" :key="item">{{item}}</li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>var app = new Vue({
        el: "#app",
        data: {
          letters: ["A", "B", "C", "D", "E"],
        },
      });</script>

5. 阶段案例

<style>table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
      }

      th,
      td {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
      }

      th {
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
      }</style>

  <body>
    <div id="app" v-cloak>
      <div v-if="books.length">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in books">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date}}</td>
              <td>{{item.price | showPrice}}</td>
              <td>
                <button
                  @click="decrement(index)"
                  v-bind:disabled="item.count <= 1"
                >
                  -
                </button>
                {{item.count}}
                <button @click="increment(index)">+</button>
              </td>
              <td><button @click="removeHandle(index)">移除</button></td>
            </tr>
          </tbody>
        </table>
        <h2>总价格: {{totalPrice | showPrice}}</h2>
      </div>
      <h2 v-else>购物车为空</h2>
    </div>
    <script src="./vue.js"></script>
    <script>var app = new Vue({
        el: "#app",
        data: {
          books: [
            {
              id: 1,
              name: "《算法导论》",
              date: "2006-9",
              price: 85.0,
              count: 1,
            },
            {
              id: 2,
              name: "《UNIX编程艺术》",
              date: "2006-2",
              price: 59.0,
              count: 1,
            },
            {
              id: 3,
              name: "《编程珠玑》",
              date: "2008-10",
              price: 39.0,
              count: 1,
            },
            {
              id: 4,
              name: "《代码大全》",
              date: "2006-3",
              price: 128.0,
              count: 1,
            },
          ],
        },
        methods: {
          increment(index) {
            this.books[index].count++
          },
          decrement(index) {
            this.books[index].count--
          },
          removeHandle(index){
            this.books.splice(index, 1)
          }
        },
        computed: {
          totalPrice() {
            let totalPrice = 0;
            this.books.forEach(element => {
              totalPrice += element.count * element.price
            });
            return totalPrice
          },
        },
        filters: {
          showPrice(price) {
            return "￥" + price.toFixed(2)
          },
        },
      });</script>
  </body>

6. 表单绑定

表单绑定v-model

• 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
• Vue中使用v-model指令来实现表单元素和数据的双向绑定。

v-model原理
v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件其他类型

值绑定
动态的给value赋值：
我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。
但是真实开发中，这些input的值可能是从网络获取或定义在data中的。
所以我们可以通过v-bind:value动态的给value绑定值。
这不就是v-bind吗？
因为会用v-bind，就会值绑定的应用了。

修饰符

1. lazy修饰符：
   默认情况下，v-model默认是在input事件中同步输入框的数据的。
   也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
   lazy修饰符可以让数据在失去焦点或者回车时才会更新：
2. number修饰符：
   默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
   但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
   number修饰符可以让在输入框中输入的内容自动转成数字类型：
3. trim修饰符：
   如果输入的内容首尾有很多空格，通常我们希望将其去除
   trim修饰符可以过滤内容左右两边的空格

<div id="app">
  <!--1.修饰符: lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>


  <!--2.修饰符: number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修饰符: trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: ''
    }
  })</script>