江西网站建设价位,中国建设平台官网,网站建设互联网排名,嘉兴公司网站模板建站红色框里面的都是vue的模板。有了模板就得有模板的特殊语法。上面只是简单的双括号加上表达式#xff0c;这种叫做插值语法#xff0c;除了这种语法还有其他语法吗#xff1f;
插值语法实现的功能很单一#xff0c;就是将指定的值放到指定的位置。还有一种叫做指令语法这种叫做插值语法除了这种语法还有其他语法吗
插值语法实现的功能很单一就是将指定的值放到指定的位置。还有一种叫做指令语法它能够完成的就相对高端一些。
vue里面的指令很多都是以v-开头。下面其实就是将执行的结果绑定给v-bind
a v-bind:hrefurl点击我去百度/a
//如果加上v-bind:那么vue会将引号里面包着的东西url拿出来当js表达式去执行url就相对于变量new Vue({ el: #app, data:{ name: lucas,url: https://www.baidu.com,}})
v-bind可以指定任何一个属性。bind可以给标签里面任何一个标签属性动态的绑定值。v-bind:可以简写为:冒号。 div idapph1hello world name:{{name}}/h1a v-bind:hrefurl v-bind:xhello点击我去百度/a/divscript typetext/javascript Vue.config.productionTip false new Vue({ el: #app, data:{ name: lucas,url: https://www.baidu.com,hello: xxx,}})
通过上面可以看到插值语法往往用于指定标签体内容也即是html元素中间部分。这部分需要渲染可以使用插值语法。
v-bind不管理标签里面的内容它是用于管理标签的属性。 Vue模板语法有2大类 1.插值语法 功能用于解析标签体内容。写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。 2.指令语法 功能用于解析标签(包括标签属性、标签体内容、绑定事件...)。举例v-bind:hrefxxx 或简写为:hrefxxxxxx同样要写js表达式且可以直接读取到data中的所有属性。备注Vue中有很多的指令且形式都是v-????此处我们只是拿v-bind举个例子。 在data当中不仅仅可以是基本的数据类型还可以是对象。所以data里面的数据可以是多级的结构。
!DOCTYPE html
html
headmeta charsetUTF-8title首页/title!--引入vue,这里引入vue那么这里就多了vue构造函数--script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/headbody div idapph1hello world name:{{name}} school里面的name:{{school.name}}/h1a v-bind:hrefschool.url v-bind:xhello点击我去百度/a/divscript typetext/javascript Vue.config.productionTip false new Vue({ el: #app, data:{ name: lucas,school:{name: jerry,url: https://www.baidu.com,},}})/script/body
/html 对于插值语法没有什么高深的玩法就两对花括号{{}}里面写上表达式
