二、Vue常用属性

一、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

同小程序