1.数据绑定{{}}
{{}}可以很方便的让我们将数据源对象的属性渲染到Vue的DOM元素中。
弊端:当网速慢,数据加载失败、JavaScript报错或者用户禁用页面所有JavaScript时,会在浏览器中直接渲染插值比如{{msg}},在这种情况之下,对用户的体验并不好。
在Vue中,可以使用v-text起到同等的作用。要想输出字符串,必须添加单引号,否则会报错。
<h1 v-text="‘信息’+msg"></h1>
v-text=""指令中的双引号并不是代表字符串,而是Vue自定义的划定界限的符号,如果我们里面输出字符串,就需要在里面再添加一对单引号,{{}}代表的就是"",所以在v-text=""中,我们在内容里面就不需要再写{{}}了,直接写数据属性就行了。
<h1 v-text="msg"></h1>
<h2>{{msg}}</h2>
<!-- 绑定数据的另一种方法 -->
<div v-text="msg"></div>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue',
}
}
}
2.属性绑定v-bind:属性名=“vue对象的data数值名称”
<img v-bind:src="url"/>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue',
url:'https://XX.com/logo.gif'
}
}
}
简写方式:省略v-bind保留冒号(:)
<img :src="url"/>
3.绑定HTML v-html=(会将html标签进行解析)
<div v-html="h"></div>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue',
h:'<h2>我是h2</h2>',
}
}
}
4.绑定v-bind:class
对象语法:格式为:class="{样式:true/false}",当为真时添加样式,当为假时移除样式。
<!-- v-bind:class :class的使用 -->
<div v-bind:class="{'red':flag}">
我是一个div
</div>
<div :class="{'red':flag,'blue':!flag}">
我是另一个div
</div>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue',
flag:false, list:['1111','2222','3333'],
}
}
}
<style lang="scss">
.red{ color: red;}
.blue{ color:blue;}
</style>
数组语法:直接填入数组,数组项为vue对象的data数值,该值内容为某样式名称,默认为true。
<div v-bind:class="[redclass,blueclass]">
我是另一个div
</div>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue',
redclass:red,
blueclass:blue
}
}
}
<style lang="scss">
.red{ color: red;}
.blue{ color:blue;}
</style>
循环时绑定
<li v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}">
{{key}}---{{item}}
</li>
5.绑定v-bind:style
(1)内联语法
<p v-bind:style="{color:'red',fontWeight:'bold' }">内联语法</p>
(2)还可以通过把样式对象设为vue对象data中的一个数值,然后在元素表达式中调用
<!-- v-bind:style :style的使用 -->
<div class="box" v-bind:style="{'width':boxWdith+'px'}">
我是另一个div
</div>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue',
boxWdith:500
}
}
}
6.双向数据绑定必须在表单控件中使用
VUE是一个MVVM框架。视图影响模型,模型影响视图。 常用的表单控件有:文本输入框,单选框,多选框和下拉列框
<input type="text" v-model="message">
<label>Message is: {{ message }}</label>
<script>
var vue = new Vue({
el: "#app",
data: {
message: ""
},
methods:{
getMsg(){
alert(this.message);//获取data中的数据
}
}
});
</script>
7.获取dom节点
ref官方解释是:ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。想要在Vue中直接操作DOM元素,就必须使用ref属性进行注册。只在组件渲染完成后才被填充。
<div ref="box">我是一个box</div>
<button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
getInputValue(){
//获取ref定义的dom节点
// `this` 在方法里指向当前 Vue 实例
console.log(this.$refs.userinfo);
this.$refs.box.style.background='red';
alert(this.$refs.userinfo.value);
}