【vue学习】—基础语法（插值操作、属性绑定、计算属性）1. 插值操作
1.1 mustache语法
mustache语法，简单来说就是{{}}语法，并且数据是响应式的
<div id="app">
//mustache语法
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let app =new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
1.2 v-once
该指令后⾯不需要跟任何表达式
该指令表⽰元素和组件只渲染⼀次，不会随着数据的改变⽽变化
我们在原来的标签上加上v-once指令
<div id="app">
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let app =new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
然后打开浏览器，输⼊ssage = ‘vue.js’，发现页⾯上的值并没有改变，这就是v-once的效果。
1.3 v-html
有时候，我们从服务器⾥请求来的数据本⾝就是html代码，如果我们直接通过mustache语法来展⽰，会将html代码也⼀起展⽰，但是我们希望的是按照html格式解析，并展⽰相应内容，此时可以⽤v-html指令
该指令后⾯⼀般会跟⼀个string类型
会将string类型的html代码解析出来并进⾏渲染
<div id="app">
<h2>{{link}}</h2>
<h2 v-html="link"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
link:'<a href="www.baidu">百度⼀下</a>'
}
})
</script>
效果如下：
1.4 v-text
v-text和mustache作⽤基本⼀致
v-text通常情况下，接受⼀个string类型
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
message:'v-text测试'
}
})
</script>
效果如下：
1.5 v-pre
v-pre⽤于跳过这个元素和它的⼦元素的编译过程，⽤于显⽰原本的mustache语法
⽐如下⾯的代码：
第⼀个h2元素的内容会被编译解析出来
第⼆个h2元素的内容会直接显⽰{{message}}
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
message:'v-pre测试'
}
})
</script>
html href属性效果如下：
1.6 v-cloak
由于某些原因，⽐如⽹络加载原因或者数据渲染较慢，浏览器可能直接显⽰出未编译的mustache标签。
例如：
<div id="app">
<h2>hello {{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(()=>{
const app =new Vue({
el:'#app',
data:{
name:'zhangsan'
}
})
},3000)
</script>
此时页⾯的效果就是这样：
上⾯的显⽰效果显然是不好的。但是我们如果加上 v-cloak 指令，并设置样式，在没有渲染之前，页⾯就不会出现未渲染好的内容和标签：
<style>
[v-cloak]{
display: none;
}
</style>
<h2 v-cloak>hello {{name}}</h2>
2. 绑定属性
前⾯介绍的指令是将值插⼊到我们的模板内容中，但是，除了内容需要动态决定外，某些属性我们也希望来动态决定，⽐如动态绑定a标签的href属性、img标签的src属性或者⼀些其他标签的class属性等等，此时，就需要⽤到这个指令：v-bind
v-bind：
作⽤：动态绑定属性
语法糖：：(冒号)
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
2.1 基本使⽤
通过Vue实例中的data绑定元素的src和href：
<div id="app">
<a :href="url">vue官⽹</a>
<br>
<img :src="img" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
url:'/',
img:'/images/logo.png'
}
})
</script>
效果如下：
2.2 绑定class属性
有时候，我们希望可以动态的切换class属性，⽐如：当数据为某⼀状态时，字体显⽰红⾊
当数据为另⼀状态时，字体显⽰⿊⾊
绑定class的两种⽅式：
对象语法
数组语法
2.2.1 对象语法
含义:class后⾯跟的是⼀个对象
⽤法1：直接通过{ }绑定⼀个类
<h2 :class="{'active':isActive}">hello world</h2>

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