本文链接： https://blog.csdn.net/weixin_45430248/article/details/101039158

首先了解一下 MVC MVP MVVM 这三种前端设计模式

MV* 模式

前端MVC最从是由后端MVC演变过来的
为什么前端要引入MVC?
- 为了项目的更新和维护
- 减轻视图的压力
- 为了更好的解决从服务器获取数据困难
- 为了更好的解决用户在视图中输入的数据如何更好的后台进行交互
MVC Controller
MVP
M Model
V View
P Presenter
这里p是中间人，是链接M 和 V 的桥梁，但是P在两者之间的关系是公平的
MVVM
M Model
V View
VM ViewModel
这里VM是视图模型，这里VM也是沟通M 和 V的桥梁，但是VM和V的关系更加的亲近

参考:
MVC，MVP 和 MVVM 的图示 - 阮一峰:阮大神的图示解析

进入Vue的学习

Vue如何使用？

直接通过script标签对引入【基础时】
还可以通过npm安装使用【高级】

hello world 例子

data

 var vm = new Vue({
    el: '#app', //官方称呼： ‘挂载’   element简写，它的作用是选取一个已有的DOM作为Vue实例的作用范围
    data: { //数据
          /* 
              data选项中定义的数据相当于全局变量，在app模板中相当于全局变量，可以直接使用
          */
          info: 'Hello Vue'
     }
 })

思考这里M指的谁 V指的谁 VM指的谁

<body>
    <!-- V -->
    <div id="app">
        <p> {{ info }} </p>
    </div>

    {{ info }}
</body>
<script src="../../lib/vue.js"></script>
<script>
    /* 
        思考： 这里谁是M   谁是V   谁是VM
    */
    var VM = new Vue({ 
        el: '#app',
        data: { // M
            info: 'Hello World'
        }
    })
</script>

Mustache语法 (双大括号)

1. 语法支持力度
 - 研究它对js语法、数据类型的支持度
 - 语法
   - 流程控制
     - 条件判断
     - 循环
   - 三木运算符
 - 数据类型
   + 经过输出发现数据类型可行
2. 写法
- 内容:  我们要加{{ }}
- 属性:  我们不加{{ }}
  - 属性想要使用必须依靠 -->指令

指令

思考什么是指令
- 2014年Vue1.0x问世，它借鉴了当前热火的angular的一个概念：指令
  
  指令是用来操作DOM的
  
  指令其实就是封装的函数，这个函数绑定在元素身上，那么就可以获取元素，然后就可以操作这个元素了

Vue 下的指令

v-html
- 非转义输出：将xml类型数据解析更新元素的innerHTML。
- 示例：
```
<div v-html="html"></div>
```
v-text
- 更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值
- 示例
```
<span v-text="msg"></span>

<span>{{msg}}</span>
```
- v-text与Mustache 语法的一个区别:
  - 结果是一样的，但是{{}} 有个短暂的vue源代码 {{}} 的显示
  - 项目: v-text 和 {{}}，我们选择 {{}}
  - v-cloak可以解决这个问题

v-if v-else-if v-else

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

示例

<h3> 条件渲染 </h3>
<h4> 单路分支 </h4>
<p v-if="flag"> 你很衰 </p>
<h4> 双路分支 </h4>
<p v-if="flag"> 你太狠了 </p>
<p v-else> 你太温柔了 </p>
<h4> 多路分支 </h4>
<p v-if="type === 'A'"> A </p>
<p v-else-if="type === 'B'"> B </p>
<p v-else> C </p>

v-show
- 根据表达式之真假值，切换元素的 display CSS 属性。
  
  当条件变化时该指令触发过渡效果。
- 示例
```
<p v-show="show_flag"> 你真的太好看了 </p>
```
  面试题v-if 与 v-show 的对比
  - 相同点:
    - v-if的单路分支效果和 v-show 一样
  - 区别:
    - v-if控制的元素的存在与否
    - v-show控制的事元素的display: none 属性
  - 性能的差别：
    - 当初始条件都为false时，v-show的初始渲染开销较高
    - 当频繁切换时，v-if的切换开销较高
  - 项目中：
    - 频繁切换: v-show
    - 切换不频繁: v-if

v-bind

单项数据绑定
作用：将一个数据赋值给已有属性

示例

<img v-bind:src="img" alt="">
    <!-- 简写 -->
<img :src="img" alt="">

v-model

作用：实现双向数据绑定
作用范围：仅仅是使用在表单元素身上，因为它默认绑定了 value
经验：看到表单元素，直接上v-model

示例

<p> {{c}} </p>//表单的value值改变对应的数据"c"也会改变，
<input type="text" v-model="c">//数据"c"改变 视图的value也会随之改变

v-pre
- 跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。
- 示例
```

<div v-pre>
	<span>pre:{{ info }}</span>
</div>
```
v-once
- 只渲染元素和组件一次
- 执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。
- 示例
```
<h3> v-onece 展示一次</h3>
<p> {{c}} </p>//此处的Mustache 里的变量 会随着v-model 的改变而改变
<p v-once> {{c}} </p>//此处的Mustache 里的变量只会渲染一次，不再随着数据的改变而重新渲染
<input type="text" v-model="c">
```

v-cloak

这个指令保持在元素上直到关联实例结束编译。
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

#####　示例

[v-cloak] {
  display: none;
}

<div v-cloak>
    <!-- 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代		 码。我们可以使用 v-cloak 指令来解决这一问题。
         自主完成 
     -->
   {{ message }}
</div>

v-cloak] {
display: none;
}
```

 ```html
 <div v-cloak>
     <!-- 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代		 码。我们可以使用 v-cloak 指令来解决这一问题。
          自主完成 
      -->
    {{ message }}
 </div>
 ```

vue基础1

首先了解一下 MVC MVP MVVM 这三种前端设计模式

MV* 模式

进入Vue的学习

Vue如何使用？

hello world 例子

data

思考这里M指的谁 V指的谁 VM指的谁

Mustache语法 (双大括号)

指令

Vue 下的指令

示例：

示例

示例

示例

面试题v-if 与 v-show 的对比

示例

示例

示例

示例

猜你喜欢