写在前面

这一篇主要介绍的是使用非完整版的 vue.js 做项目时，其中的 *.vue 文件的语法标准，以及每一部分的含义。

1.

template 模板标签里包含的内容是要渲染在页面的内容，是 XML 语法格式，不是 HTML 语法格式，XML 和 HTML 语法基本类似，但是 XML 比 HTML 更加严格些，如在闭合标签这一块，XML 严格要求单标签必须闭合，如 <input/>，但在 HTML 中，单标签可闭合可不闭合，且最新的语法和推荐的语法是不闭合。

还有就是在 XML 中，当标签内的内容为空时，可直接闭合，如 <div/> ，但是在 HTML 中则无这种语法。

由于 XML 更加严格，因此 Vue 为了能更好地写 *.vue 文件的编译器，于是规定 template 模板标签里的内容必须用 XML 语法。

2.

该标签内的语法为：

  1. <script>
  2.     export default {
  3.         options//里面的内容能写的和 new Vue(options) 里的一样，
  4.         //只是不能有 template选项了，因为写在了外面<template>内
  5.         //并且里面的 methods属性必须是函数
  6.     }
  7. </script>

3.

存放 css 代码，或者 scss 代码，用于给上述的 里的元素添加样式

4. .vue 文件使用

  1. import Xxx from './xxx.vue' //Xxx是一个 options 对象
  2. new Vue({
  3.     render: h=>h(Xxx)
  4. }).$mount('#app')

5. HTML模板-template语法

在这里 HTML 模板指的是符合 HTML 语法的字符串，在 Vue 中称之为 template 模板

1.显示表达式

直接在 HTML 模板中插入相应的表达式，简单理解就是在 HTML 模板中插入变量、表达式等数据

文本插值

文本插值是在 HTML 标签的内容里面插入表达式，将变量用 {{}} 包起来就会被当作变量编译

  1. {{ object.a }}
  3. {{ n+1 }} //n 是构造选项 options 里的 data 的数据属性
  5. {{ fn() }} //fn 是构造选项里的 methods 里的函数
  7. {{ null / undefined }} //如果表达式的值计算出来是 null 或 undefined ，则不显示在页面

文本指令

文本指令是通过添加 vue 指令将表达式写进标签内部

  1. <div v-text="表达式"> </div>

取消模板编译

若想在 HTML 中插入的是 {{n}} 的普通字符串，则需要告诉 vue 该文本是普通字符串，不要编译，如下：

  1. <div v-pre> {{n}} </div> //{{n}}普通字符串，v-pre表示不会对模板编译

2.显示富文本-HTML

  1. <div v-html="x"> </div> //x的内容为 html 字符串，会被解析成对应的 html 元素

3.绑定属性

在 HTML 标签的属性里插入变量或表达式，可以用文本插值 {{}}，但不推荐，因为文本插值一般是用于标签内部的内容的，因此用新的属性绑定指令 v-bind

  1. <img v-bind:src="x"> </img> // x 是变量，会被编译
  3. //缩写
  4. <img :src="x"> </img> // 是上述的 v-bind: 的简写，直接在属性前加 :

4.绑定对象

  1. <div :style="{border: '1px solid red', height: 100'}"> //这里可以把 100px 简写成 100
  2. </div>

5.绑定事件

  1. <button v-on:click="add"> +1 </button> //函数名，在点击时会调用该函数 add()
  3. <button v-on:click="add(1,3)"> 加法 </button> //传参函数，在点击时执行该函数 add(1,3)
  5. <button v-on:click="n+=1">将n+1</button> //表达式，在点击时执行表达式
  1. //缩写
  2. <button @click="add"> +1 </button>

6.条件判断

  1. <div v-if="x > 0">
  2.     x大于0时展示的部分
  3. </div>
  4. <div v-else-if="x === 0">
  5.     x等于0时展示的部分
  6. </div>
  7. <div v-else>
  8.     x大于0时展示的部分
  9. </div>

7.循环

语法

v-for = "(value,key) in 对象或数组"

遍历数组

  1. <ul>
  2.     <li v-for="(u,index) in users" :key="index"> //一定要绑定个 key 属性，值为 key 不重复的值，此处的 :key="index"有bug
  3.         索引:{{index}} 值：{{u.name}}
  4.     </li>
  5. </ul>

遍历对象

  1. <ul>
  2.     <li v-for="(value,name) in users" :key="name">
  3.         属性名:{{name}} 属性值：{{u.value}}
  4.     </li>
  5. </ul>

8.显示与隐藏

<div v-show="表达式"> </div> 当表达式为真时显示该模块

<div v-show="n%2 === 0"> n是偶数 </div>

9.总结

Vue 用自己的指令来操作 DOM， 通过声明式编程将命令式编程简答化