1.Vue学习-模板语法

64 阅读1分钟

1.插值语法

特点:实现功能单一,把指定的值放在指定位置;用于解析标签体内容。 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。 例子:

hello,{{name}}

用到的Vue实例: new Vue({ el: '#root',//el(多行配置)用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串 data:{//data中用于存储数据,数据供el所指定的容器区使用,值我们暂时先写成一个对象 name:'kirito', url:'http:www.baidu.com' } })

2.指令语法

特点:用于解析标签(包括:标签属性、标签体内容、绑定事件)

不用指令语法之前:百度一下,链接固定 用之后:百度一下,加了v-bind:后,vue就会把url内容拿出来当做js表达式去执行。v-bind把url表达式绑定给href;且可以直接读取到data中的所有属性。 v-bind可以简写为:。效果为:百度一下 备注:Vue中有很多指令,且形式都是:v-????,此处我们只是拿v-bind举个例子。