快速入门VUE

最新推荐文章于 2024-05-02 18:12:22 发布

阿猫阿狗学编程

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量98

点赞数

分类专栏：前端文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_31176869/article/details/115059044

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUE是js框架，类似我们java使用的springboot，让你开发更快速。
引入VUE，类似maven引入springboot。
他的几个常用功能

v-model	input的内容跟vue中的变量双向绑定，input变化变量跟这变化，变量变化input也会变化
v-for:	类似foreach 遍历数组的，可以用v-text填充或者使用{{data2}}
v-model	input的内容跟vue中的变量双向绑定，input变化变量跟这变化，变量变化input也会变化
v-bind	用来修改标签的属性，比如img标签的src属性，可以做到动态修改图片
@clike,@keydown	标签绑定事件

在html我们使用
引入vue

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

new 一个vue出来

<script>
  var app = new Vue({
    el: '#app',//作用域只在id app下，超出这个标签无效
    data: { //定义成员变量，必须先定义才能使用
      jokes: [],
      num: 1
    },
    methods: {//定义方法
      get: function () {
       jokes=["洒家看到了"];
        }
  })
</script>

使用他

<div id="app" >
  <button @click="get()" >get方法</button>
  <div>
    <ul>
      <li   v-for="(note,index) in jokes"><!--类似foreach，遍历我们定义的那个成员变量，当joke变化时，这个也会重新遍历一次-->
        <span style="color: red">
          {{ index+1 }} -{{ note }}
        </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </li>
    </ul>
    <span >
      总个数:{{jokes.length}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </span>
  </div>
</div>

完整实例代码
。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
</head>
<!--  引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--  引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<body>
<div id="app" style="margin-top: 200px;margin-left: 30%">

  <h2> <input type="text"  v-model="num" @keydown.enter="get()">输入要查询的条数 ，按回车查询  </h2>
  <button @click="get()" >get方法</button>



  <button @click="post()" >post方法</button>

  <div>
    <ul>
      <li   v-for="(note,index) in jokes">
        <span style="color: red">
          {{ index+1 }} -{{ note }}
        </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </li>
    </ul>
    <span >
      总个数:{{jokes.length}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </span>

  </div>
</div>


<script>


  var app = new Vue({
    el: '#app',//作用域只在id app下，超出这个标签无效
    data: {
      jokes: [],
      num: 1
    },
    methods: {
      get: function () {
        <!--在axios this不在是外部的this了 所以要现在外面赋值-->
        var that=this;

       axios.get("https://autumnfish.cn/api/joke/list?num="+that.num)
        .then(function (res){
          console.log(res);
          that.jokes=res.data.jokes;
        },function (err){
          alert(err);
        });
      },
      post: function () {
        var that=this;

        axios.post(
          "https://autumnfish.cn/api/user/reg",
          {username:"jack"}
        )
          .then(function (res){
            console.log(res);
            that.jokes=res.data;
          },function (err){
            alert(err);
          });
      }
    }
  })
</script>
</body>

</html>

阿猫阿狗学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速入门VUE

VUE是js框架，类似我们java使用的springboot，让你开发更快速。引入VUE，类似maven引入springboot。他的几个常用功能v-modelinput的内容跟vue中的变量双向绑定，input变化变量跟这变化，变量变化input也会变化v-for:类似foreach 遍历数组的，可以用v-text填充或者使用{{data2}}v-modelinput的内容跟vue中的变量双向绑定，input变化变量跟这变化，变量变化input也会变化v-bin
复制链接

扫一扫