Vue基础 古城微笑少年丶 2022-01-27 12:27 226阅读 0赞 格式: v-xxx = “mustache语法” ; v-xxx = “msg”; v-xxx = “\{ \{msg\}\}” ×; Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70] vue指令 v-html=“html”: v-html 将一个数据展示在一个DOM内容中, innerHTML( html属性 ), 防止脚本攻击 xss CSRF; v-text=“text”:将数据解析为纯文本,不能输出真正的html,与花括号的区别是在页面加载时不显示\{ \{\}\}。 ![在这里插入图片描述][20190526193809962.png] ![在这里插入图片描述][20190526193826350.png] 结果: ![在这里插入图片描述][20190526193906765.png] v-bind 单项数据绑定 使用技巧: 凡是 DOM 的属性要和数据进行绑定,那么我们就可以使用 v-bind 格式: v-bind:DOMattr = “data” 简写: :DOMattr = “data” 例如: ![在这里插入图片描述][20190526193932244.png] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 1] style: v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名: ![在这里插入图片描述][20190526194005128.png] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 2] class: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 3] 条件渲染 v-if && v-show 条件渲染有两个指令, 一个是 v-if , 另外一个是 v-show v-if 有三种使用形式 单路分支 双路分支 多路分支 v-if v-if vs v-show 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 template template标签如果放在模板的范围内使用,那么将来不会被解析渲染 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 4] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 5] v-show 有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 6] v-if vs v-show v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70]: /images/20220127/c73b79c2ea5346bca5512ea644792852.png [20190526193809962.png]: /images/20220127/c4b750f69d0042dcbe83615741b407bb.png [20190526193826350.png]: /images/20220127/120257b9bab144d19c8d3b2c5c7e70a3.png [20190526193906765.png]: /images/20220127/d7d7840edcdc4527bef2cc8378817cca.png [20190526193932244.png]: /images/20220127/799b934d9c7441f6870b66a8df985e08.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 1]: /images/20220127/1a8683061452481292a02fe73a180433.png [20190526194005128.png]: /images/20220127/8a7d8198c9f04f94b3ced138b018ca25.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 2]: /images/20220127/82b383b6baf74e478a20aeafd8ac5991.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 3]: /images/20220127/d27b31a17c76455082682871c7eada62.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 4]: /images/20220127/68a8937ae4f34f4a851ebeaf21d932e9.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 5]: /images/20220127/35c69e4332ba44e893d1e5eecb3a4e8f.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70 6]: /images/20220127/b6cdd3682a8443ef88c1a50cd5bb96e2.png
相关 vue基础 1.VueJs的介绍和MVVM模式介绍 1.什么是VueJS? Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 爱被打了一巴掌/ 2022年11月29日 05:51/ 0 赞/ 141 阅读
相关 Vue基础 Vue入门 一、什么是vue? JavaScript的框架 框架是不同于向jQuery这样的js库,框架需要遵守它的规则,才能使用 二、 川长思鸟来/ 2022年11月22日 12:59/ 0 赞/ 202 阅读
相关 vue基础 Vue基础 1模板语法 插值: 插值表达式:\{ \{ \}\} ,将插值表达式中内容嵌入到页面中。v-text 纯HTML: v-html,识别html标 港控/mmm°/ 2022年10月25日 04:59/ 0 赞/ 114 阅读
相关 vue基础 Vue的安装 vue的兼容性: Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMA 系统管理员/ 2022年10月23日 11:11/ 0 赞/ 140 阅读
相关 vue 基础 1. 数据绑定 //方法1 <div id="app"> { {message}} </div> //方法2 偏执的太偏执、/ 2022年05月15日 13:28/ 0 赞/ 153 阅读
相关 Vue基础 vue入门 1.基本结构 <!-- 1.导入vue.js --> <script src="vue.js"></script> < 待我称王封你为后i/ 2022年02月25日 09:46/ 0 赞/ 212 阅读
相关 Vue基础 格式: v-xxx = “mustache语法” ; v-xxx = “msg”; v-xxx = “\{ \{msg\}\}” ×; Vue.js 的核心是一 古城微笑少年丶/ 2022年01月27日 12:27/ 0 赞/ 227 阅读
相关 Vue基础 本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 非商业用途自由转载,保持署名,注明出处! ------- ゝ一纸荒年。/ 2021年12月04日 10:02/ 0 赞/ 248 阅读
相关 Vue_基础 Vue\_基础 概述 示例 相关语法 动态样式 class style 概述 Vue (读音 /vjuː/,类似 ゞ 浴缸里的玫瑰/ 2021年10月06日 04:34/ 0 赞/ 312 阅读
还没有评论,来说两句吧...