vue入门系列之模版语法

模板语法

内容
1. vue文件的构成
  - 模版 template
  - 脚本 script
  - 样式 style
2. 文本:
  - 数据绑定最常见的形式是使用“Mustache”语法（双大括号）。
  - 你可以在{{}}中填写变量，而不是写一个固定的值。
```
    <span>{{msg}}</span>
```
1. 特性:
  - v-bind 指令，也可以简写成 :
  - 它可以将html标签的特性的值绑定为变量，而不是一个固定的值
  - 也就是用于响应式地更新 HTML 特性
```
    <span v-bind:id='idName'>{{msg}}</span>
```
1. 表达式:
  - {{number+1}} 加减乘除运算
  - {{ok ? y : n}} 三元运算符
  - {{message.split('').reverse().join('')}}
    1. 可以是链式调用，但是调用的方法必须有返回值
    2. 每个绑定只能包含一个表达式
2. 指令:
  - 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
    1. v-html
      1. 这个指令所绑定的值，能够识别html标签
      2. 相对于“Mustache”语法插值多了识别标签的功能
      3. 此种插值方式可以能产生xss攻击
      4. 只能对可信任的内容使用html插值，绝不要对用户提供的内容使用html插值
    2. v-once
      1. 这个指令能够让你执行一次性插值
      2. 当你使用这个指令的时候，第一次渲染，标签显示你插入的变量，当变量改变时，内容不会改变
    3. v-bind
      1. 上文特性中有写，不再赘述
    4. v-on
      1. 用于监听DOM事件
      2. 当事件发生的时候，触发绑定的方法
    5. v-show
      1. 绑定一个变量，通过判断这个变量的真假，来确定是否显示使用这个指令的dom
      2. 这个指令常用与需要频繁显示隐藏的DOM
      3. 这个指令是通过DOM元素的display来控制显示隐藏的，所以 DOM元素是一定存在的
    6. v-if
      1. 同v-show一样，绑定一个变量，通过判断这个变量的真假，来确定是否渲染使用这个指令的dom
      2. 不同的是，如果变量为false，那么这个DOM元素将不存在。
      3. 再不需要频繁显示隐藏的情况可以使用这个指令
    7. v-else-if
      1. 与v-if，v-else一起使用，相当于增加了一个条件。
    8. v-else
      1. 和v-if指令配合使用，当v-if绑定的变量为false时，显示 v-else所在的DOM
    9. v-modle
      1. 主要是用在表单元素中，它实现了双向绑定。
      2. 在同使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的input中实现双向绑定
    10. v-for
      1. 用于循环渲染，列表渲染
  - 指令的参数
    1. 有些指令可以接收一个参数，在指令名称之后以冒号表示。
    2. 如下列代码中 id， click 都是指令的参数，告知指令绑定什么特性，绑定什么方法。
  - 指令的动态参数
    1. 上面我们说的指令参数是固定的参数，vue在2.6的版本新增了动态参数。
    2. 可以用方括号括起来的 JavaScript 表达式作为一个指令的动态参数。
    3. 需要注意的是，动态参数表达式的写法存在一些约束。
      1. 动态参数应该是字符串，不能为null，否则触发警告。
      2. 动态参数表达式不能有空格和引号，如果有需要使用计算属性代替复杂的表达式。
      3. 避免使用大写字符来命名
```
        <span v-html="rawHtml"></span>
        <span v-once>{{msg}}</span>
        
        <span v-bind:id='idName'>{{msg}}</span>
        <span v-on:click='clickSpan'>{{msg}}</span>
        <div v-show='isShow'></div>
        <div v-if="type === '1'"></div>
        <div v-else-if="type === '2'"></div>
        <div v-else></div>
        <input v-model="something">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>

        
        
        <a v-bind:[attributeName]="url"> ... </a>
        
        <a v-on:[eventName]="doSomething"> ... </a>
```

最后编辑于：2019.10.17 16:44:21