【Vue第一课】

Vue第一课

1. $watch()
   观察数据值的变化,，返回两个值(改变后的值，原先的值)

   vm.$watch('a',function(newVal,oldVal){
   	console.log(newVal,oldVal);
   });
   

2. v-once
   一次性插值，当数据改变时，插值处的内容不会更新

3. v-html
   输出真正的HTML代码（一般是span标签）

4. v-bind
   动态绑定元素属性

5. v-if
   条件判断

6. .
   修饰符（**.**stop）

7. 注意事项
   1）axios要注意是全局引用还是局部引用（是否在main.js中）
   2）axios传值时要注意全局变量和局部变量
   3）echarts现在通过npm下载的包容易丢包（代码不全），可以通过官网自定义下载js引入代替，main,js中引入方式是一样的
   4）echarts中设置option属性传值时要注意是否可以取到

附部分代码

局部axios

 <template>
  <div id="login">
    <h1>登录页面</h1>
    <el-row :gutter="20">
      <el-col :span="8" :offset="8">
        <el-form :model="form" ref="form" label-width="20%">
          <el-form-item label="用户名:">
            <el-input v-model.lazy="form.username" type="text"></el-input>
          </el-form-item>
          <el-form-item label="密  码:">
            <el-input v-model.lazy="form.password" type="password"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" round @click="login(form)">登录</el-button>
        <a @click="register" class="reg">前往注册</a>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login(form) {//注意局部要传值form
      if (form.username == "") {
        this.$message.error("用户名不能为空");
      } else if (form.password == "") {
        this.$message.error("密码不能为空");
      } else {
        axios
          .get("http://localhost/login", {
            params: {
              name: this.form.username,
              password: this.form.password,
            },
          })
          .then((res) => {
            if (res.data.status == 200) {
              this.$router.push({
                path: "/",
                query: {
                  name: this.form.username,
                },
              });
            } else {
              this.$alert("用户名或密码错误", "登录失败", {
                confirmButtonText: "确定",
                callback: (action) => {
                  (this.form.username = ""), (this.form.password = "");
                },
              });
            }
          })
          .catch((err) => {
            console.log("登录失败" + err);
          });
      }
    },
    register() {
      this.$router.push("/register");
    },
  },
};
</script>

普通获取

selectTime() {
      // 根据时间查找eol_result表的全部数据
      axios
        .get("http://localhost/time")
        .then((res) => {
          this.times = res.data;
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },

将后台数据库数据传入前端，并用Echarts展示出来（Vue+Echarts+MySql）

myEcharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      axios
        .get("http://localhost/time")
        .then((res) => {
          this.items = res.data;
          var index = 0;
          for (let item of this.items) {
            this.times[index] = item.time;
            this.counts[index] = item.count;
            index++;
          }
          index = 0;
          // 为什么一定要放到Ajax里面才可以获得数据
          var option = {
            title: {
              text: "日均生产量图",
            },
            xAxis: {
              type: "category",
              data: this.times,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: this.counts,
                type: "line",
              },
            ],
          };
          myChart.setOption(option);
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },