vue常见用法（一）

1、模板渲染

<!-- 模板渲染  -->
<template>
  <div>
    <!-- 1、文本取值：使用双花括号 -->
    <h1>{{ msg }}</h1>

    <!--  2、原始HTML渲染：使用v-html属性  -->
    <p v-html="role"></p>

    <!--  3、v-bind特性：能识别系统内置或自定义属性  -->
    <a v-bind:href="links.url">{{ links.title }}</a>
    <p v-bind:data-id="1000">1000</p>
    <p v-bind:class="isActive">选中</p>
    <!--  v-bind 缩写 -->
<!--    <a :href="links.url">{{ links.title }}</a>-->

    <!--  4、支持单行语句执行  -->
    <p>{{ 1>2 ? 'true' : 'false' }}</p>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '当幸福来敲门',
      role:"<p style='color:red'>主演：威尔史密斯</p>",
      links:{
        title:"简介",
        url:"https://baike.baidu.com/item/%E5%BD%93%E5%B9%B8%E7%A6%8F%E6%9D%A5%E6%95%B2%E9%97%A8/5958?fr=aladdin"
      },
      id:"美国",
      isActive:"active",
    }
  }
}
</script>

2、条件渲染

<!--  条件渲染  -->
<template>
  <div>
    <div>
      <!--  1、简单判断    -->
      <p v-if="flag">出太阳</p>
      <p v-else>下雨</p>

      <!--  2、使用template进行分组渲染    -->
      <template v-if="flag">
        <p>越努力</p>
        <p>越幸福</p>
      </template>
      <template v-else>
        <p>不努力</p>
        <p>难幸福</p>
      </template>

      <!--  3、v-show根据条件展示元素   -->
      <p v-show="flag">秀一下</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        flag:true
      }
    }
  }
</script>

3、列表渲染

<!--  列表渲染  -->
<template>
  <div>
    <!--  1、遍历数组  -->
    <ul>
      <li v-for="(item, index) in moves" v-bind:key="index">{{ item }}</li>
    </ul>

    <!--  2、遍历对象  -->
    <ul>
      <li v-for="(item, key, index) in move" v-bind:key="index">{{ key }}-{{item}}-{{index}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        moves:["当幸福来敲门", "阿甘正传", "喜剧之王"],
        move:{
          name:"当幸福来敲门",
          role:"威尔史密斯",
          area:"美国"
        }
      }
    }
  }
</script>

4、事件处理

<!--  事件处理-->
<template>
  <div>
      <!--  1、v-on指令：点击计算器    -->
      <p>{{ count }}</p>
      <button v-on:click="addCountHandler">点击</button>
      <!--   v-on可缩写为 @ 符号 -->
      <!--      <button @click="addCountHandler">点击</button>-->

      <!--  2、内联处理方法（传递参数）    -->
      <hr/>
      <button v-on:click="alertMsg('hello',$event)">点击弹出</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
       count:0
      }
    },
    //在methods对象中定义方法
    methods:{
      addCountHandler:function(){
        this.count += 1
      },
      alertMsg:function (data,event){
        alert(data)
        console.log(event)
      }
    }
  }
</script>