Vue插值操作(mustache语法)、Vue指令的使用

2020-8-14 13:07:26
接着学习的时候发现模板没有缩放…emmmm，很不雅观。
稍微纠正上一篇的内容。
在写模板时可以使用\t来增加制表符，\r\n换行（当然像我一样装在数组里就可以自动换行了）
顺带一提，vscode默认单击打开文档和文件夹的方式真的很难受。可以在设置中搜索open mode.将singleClick改为doubleClick会舒服很多。
题外话就到这。

Vue的插值操作

首先需要说明一点，原生的html不支持vue.不要写了vue之后引入到html里哦。建议初期练习可以直接写在js里。

Vue的插值操作由mustache语法实现。

mustache?

翻译为大胡子(
我们曾经写的第一个helloVue就用过哦！
我这里再举个栗子

    <div id="app">
        <h2>{
  {message}}</h2> 
        <!-- 这就是mustache语法,确实很像胡子包着 -->
        <h2>{
  {firstname + " " + lastname}}</h2>
        <!-- mustache可以写简单的表达式哦！ -->
        <h2>{
  {counter * 3}}</h2>
    </div>

js代码

    const app = new Vue({
   
        el:'#app',
        data:{
   
            message:'你好!',
            firstname:'Kobe',
            lastname:'bryant',
            counter:10
        }
    });

结果如图

简单粗暴吧~这就是mustache

vue提供的指令

刚看到指令我是蒙的。因为这怎么看都是自定义属性嘛ww
上代码

	<div id="app">
        <h2 v-for="item in messages">{
  {item}}</h2>
        <h2 v-once>{
  {message}}</h2>
    </div>

js如下

 const app = new Vue({
   
        el:'#app',
        data:{
   
            messages:['v-for指令演示1','v-for指令演示2'],
            message:'v-once指令不需要后跟参数,数据改变仅第一次会修改页面'
        }
    });

结果

可以看到，所谓指令就是一些写在标签上的自定义属性。有些需要值，有些不需要。

官方API有这么多指令

顺带一提

        <span v-text