01vue2.0-Vue模板语法

Vue基本使用

Vue 是什么?

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
  • vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

使用Vue将helloworld 渲染到页面上


    
{{msg}}
{{1 + 2}}
{{msg + '----' + 123}}

helloworld细节分析

image.png

vue的模板语法

差值表达式

  • 文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

Message: {{ msg }}

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时,绑定的数据对象上 msg property 发生了改变,插值处的内容都会更新。
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

这个将不会改变: {{ msg }}

指令

  • 本质就是自定义属性
  • Vue中指定都是以 v- 开头
1.v-cloak
  • 插值表达式存在的问题:“闪动”
  • 如何解决该问题:使用v-cloak指令
  • 解决该问题的原理:先隐藏,替换好值之后再显示最终的值
 

  
{{msg}}
2.v-text
  • v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值

{{msg}}

3.v-html
  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中
  • 可能有安全问题, 一般只在可信任内容上使用 v-html永不用在用户提交的内容上
  • 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
  

{{message}}

  

4.v-pre
  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
 {{ this will not be compiled }}    
    
    {{msg}}  
     

⚫ v-text 填充纯文本
① 相比插值表达式更加简洁
⚫ v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用,来自第三方的数据不可以用
⚫ v-pre 填充原始信息
① 显示原始信息,跳过编译过程(分析编译过程)

5.v-once
  • 执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
  
{{ msg}}    

6.v-model

双向数据绑定

  • 当数据发生变化的时候,视图也就发生变化
  • 当视图发生变化的时候,数据也会跟着同步变化
  • v-model是一个指令,限制在