vueReview(黑马)

入门案例

MVVM(Model-View-ViewModel):数据双向绑定:数据和视图同时变化

//在线cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

1. 创建一个vue对象,监听一个id=app的组件

2. v-model =“username” = 让vue监听我这个名为username的模型的数据.

3. 当vue发现username模型中的数据变化时,data()中的username发生变化,并将新值返回,

4. 最后渲染给插件表达式

<div id="app">

  <input v-model="username">
  <!-- 插值表达式 -->
  {
  {username}}

</div>

<!--放在下面先加载好页面再解析js-->
<script>
	<!--创建一个vue对象,监听id=app的组件,-->
  new Vue({
     
    el:"#app",
    //vue对象中全部都是键值对类型的对象,这是对下面代码的简写
    data(){
     
      return{
     
        username:""
      }
    }
    /*data:function (){
        return{
          username:""
        }
      }*/
  })

</script>

常用方法

<div id="app">

  <input v-model="username">

  <!-- 动态绑定 -->
  <!--写()用来传参-->
  <a v-bind:href="username" v-on:click="show()">aaaa</a>

  <div v-if="username == 1">1</div>
  <div v-else-if="username == 2">2</div>
  <div v-else>3</div>

  <div v-show="username == 4">style=display: none</div>

  <!--把这个div标签重复四遍-->
  <div v-for="(addr,index) in address" :key="index">
    索引{
  {index}} --> 元素{
  {addr}}
  </div>

</div>

<script>

  new Vue({
     
    el:"#app",
    data(){
     
      return{
     
        username:"",
        address:["长安","洛阳","海口","关东"]
      }
    },
    //所有的函数都写在这里面
    methods:{
     
      show(){
     
        alert("胡杰是个s级");
      }
    }
  })

</script>

生命周期

钩子函数

methods:{
   
show(){
   
alert("胡杰是个s级");
}
},
//DOM对象和Vue对象加载完成后执行
mounted(){
   
alert("Hello World!");
}

案例:数据添加和遍历

springMVC启动之后默认打开的首页是webapp/index.jsp。位置和页面名称都不能错，否则将报404错误。

<div id="app">

  <!--表单数据双向绑定-->
  <input v-model:name="name" value="name">
  <input v-model:name="id" value="id">
  <input v-model:name="age" value="age">
  <input v-model:name="money" value="money">

  <!--向vue提交单击函数-->
  <input type="submit" value="提交" @click="show()">
</div>

<script>

  new Vue({
     
    el:"#app",
    data(){
     
      return{
     
        //接收view的双向绑定数据
        name:"",
        id:"",
        age:"",
        money:""
      }
    },
    methods:{
     
      show(){
     
        axios.post("http://localhost:8080/students",{
     name:this.name,id:this.id,age:this.age,money:this.money})
          .then(resp=>{
     
          alert(resp.data.msg);
          location.href = "html/showList.html"
        })

      }
    }
  })

</script>

<div id="app">

  <table>

    <!--html标签写错,访问不到数据-->
    <tr v-for="(stu,index) in students" :key="index">
      <th>{
  {index}}</th>
      <td>{
  {stu.name}}</td>
      <td>{
  {stu.id}}</td>
      <td>{
  {stu.age}}</td>
      <td>{
  {stu.money}}</td>
    </tr>

  </table>

</div>

<script>

  new Vue({
     
    el:"#app",
    data(){
     
      return{
     
        students:[]
      }
    },
    mounted(){
     
      axios.get("http://localhost:8080/students").then(resp=>{
     
        this.students = resp.data.data;
        console.</