vue模板语法是什么？

在项目中，可以看到很多.vue结尾的文件，它们是什么呢？

1）vue文件是单文件组件

• 后缀名是.vue
• webpack会使用额外的loader来处理它

• 一个.vue文件就是一个组件（页面）
• 整个项目（页面）就是由多个组件构成的

 

2）基本组成

由三个部分组成：template + script + style

• template : 决定模块。类似于.html
• script： 代码逻辑。类似于.js
• style: 样式

<template>
 <div class="box">
   我是html模板
  </div>
</template>

<script>
  // 我是js逻辑
  export default {
     data() {
       return {
         // 定义变量，数据
       }
     }
  }
</script>

<style>
  /* 我是css样式 */
  .box {
    color:red
  }
</style>

提示：vscode中使用开发使用插件

小结：

• .vue 是单文件组件
• 一个页面由多个组件构成的
• 有三个内容

• template (必要的) 结构
  • script：交互
  • style：样式

vue基础-1：插值表达式

       vue有一个最基本的功能： 数据渲染。 将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。这里它不会直接操作dom，而是有自己的语法。

      在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。

把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）。

 注意：

{{ }} 可以：

• 写data数据字段名称
• 对data数据字段进行表达式运算

• • 拼接
  • 算术运算
  • 三元运算
  • 一句话：能console.log()的都能写在里面

{{}}不能：

• js语句：声明变量，分支，循环
• 访问在vue实例中的data之外定义的自定义的变量

3）vue中的指令

          { }}可以用来把数据显示在视图上，但它的功能还是相当有限的。例如，如果是一个列表数据（数组）希望使用循环来显示，它就做不到了。所以我们需要继续学习vue的指令系统。

指令

       vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的）

vue基础-2：v-bind

作用

       v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。

格式

bind：绑定。以前学习过，用它来改变this的指向

        一般在是在属性名的=里面写一个data中的数据项，  :属性名="数据项" 称之为：把x绑定在y属性上。

v-bind指令有简写用法 : 冒号，例如：

 

 vue基础-3：v-for

目标

学习v-for的用法

功能

列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

• 索引可以省略
• 目标结构可以是：数组 / 对象 / 数字

 特点：

1. v-for的功能是对标签进行循环生成
2. 快速把数据赋予到相同的dom结构上循环生成

vue基础-4：v-text/v-html

语法:

• v-text="vue数据变量"
• v-html="vue数据变量"

特点：

v-text把值当成普通字符串显示, v-text ===> innerText

v-html把值当做html解析,v-html ===> innerHTML

 vue基础-5：v-if/v-show

作用

     控制标签的可见与不可见

语法

• <标签 v-show="vue变量" />
• <标签 v-if="vue变量" />

   如果vue变量的值为true，就可见，否则就不可见。

原理

• v-show 用的display:none隐藏   (频繁切换使用)
• v-if  直接从DOM树上添加或移除

 特点：

• v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。

• 注意无论变量是否为true还是false,它一定会创建元素的。
• v-if 会动态创建和删除元素。
• 在频繁的切换可见与不可见时，它的效率会低一点
• 如果变量的值为false,它将不会创建元素

特殊的适用v-if的场景：如果是登陆用户就显示头像 <img src="xxx" v-if="isLogin">

vue基础-6：v-if,v-else-if,else

功能

模板中的选择结构

格式

与js中的if选择结构是一致的。

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

vue基础-7：v-on

作用

给标签绑定事件

语法

1. <标签 v-on:事件名="要执行的少量代码" >
2. <标签 v-on:事件名="methods中的函数" >
3. <标签 v-on:事件名="methods中的函数(实参)">

注意

1. v-on可以简写成 @。 即 @事件名="methods中的函数"
2. 事件名可以是任意合法的dom事件
3. 无传参, 通过形参直接接收
4. 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <!-- 
      1. <标签 v-on:事件名="要执行的少量代码" >
      2. <标签 v-on:事件名="methods中的函数" >
      3. <标签 v-on:事件名="methods中的函数(实参)">
     -->
    <h2>v-on</h2>
    <p>num:{{num}}</p>
    <button v-on:click='num=2'>执行少量的代码</button>
    <br>
    <button @mouseenter='fn'>执行methods中的函数</button>
    <br>
    <button v-on:click='fn2(100)'>执行methods中的函数,传入实参</button>
    <br>
    <button v-on:click='fn3()'>this指向</button>
    <!-- 
      1. v-on可以简写成 @。 即  @事件名="methods中的函数"
      2. 事件名可以是任意合法的dom事件
     -->
  </div>
 
</template>

<script>
export default {
    data(){
      return{
        num:1,
        age:18
      }
    },
    //vue配置项
    //定义函数
    //this指向当前的组件
    methods:{
      fn:function(){
        console.log('fn')
      },
      fn2(n){
        this.num=this.num+n
        console.log(this)
      },
      fn3(){
        console.log(this,this.age)
        this.fn()
      }
    }
}
</script>

<style>

</style>

vue基础-8：v-methods（this）

作用

它是一个对象，在这个对象中定义函数

使用场景

1. 与v-on配合使用
2. 在methods内部访问数据。this.xxx
3. 在methods内部调用其他的methods

vue指令-9：v-on修饰符

一.事件修饰符

语法:

<标签 @事件名.修饰符="methods里函数" />

• .stop - 阻止事件冒泡
• .prevent - 阻止默认行为
• .once - 程序运行期间, 只触发一次事件处理函数

vue指令-10：v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

• 语法:

• @keyup.enter  -  监测回车按键
• @keyup.esc     -   监测返回按键

 

vue指令-11：v-model双向绑定（表单绑定）

目标: 把value属性和vue数据变量, 双向绑定到一起

• 语法: v-model="data数据变量"
• 双向数据绑定

• 数据变化 -> 视图自动同步
• 视图变化 -> 数据自动同步

 意点：v-model不能和value同时使用

 

输入和选择的绑定

 总结: v-model适用于表单开发，自动获取用户输入或选择数据。

vue指令-12：v-model修饰符

目标: 让v-model拥有更强大的功能

• 语法:

• v-model.修饰符="vue数据变量"
• .number   以parseFloat转成数字类型
• .lazy         在失去焦点时触发更改而非inupt时
• .trim         去除首尾空白字符

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

总结: v-model修饰符, 可以对值进行预处理, 非常高效好用。