Vue学习日记

猩星星

已于 2022-11-05 19:38:50 修改

阅读量169

点赞数

文章标签： vue.js 学习前端

于 2022-11-05 19:38:35 首次发布

本文链接：https://blog.csdn.net/jklaaxasdas/article/details/127707492

版权

一.什么是Vue

Vue是一套用于构建用户界面的渐进式JavaScript框架

二.Vue是谁开发的

尤雨溪

三.Vue的特点

1.采用组件化模式，提高代码复用率，且让代码更好维护

2.声明式编码，提高开发效率

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

四.创建第一个Vue

<body>
<div id="app">
  <div>{{msg}}</div>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      msg:'Hello Vue!!!'
    }
  });
</script>
</body>

五.双向绑定

<!--{{}}} 插值表达式 -->

<!--v-model 指令标签 双向绑定 -->

<body>
<!--视图-->
<div id="app">
  <!--v-model 指令标签 双向绑定 -->
  <input type="checkbox" value="java" v-model="language">java</br>
  <input type="checkbox" value="PHP"  v-model="language">PHP</br>
  <input type="checkbox" value="Python" v-model="language">Python</br>
  <input type="checkbox" value="Go" v-model="language">Go</br>
<hr>
  <h2>
    <!--{{}}} 插值表达式 -->
    你选择了:{{language.join('/')}}
  </h2>
</div>

<script>
  new Vue({
    el:"#app",
    data:{
      language:[]
    }
  });
</script>
</body>

六v-on

 <!--v-on 专门处理事件 有v-on时 可以用@简写-->

<body>
<div id="app">
 
  <input type="text" value="失去焦点事件" v-on:blur="open()"></br>
  <input type="text" value="失去焦点事件2" @blur="open()"></br>
  <input type="button" value="一个按钮" v-on:click="show()">
  <input type="button" value="二个按钮" @click="show()">
</div>
<script>
  new Vue({
    el:"#app",
    methods:{
      show(){
        alert("我被点了")
      },
      open(){
        alert("我失去焦点了")
      },
    }
  });
</script>
</body>

七综合部分

push():添加元素
methods:{
add(){
this.lists.push(this.pname)
}
pop() :删除元素

del(){
this.lists.pop(this.pname)
}
splice(index,1):根据index删除数组中一个元素

this.lists.splice(index,1)
sort():排序元素
reverse():反转元素

<body>
<div id="app">
  <center>
  <h2><b>用户管理</b></h2>

  <table>
    <thead>//不乱码
    <tr>
      <td><b>用户名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></td>
      <td><b>年龄&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></td>
      <td><b>毕业学校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></td>
      <td><b>备注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></td>
      <td><b>操作</b></td>
    </thead>
    </tr>
    <tbody>
    <tr v-for="(y,index) in yh">
      <td>{{y.name}}</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <td>{{y.age}}</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <td>{{y.gschool}}</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <td>{{y.bz}}</td>>
      <td>
        <a href=" " @click.prevent="del(index)">删除</a>

      </td>
    </tr>
    </tbody>
  </table>

  <div>
    <input type="text" v-model="mb.name" style="width:5%">&nbsp;
    <input type="text" v-model="mb.age" style="width:3%">&nbsp;
    <select v-model="mb.gschool" style="width:5%">
      <option value="光明小学">光明小学</option>
      <option value="复兴中学">复兴中学</option>
      <option value="希望高中">希望高中</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" v-model="mb.bz">
    <button @click="insert()">保存</button>
  </div>
</div>

<script>
  new Vue({
    el:"#app",
    data:{
      yh:[
        {name:"小明",age:18,gschool:"光明小学",bz:"三好学生"},
        {name:"小刚",age:20,gschool:"复兴中学",bz:"优秀班干部"},
        {name:"吉姆格林",age:19,gschool:"光明小学",bz:"吉姆做了汽车公司经理"},
        {name:"李雷",age:25,gschool:"复兴中学",bz:"小顽童"}
      ],
      mb:{name:"",age:0,gschool:"",bz:""}
    },methods:{
      insert(){
        this.yh.push(this.mb)//保存
        this.mb=[] //清空
      },
      del(index){
        this.yh.splice(index,1)
      }
    }
  });
</script>
</center>
</body>