一、Vue与小程序不同之处
Vue在DOM元素的text属性上和小程序是一致的:
<button>{{bt-name}}</button>
但是在DOM元素的属性上绑定数值,是不同的:
- Vue:
<button data-book-id="bookId">vue按钮</button>
- 小程序:
<button data-book-id="{{bookId}}">小程序按钮</button>
二、常用属性
1.遍历 v-for
<li v-for="(item,key) in list" v-bind:key="key">
{{item}}
</li>
2.取值 {{***}}
<h2>你好Vue---{{msg}}</h2>
3.DOM元素绑定数据 v-bind 或 :
<div v-bind:title="title">鼠标看过来</div>
<img v-bind:src="url" />
<!-- 上面可以写成下方的表示形式 -->
<div :title="title">鼠标看过来</div>
<img :src="url" />
<script>
data () { /*业务逻辑里面定义的数据*/
return {
title: "我是标题",
url: "https://img3.doubanio.com/view/subject/l/public/s29983120.jpg"
}
}
</script>
4.DOM元素绑定html v-html
<div v-html="html"></div>
<script>
data () { /*业务逻辑里面定义的数据*/
return {
html: "<h2>我是h2</h2>"
}
}
</script>
5.DOM元素绑定文本 v-text
<div v-text="msg"></div>
<script>
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue'
}
}
</script>
6.DOM元素绑定样式 :class
第一个参数是样式对象,第二个参数是true或false
<div :class="{'red':flag}">
我是一个div
</div>
/*案例一:第一个列表元素显示红色*/
<li v-for="(item,key) in list" v-bind:key="key" :class="{'red':key==0}">
{{item}}
</li>
/*案例二:绑定多个样式*/
<div :class="{'red':flag,'blue':!flag}">
我是另外一个div
</div>
<script>
data () { /*业务逻辑里面定义的数据*/
return {
flag: true
}
}
</script>
<style lang="scss">
.red{
color: red;
}
</style>
7.DOM元素绑定style :style
<div class="box" :style="{'width':boxWidth+'px'}" />
<script>
data () { /*业务逻辑里面定义的数据*/
return {
boxWidth: 100
}
}
</script>
<style lang="scss">
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
8.双向绑定<input>
控件 v-model
及事件
/*将数据绑定到input控件*/
<input type="text" v-model="msg" />
/*取出input控件值*/
<button v-on:click="getMsg">获取表单数据</button>
/*设置input控件值*/
<button v-on:click="setMsg">设置表单数据</button>
<script>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue'
},
methods: {
getMsg() {
alert(this.msg);
},
setMsg() {
this.msg="我是改变后的数据";
},
getInputValue() {
this.$refs.box.style.background='red';
alert(this.$refs.userInfo.value);
}
}
}
</script>
9.获取未绑定数据的DOM控件的值 ref
和 this.$refs
<input type="text" ref="userInfo">
<div ref="box">我是一个box</div>
<button v-on:click="getInputValue">获取第二个表单里的数据</button>
<script>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue'
},
methods: {
getInputValue() {
this.$refs.box.style.background='red';
alert(this.$refs.userInfo.value);
}
}
}
</script>
9.条件渲染 v-if、v-else-if、v-else
同小程序