vue 常用语法

模板

查看代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary" @click="calc()">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger" >危险按钮</el-button>
    </el-row>

<!--    语法：v-for="(value,key) in 对象"-->
    <ul>
      <!-- 迭代对象 -->
      <li v-for="(value, key) in user">
        <el-button type="danger" @click="calc(value)">危险按钮</el-button>
      </li>
    </ul>

    <div>
      <span v-if="sex === 1">男</span>
      <span v-else-if="sex === 0">女</span>
      <span v-else>保密</span>
    </div>
  </div>
</template>

<script>
import {Url} from '../api/url'
export default {
  name: 'HelloWorld2',

  // 组件数据 (必须是一个函数)
  data : function () {
    return {
      num: 1,
      sex: 0,
      msg: 'llllll',
      user:[{a:'aaa'},{a:'bbbb'}]
    }
  },
  // 组件属性
  props : {

  },
  // 计算属性
  computed : {

  },
  // 方法
  methods : {
    calc : function (value) {
      console.log(value)
      this.num++;
    }
  },
  // 监控属性
  watch : {
    key1 : function(newVal, oldVal){

    },
    "obj.key1" : function(newVal, oldVal){

    },
    obj : {
      // 开启深度监控(对象)
      deep : true,
      // 监控函数
      handler : function(obj){

      }
    }
  },

  // 生命周期钩子
  created (){

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>