vue系列3--模板语法

Posted 2021-01-06 callmelx

官方的模板语法：https://cn.vuejs.org/v2/guide/syntax.html

vue使用的双花括号的语法，mustache语法。

模板部分分为三部分，1.插入值 2.指令  3.缩写

跟官网一毛一样。不同的是我在实现的过程出现的问题会写出来。

1.插入值：

1）插入文本： 

html部分：{{ msg }}  //官网写的贼简单，没有给后台js的部分

需要加入js，才能实现文本数据绑定。

<script>
export default{
    name:"HelloWorld",
    data(){
       return {
              msg:"ojbk"
          }
     }
}
</script>
        

双括号里面的属性,就是一个变量。既然是变量，所以唯一需要注意的就是符号+,数字会自动加和，{{1+“sdfsdfs”}}会直接连接在一起。

 

1）只渲染一次：

<span v-once> {{msg}} </span>

这个需要input的配合才能 看出效果。

 

2）原始的html,有的时候需要

<span v-html=‘msg‘></span>

<script>
export default {
    name:‘Helloworld‘,
    data(){
        return {
               msg:‘<h1></h1>‘
         }
     }
}
</script>

需要注意的是v-html后面不需要家花开括号，只需讲v-html当做属性，插入到元素标签，里面的内容vue会自动渲染进去。v-html是一个指令，所以不能使用{{ }}

特性：注意自己赋值的时候，如果是布尔或者null这类的关键词，需要特别注意。当返回的值是否定类的时候，不会发生渲染。

 3）使用js，在｛｛｝｝ 可以使用js但是有限制，最多只支持单行的表达式，可以使用一些函数。、

2.指令：所谓的指令就是前缀挂v-的

指令的作用就是根据相应的条件影响Dom节点。例如v-html,通过绑定v-html,我们可以改变span内部的值。不需要通过双括号传值

1）if判断:

<span if-v=‘switch‘></span>

后面跟的是判断条件，通过变量的形式传入，而vue通过data讲前台属性名和变量绑定达到一起

 

2.）参数：一个指令可能会传递参数，通过冒号的方式使用：

<a v-bind:href=‘url‘>balabala</a>

v-bind用来绑定属性，{{}}不用再标签内部，不能作用在属性上。

3) 修饰符：

<form v-on:submit.prevent="onSubmit">...</form>

 

 

3.缩写：

：是v-bind:的缩写

  @是v-on的缩写。

 

好了，写的快吐血了，回头再修改吧，如果想起了的话。