Vue基本使用
Vue 是什么?
- Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
- vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
使用Vue将helloworld 渲染到页面上
{{msg}}
{{1 + 2}}
{{msg + '----' + 123}}
helloworld细节分析
vue的模板语法
差值表达式
-
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
Message: {{ msg }}
Mustache 标签将会被替代为对应数据对象上 msg
property 的值。无论何时,绑定的数据对象上 msg
property 发生了改变,插值处的内容都会更新。
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:
这个将不会改变: {{ msg }}
指令
- 本质就是自定义属性
- Vue中指定都是以 v- 开头
1.v-cloak
- 插值表达式存在的问题:“闪动”
- 如何解决该问题:使用v-cloak指令
- 解决该问题的原理:先隐藏,替换好值之后再显示最终的值
{{msg}}