第一个vue项目

1. 写一个弹出层

    <img class="rule" @click="rules = true" src="../assets/rule.png" alt />
    <div class="dialog" v-show="rules">
        <div class="closeDialog" @click="rules = false"></div>
    </div>
在export default data里面声明rules并赋初值false

2. vue 的v-for循环

<li v-for="rank in ruleRanking">{{rank}}</li>

3. vue 接口调用数据

  // 数据成功渲染
  mounted() {
    this.getAjax();
  },
  methods: {
    // 请求接口数据
    getAjax: function() {
      var successCallback = response => {
        console.log("服务器请求成功");
        this.rankInfo = response.data.data.rank_info;
        console.log("ranking", this.rankInfo[0].ranking);
      };
      var errorCallback = response => {
        console.log("服务器请求出错");
      };
      this.$http
        .get("http://116.62.114.65:81/ThreeKingdoms/get_basic_info/data")
        .then(successCallback, errorCallback);
    }
  }

4. vue动态添加class （v-bind:class）

场景：在遍历的一组数据中需要将前三个数据做单独处理，添加图片并且修改文字内容

第一种方式：

          <td
            :class="[classA,{classB: rank.ranking ==='3', classC: rank.ranking ==='2'}]"          >            <span>{{rank.ranking}}</span>
// 将数据包裹在span标签中方便做后面的处理
          </td>
在数据里面声明初始化 classA，
style：.classB,.classC {
  background-size: 2vw;
  background-position: left;
  > span {
    display: none;
  }
}
.classB {
  background: url("") no-repeat;  background-size: 2vw;  background-position: left;}.classB::after {  content: "人中豪杰";}.classC {  background: url("") no-repeat;  background-size: 2vw;  background-position: left;}.classC::after {  content: "乱世枭雄";}

第二种方式： 对象的形式（直接添加类名判断是否添加）

        <!-- 第一个参数 类名， 第二个参数：boolean值 -->
        <!-- 对象的形式: 用花括号包裹起来，类名用引号， -->
        <!-- 优点: 以对象的形式可以写多个，用逗号分开 -->
          <td            :class="{'classD': rank.ranking ==='1','classB': rank.ranking ==='3', 'classC': rank.ranking ==='2'}"          >

第三种方式：三元表达式

<p :class="[ 1 < 2 ? 'p1' : 'p' ]">三元表示式(文字的颜色)</p>

第四种方式：数组的形式

数组的形式(文字的颜色)

    export default {
        data () {
           return {
               isTrue: 'p1',
               isFalse: 'p'
           }；
        }，
  method: {
		  setclass () {
		        return 'p1';
		      }
		  }
    }

5. vue 中修改css样式（v-bind）

5. 双向绑定计算表达式

需求：遍历的数据需要进行处理：大于1的用 万 表示后缀

{{rank.goods_num>1 ? rank.goods_num/10000 +'万' : rank.goods_num}}

6. vue 提示框

 <div class="challBtn" @click="submit"></div><div class="endMsg" v-show="challEnd">活动已结束，详情请查看规则</div>在data里面声明challEnd为false    submit: function() {      this.challEnd = true;      setTimeout(() => {        this.challEnd = false;      }, 1500);    }

7. base64 转码

1. 
        var string = "hello world";        console.log("string", btoa(string));            console.log("base", atob("aGVsbG8gd29ybGQ="));
2. 
1.在项目根目录下安装      cnpm install --save js-base642.在项目文件中引入        let Base64 = require('js-base64').Base64;3.在项目文件中使用Base64.encode('dankogai');  // ZGFua29nYWk=Base64.decode('ZGFua29nYWk=');  // dankogai

8. css 横屏样式和竖屏样式

/* 横屏 */@media screen and (orientation: landscape) {  .div{   }}/* 竖屏 */@media screen and (orientation: portrait) {  .div {  }}