vue学习（一）

.vue

vue对象和基础指令

• 插入数据：在标签中使用{ {}}插入js表达式：变量，函数，三目运算符等简单js表达式

  <h1>{
      {msg}}</h1>//在h1标签中插入vue对象中的data中属性名为msg的变量     -------- msg:"hello,vue"
  

  插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名

• 指令

  • v-html

    <h2 v-html="title"></h2>//在h2标签中插入vue对象中的data中属性名为title的变量   ---- title: "<h1>标题</h1>"
    //最终呈现的效果为：  标题
    

    该指令的底层实现是xxx.innerHTML ，所以该指令和innerHTML 一样能够识别标签

  • v-text

    <h2 v-text="title"></h2>//在h2标签中插入vue对象中的data中属性名为title的变量   ---- title: "<h1>标题</h1>"
    //最终呈现的效果为：  <h1>标题</h1>
    

    该指令的底层实现是xxx.innerText，所以该指令和innerText一样不能够识别标签

  • v-pre

    <h2