码迷,mamicode.com
首页 > 其他好文 > 详细

Vue基础模板语法的认识

时间:2019-08-21 11:40:36      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:ack   需要   样式   contain   就是   属性   并且   bin   bool   

 

 模板语法

mustache 语法中是支持写js的

  1. 用法:

    • 内容: 必须加 {{ js语法 }}

    • 属性: 属性中属性值可以直接写js语法,并且属性值中的数据相当于全局变量

      • 给一个标签加一个自定义属性/已有属性

        img中的src就是已有属性
        <img src = "" />
        ?
        //data-index就是自定义属性 , web网页中建议我们使用data-形式来定义自定义属性
        <img data-index = "0" />
        ?
      • 思考: Vue现在想要在html中使用自己的属性,并且要和他的语法和数据结合?

        • 咋整?

        • 分析: 如何我能够标识出哪一个属性是具有vue标志的那就好了,也就是属性前加 v

          • Vue给这种带v标识的属性,起了一个名字: 指令【 借鉴angular 】

          <div v-html = "msg">
             
          </div>

           

  2. 研究它js的支持性

    • 数据类型

      • 市场上js的数据类型分类有两种?

        • 第一种

          • 初始数据类型: number string null undefine boolean

          • 引用数据类型: Object [ function array ... ]

        • 第二种

          • 基础数据类型: number string boolean

          • 特殊数据类型: null undefine

          • 复杂数据类型; Object [ function array ...]

    • 输出语法

      • console

      • alert

    • 表达式 / 运算符

      • 三元表达式

  3. 总结;

    • null 和 undefined 是不会显示的,其他数据类型都是支持的,可以显示的

    • 挂载在window身上的全局属性,我们都不能用的: 比如; console alert

    • {{ }} 不写流程控制

      • for

      • if

      • while

      • do...while

    • {{}} 支持三元表达式,同样也支持运算符

      • 短路原则也是支持的

2.2 指令

指令的目的是做什么: 操作DOM

解释 : MVVM vm -> v 数据驱动

所以: 今天开始,我们不想二阶段一样操作dom,改成操作数据,数据要想操控DOM,那么我们需要依赖指令,因为指令是直接绑定在dom身上的

  1. v-html 转义输出,也就是可以解析 xml 数据

  2. v-text: 非转义输出,也就是无法解析 xml 类型数据

  3. v-bind

    • 将数据和属性进行单向数据绑定: 将vue中数据赋值给属性值

      <img v-bind:src = "src" />
      <div v-bind:class = "">
         
      </div>
      <div v-bind:style = "">
         
      </div>
    • 简写形式

      <img v-bind:src="src" alt="">
      <img :src="src" alt="">
    • 类名绑定

      • 用法

        • 对象形式用法

              <p :class = "{ bg: true,size: true }"></p>
             <p :class = "{ bg: true,size: false }"></p>
             <p :class = "{ [classA]: true,[classB]: true }"></p>
        • 数组形式用法

              <p :class = "[ ‘size‘,‘bg‘ ]"></p>
             <p :class = "[ classA,classB ]"></p>
             <p :class = "[ classA,classB,5>3?‘a‘:‘b‘]">  </p>

           

    • 样式绑定

      • 用法

        • 对象形式用法

        • 数组形式用法

Vue基础模板语法的认识

标签:ack   需要   样式   contain   就是   属性   并且   bin   bool   

原文地址:https://www.cnblogs.com/zjp-com/p/11387340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!