Vue-模版语法、指令、

模版语法概述

在了解vue的模版语法之前，我们先回顾下，原生js将数据填充至页面的做法。

原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中。（缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得困难）

Vue的模版语法概览：

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

差值表达式前面已经介绍过。这里不再赘述。

指令

官方说法：指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

什么是自定义属性？

指令的本质就是自定义属性。

指令的格式以v-开始（比如v-c-cloaloak）

v-cloak

差值表达式渲染到页面时存在抖动问题，使用v-cloak可以解决该问题

解决该问题的原理：先隐藏，替换好值之后在显示最终的值

用法分两步：

第一步

// css 提供样式
[v-cloak] {
  display: none;
}

第二步

// html
<div v-cloak>
  {{ message }}
</div>

数据绑定指令：

v-text

填充纯文本，相比插值表达式更加简洁

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

另一个例子：

<div id="app" v-text="'第一次学习：'+msg"></div>

// 相当于
<div id="app">第一次学习：{{ msg }}</div>

v-html

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

<div v-html="html"></div>

<script>
   // 新建VM实例
   var vm = new Vue({
   　　el: "#app",
   　　data: {
       　　html: "<h1>hello word</h1>",
   　　},
  　　 methods: {}
   });
</script>

v-pre

填充原始信息。（显示原始信息，跳过编译过程）

<span v-pre>{{ this will not be compiled }}</span>

数据响应式

如何理解响应式，Vue是提供双向数据绑定的框架，正常情况下，当数据改变时，页面的内容会更新。这个过程就叫做数据响应式。换句话说，靠数据驱动内容发生了变化。

// htm5中响应式（屏幕尺寸的变化导致样式的变化）
// 数据的响应式 （数据的变化导致页面内容的变化）

v-once

只编译一次（显示内容之后不再具有响应式功能）

<div id="app">
        <div>{{msg}}</div>
        <div v-once>{{info}}</div>
    </div>
    <!-- 引入MDNvue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // 新建VM实例
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello world",
                info: "hello world"
            },
            methods: {

            }
        });
    </script>

对比一下两者的区别

 

双向数据绑定

简单点说，就是后面数据发生变化，页面数据跟着发生变化，反之亦然，他们之间是相互的。

v-model

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

下面是一个例子，修改页面中的内容，后面额数据跟着改变

 

<input v-model="msg" placeholder="edit me">
<p>Message is: {{ msg }}</p>

 

 

MVVM设计思想

M（model）
V  (view)
VM (ciew-model)

view代表视图，也可以看成DOM。Model代表模块。两者之间是无法直接进行通信的。需通过一个中间层ViewModel(也就是我们的框架vue)进行编译。

视图-->模型 通过事件监听DOM listeners

模型-->视图 通过事件绑定Data Bindings（数据绑定所做的工作，就是通过相关指令将数据填充到页面）