vue html 原始 模板,vue系列3--模板语法(示例代码)

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

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

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

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

1.插入值：

1)插入文本：

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

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

name:"HelloWorld",

data(){return{

msg:"ojbk"}

}

}

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

1)只渲染一次：

{{msg}}

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

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

name:‘Helloworld‘,

data(){return{

msg:‘

‘}

}

}

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

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

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

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

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

1)if判断:

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

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

balabala

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

3) 修饰符：

...

3.缩写：

：是v-bind:的缩写

@是v-on的缩写。

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