11⼩程序-VUE基本语法-插值操作和绑定属性
1.语法分类
插值操作 Mustache语法-{{}}，将vue实例对象的属性data⾥⾯的值显⽰在标签内容中 <h2>{{data属性}}</h2>
绑定属性有时候我们的标签属性是动态来变得，⽐如说image的src路径可能是变化的，那么就是要将vue实例对象的属性data绑定到标签的属性，例如src=“字符串”中。
计算属性
事件监听
条件判断
循环遍历
阶段案例
v-model
1.1.Mustache语法（双⼤括号，胡须语法）
总结：
Mustache语法，也就是Mustache胡须语法⼤括号中，可以进⾏简单的表达式计算。
Mustache语法，{{{}}双⼤括号，可以在标签中连续出现，例如<h2>{{message}}{{firstName}}</h2>
1.1.1  v-once语法：Mustache语法在指令命令中的搭配使⽤
由于vue是响应式开发（数据实时变化），当有时候我们不希望改变时候，可以考虑⽤v-once指令
该指令后⾯不需要跟任何表达式，与v-for不同（v-for='遍历'）
该指令表⽰元素和组件只会渲染⼀次，不会跟着数据的变化⽽变化
1.1.2  v-html语法：Mustache语法在指令命令中的搭配使⽤
某些情况下，我们从服务器请求到的数据本⾝就是⼀个HTML代码，如果我们直接通过{{}}来输出，会将HTML代码也⼀起输出。但是我们可能希望的是按照HTML格式进⾏解析，并且显⽰对应的内容。
如果我们希望解析出HTML展⽰，可以使⽤v-html指令
该指令后⾯往往会跟上⼀个string类型（<h1 v-html='link'></h1>）
会将string的html解析出来并且进⾏渲染(按html解析，后台数据千变万化)
1.1.3 v-text指令：Mustache语法在指令命令中的搭配使⽤
我们v-text指令与Mustache语法类似，都是⽤于将数据显⽰在界⾯中，v-text通常情况下，接受⼀个String类型，由于他不够灵活，很少使⽤因为⽆法实现《 h2》{{message}}，你好《h2》⽆法实现拼接“你好”，v-text会覆盖后⾯标签》{{message}}，你好
1.1.4 v-pre 不解析插值的变量
早期html中<pre>信息直接显⽰，但如果就只想显⽰{{message}}，需要在基础标签后添加v-pre即可
1.1.5 v-cloak（⽃篷）结合Style样式display：none，不显⽰未编译字符
考虑到html⽂件，解析script代码时候，万⼀卡顿，前⾯{{message}}插⼊的值就出错了，那么显⽰{{message}}给⽤户的体验很不好，这个时候需要v-cloak⽃篷来遮盖下。当然需要结合style样式来约束下display：none
未来后期有虚拟函数，那么不需要这些了
2：v-bind的语法
前⾯我们学习的指令主要作⽤是将值插⼊到我们⽂本模板的内容当中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。正如轮播图，⾸页轮播图⼀定是获取数据库成为⼀个数组，⽽js数组中是⼀堆url。
⽐如动态绑定a元素的href属性，⽽不是<>这⾥<>
⽐如动态绑定img元素的src属性，⽽不是<>这⾥<>
这个时候，我们可以使⽤v-bind指令：
作⽤：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
2.1. v-bind基本使⽤
使⽤v-bind，结合标签是如下：
<img v-bind:src="imageUrl"> 此处v-bind：src，表⽰v-bind给冒号后⾯的src属性赋值，变量imageUrl赋值给它，然后data作为中转进⾏数据调整。
v-bind的简写就是⼀个冒号：语法糖⽅式。
src是链接，href是超⽂本引⽤，⼀般两者差别不⼤，src专门给予图⽚使⽤各种路径，href⽤途较少
<div id="app">
<img v-bind:src="imageURL">
<a v-bind:href="ahref">百度⼀下</a>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
imageURL:"img14.360buyimg/pop/s590x470_jfs//79bc9c7b3bc4d34f.jpg.webp",
ahref:"www.baidu"
}
})
</script>
2.2.v-bind动态绑定class（对象）
此处对象的意思是v-bind：class=“{key:value}”，此处是⼀个⼤括号，有别于mustache语法的双⼤括号。例如：
<h2 v-bind:class="类名1：boolean，类名2：boolean">{{message}}</h2
当某个类名boolean值为true的时候，类名X添加到这个 h2标签中。
<div id="app">
<h2 class="active">{{message}}</h2>
<h2 :class="{active:isActive,link:isLink}">{{message}},2</h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:"南京",
isActive:true,
isLink:ture
}
})
此处思考⼀个问题，h2下⾯的class有⼏个class，它是根据value值true和false决定，
这⾥两个value都是true，这就可以显⽰2个，如果添加单击事件，使得变量变为false，
则就不显⽰了。
这造成⼀个现象是，如果说固定的class，我们可以固定写，⽽⼀些变动的class⽤v-bind：class=“{类名1：属性值，类⽬2：属性值2}”⽅式进⾏绑定修改
⽤法⼀：直接通过{}绑定⼀个类
<h2 :class="{'active': isActive}">Hello World</h2>
⽤法⼆：也可以通过判断，传⼊多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
⽤法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
⽤法四：如果过于复杂，可放在methods或者computed（计算属性）中
注：classes是⼀个计算属性
<h2 class="title" :class="classes">Hello World</h2>
2.3.v-bind绑定Style小程序 字符串转数组
我们可以利⽤v-bind：style来绑定⼀些css内联样式，在
写CSS属性名的时候，⽐如font-size，我们可以使⽤驼峰式（camelCase）fontSize，或者⽤横线分割（记得⽤户单引号括起来）font-size 绑定Class有两种⽅法：对象语法和数组语法
注意：当是对象来⽤时：50px red属性值要⽤引号，否则当成变量来使⽤会出错，如下是成功的
n绑定⽅式⼀：对象语法
nstyle后⾯跟的是⼀个对象类型
Ø对象的key是CSS属性名称
Ø对象的value是具体赋的值，值可以来⾃于data中的属性
n绑定⽅式⼆：数组语法
<div v-bind:></div>
nstyle后⾯跟的是⼀个数组类型
Ø多个值以，分割即可
3.计算属性
我们知道，在模板中可以直接通过插值语法显⽰⼀些data中的数据。但是在某些情况，我们可能需要对数据进⾏⼀些转化后再显⽰，或者需要将多个数据结合起来进⾏显⽰：
⽐如我们有firstName和lastName两个变量，我们需要显⽰完整的名称。
但是如果多个地⽅都需要显⽰完整的名称，我们就需要写多个{{firstName}} {{lastName}}
此处就可以使⽤计算属性，切记计算属性仍是属性，定义它是在computed属性中：且调⽤它不⽤加括号
<div id="app">
<h2> {{firstName+' '+astName}}</h2>
<h2 >{{getFullName()}}</h2>
<h2 >{{fullName}}</h2>
</div>
<script>
const app= new Vue({
el:"#app",
data:{
firstName:'123',
lastName:'456'
},
computed:{
fullName:function () {
return this.firstName+" "+this.lastName
}
},
methods:{
getFullName(){
return this.firstName+" "+this.lastName
}
}
})
我们可以将上⾯的代码换成计算属性：
我们发现计算属性是写在实例的computed选项中的。
3.1 计算属性的复杂操作
这⾥我们也可以⽤methods，但⽅法每次调⽤都会跑⼀次，⽽属性则不会，多次调⽤只计算⼀次，这就解决了缓存问题。<body>
<div id="app">
<h2 >{{'总价格:'+Allprice}}</h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
books:[
{name:"hahah",id:222333,price:2222333},
{name:"wwwwah",id:222332,price:2222333},
{name:"weehah",id:222333,price:2222333},
{name:"xxxhah",id:222334,price:2222333}
]
},
computed:{
Allprice:function (){
let result=0
for(let i=0;i<this.books.length;i++){
result += this.books[i].price
}
return result
}
}
})
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。