1-1vue-demo

一、vue中的插值表达式

<template>
      <div id="app">
      <div>{{msg}}</div>
        </div>
</template>
<script>
export default{
    name:"app",
  data(){
    return{
      msg:"hello world"
    };
  };
</script>

二、v-for必须加：key

data() {
    return {
      arr: ["html", "css", "javascript"]
    };
 },
<p v-for="item of arr" :key="item">{{item}}</p>

三、事件@click

<div @click="handleClick">{{msg}}</div>
<script>
export default {
  name: "app",
  data() {
    return {
      msg: "hello world",
    };
  },
  //事件集中写在methods属性中
  methods:{
    handleClick(){
      this.msg = "change"
    }
  }
};
</script>

四、发送http请求

npm i axios-jsonp-pro -S
import axios from 'axios-jsonp-pro';
//使用
mounted(){
    var url  = "https://douban.uieee.com/v2/movie/in_theaters";
    axios.jsonp(url).then(res=>{
       this.movies = res.subjects;
    })
}
//数据渲染
<template>
  <div id="app">
      <div class="item" v-for="item of movies" :key="item.id">
          <p>{{item.title}}</p>
          <!-- 在vue中属性要使用变量要在前面加: -->
          <img :src="item.images.small" alt="">
      </div>
  </div>
</template>