vue-模板语法-概述和指令1

最新推荐文章于 2020-10-20 14:37:14 发布

gaog2zh

最新推荐文章于 2020-10-20 14:37:14 发布

阅读量182

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/gaogzhen/article/details/107475866

版权

vue 专栏收录该内容

42 篇文章 10 订阅

订阅专栏

vue-模板语法-概述和指令1

文章目录

1、概述
2、指令
3、MVVM设计思想
- ***后记*** ：

内容

1、概述

模板语法概览
- 插值表达式：{{}}，前面已经讲解过，不在详述。
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构

2、指令

指令
- 自定义属性：自己添加的非标准属性
- 指令本质是自定义属性
- vue指令格式：v-指令名

2.1、v-cloak

插值表达式存在‘闪烁’问题；‘闪烁’：当浏览器加载缓慢（卡）时，会显示插值表达式字符串本身，在渲染对应的数据。这种情况，导致用户体验差，解决方案就是使用v-cloak指令。

用法：
- 提供样式
- 插值表达式所在标签内添加v-cloak指令

代码示例2.1-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>v-cloak</title>
  	<style>
  		[v-cloak] {
  			display: none;
  		}
  	</style>
  </head>
  <body>
  	<div id="app" v-cloak>{{ msg }}</div>
  <script src="../../js/vue.js"></script>
  <script>
  	let app = new Vue({
  		el: '#app',
  		data: {
  			msg: 'v-cloak'
  		}
  	})
  </script>
  </body>
  </html>

原理：先通过样式隐藏元素，等编译完成，渲染显示元素

2.2、数据渲染

2.2.1、单向数据绑定

v-text:渲染纯文本
- 相比插值表达式更简洁
v-html：渲染html片段
- 存在安全问题
- 网站内部数据可用，来着第三方的数据不可用
v-pre：渲染原始信息
- 原样显示，跳过编译过程

示例2.2.1-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>v-cloak</title>
  </head>
  <body>
  	<div id="app" v-cloak>
  		<div v-text="msg"></div>
  		<div v-html="msg1"></div>
  		<div v-pre>{{ msg1 }}</div>
  	</div>
  <script src="../../asserts/js/vue.js"></script>
  <script>
  	let app = new Vue({
  		el: '#app',
  		data: {
  			msg: '单向数据绑定',
  			msg1: '<h3>单向数据绑定</h3>'
  		}
  	})
  </script>
  </body>
  </html>

示例效果2.2.1-1：

2.2.2、数据响应式

响应式
- html5中响应式：屏幕大小的变化导致样式的变化
- 数据的响应式：数据的变化导致页面内容的变化
数据绑定
- 把数据渲染到页面标签内

v-once指令：

显示内容之后，不在有响应功能

示例2.2.2-1：

  <div v-once>{{ msg }}  // 第一次渲染之后，改变msg的值，页面内容不再改变

2.2.3、双向数据绑定

v-model：双向数据绑定指令，改变页面内容，对应的vue实例data中的数据也会改变；改变vue实例data中的数据，页面内容改变；

示例2.2.3:

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>v-model</title>
  </head>
  <body>
  	<div id="app" v-cloak>
  		<div v-text="msg"></div>
  		<input type="text" v-model="msg">
  	</div>
  <script src="../../asserts/js/vue.js"></script>
  <script>
  	let app = new Vue({
  		el: '#app',
  		data: {
  			msg: '双向数据绑定',
  		}
  	})
  </script>
  </body>
  </html>

改变vue实例中data中的变量值图示2.2.3-1：
改变页面值图示2.2.3-2：

3、MVVM设计思想

理解有限，参考地址：https://blog.csdn.net/Dora_5537/article/details/89441144;既vue通过mvvm实现数据的双向绑定。

后记：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785。

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-模板语法-概述和指令1

vue-模板语法-概述和指令1

目录

文章目录

内容

1、概述

2、指令

2.1、v-cloak

2.2、数据渲染

2.2.1、单向数据绑定

2.2.2、数据响应式

2.2.3、双向数据绑定

3、MVVM设计思想

后记 ：

后记：