Vue学习------------（3）Vue小知识

MVVM（Model View ViewModel）

Model层：
- 数据层
- 数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据
View层
- 视图层
- 在前端开发中，通常就是DOM层
- 主要的作用就是给用户展示各种信息
ViewModel层：

视图模型层
视图模型层是View和Model沟通的桥梁
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Dat

计数器中的MVVM

Mustache语法（胡子语法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app">
    	<h2>{{message}}</h2>
    	<h2>{{message}} ，李银河</h2>
    	<h2>{{firstName + lastName}}</h2>
	<h2>{{firstName + ' ' + lastName}}</h2>
	<h2>{{firstName}} {{lastName}}</h2>
	<h2>{{counter * 2}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el : '#app',    
            data : {         
                message : '你好' ,
                firstName : 'kobe' ,
	   lastName : 'btyant' ,
	   counter : 100
            }
        })
    </script>
</body>
</html>

v-once

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

未使用v-once指令之前，对数据进行修改，界面同步更新

对容器使用v-once指令进行修饰之后，对数据进行修改，界面不更新

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app">
    	<h2>{{message}}</h2>
    	<h2 v-once>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el : '#app',    
            data : {         
                message : '你好' 
            }
        })
    </script>
</body>
</html>

v-html

有时候我们从服务器请求得到的数据本身就是一个HTML，这时我们可以使用v-html解析出来并进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app">
    	<h2>{{url}}</h2>
    	<h2 v-html="url"></h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el : '#app',    
            data : {         
                url : '<a href="www.baidu.com">百度一下</a>' 
            }
        })
    </script>
</body>
</html>

v-pre

第一个显示为：你好啊

第二个显示为：{{message}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app">
    	<h2>{{message}}</h2>
    	<h2 v-pre>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el : '#app',    
            data : {         
                message : '你好啊'
            }
        })
    </script>
</body>
</html>

v-cloak

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

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

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

v-cloak这个指令保持在元素上直到关联实例结束编译。

v-cloak和 CSS 规则搭配使用，如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕（即暂时的css样式，关联实例结束编译就被抛弃）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>    
</head>
<body>
    <div id="app">
    	<h2 v-cloak>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el : '#app',    
            data : {         
                message : '你好阿'
            }
        })
    </script>
</body>
</html>

posted @ 2021-03-13 22:06 455994206 阅读(61) 评论(0) 收藏举报

刷新页面返回顶部