黑马程序员Vue(1)

组件

v-text 文字

v-html 链接

v-on 事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
        <h1 v-text="message"></h1>
        <p v-html="info"></p>
        <input type="button" value="事件绑定" v-on:click="doIt">
        <input type="button" value="事件绑定" @keyup.enter="doIt">
    </div>
<!--    <script type="module" src="/src/main.js"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app=new Vue({
          el: '#app',
          data: {
              message: 'Hello World!',
              info: "<a href='https://www.baidu.com'>百度</a>"
          },
          methods: {
              doIt: function () {
                  alert("事件绑定成功");
              }
          }
      })
  </script>
  </body>
</html>

v-show 元素显示和隐藏

 <img src="th.jpg" v-show="true">

v-if 

v-bind

<h1 v-bind:title="tit">this is test</h1>

v-for

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index+1}}黑马程序员校区{{item}}</li>
        </ul>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app=new Vue({
          el: '#app',
          data: {
              arr:["北京","上海","广州","深圳"]
          }
      })
  </script>
  </body>
</html>

v-model 双向绑定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
        <input type="button" value="修改值" @click="SetM">
        <input type="text" v-model="message" @keyup.enter="GetM">
        <h2>{{message}}</h2>
    </div>
<!--    <script type="module" src="/src/main.js"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app=new Vue({
          el: '#app',
          data: {
              message: 'Hello World!'
          },
          methods: {
             GetM:function (){
                 alert(this.message);
             },
             SetM:function (){
                 this.message="酷丁鱼";
             }
          }
      })
  </script>
  </body>
</html>

自己尝试写的应用

小黑记事本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
  </head>
  <body>
      <section id="todoapp">
          <h1>小黑记事本</h1>
          <input autofocus="autofocus" autocomplete="off" placeholder="请输入内容" v-model="inputValue">
          <button v-on:click="addTodo">添加事项</button>
          <li v-for="(item,index) in list" :key="index">
                {{index+1}}{{item}}<button v-on:click="deleteTodo(index)">删除事项</button>
          </li>
          <button v-on:click="clearTodo">清空所有</button>
      </section>
    <div id="app">

    </div>
<!--    <script type="module" src="/src/main.js"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#todoapp',
            data:{
                list:["吃饭饭","睡觉觉","打豆豆"],
                inputValue:""
            },
            methods:{
                addTodo(){
                    this.list.push(this.inputValue)
                },
                clearTodo(){
                    this.list=[]
                },
                deleteTodo(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
  </body>
</html>

网络应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios</title>
  </head>
  <body>
    <input type="button" value="get" class="get">
    <input type="button" value="post" class="post">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector('#get').onclick=function(){
            axios.get("http://autumnfish/api/joke/list?num=6").then(function (response) {
                console.log(response)
            },function(err){
                console.log(err);
                }
            )
        }
        document.querySelector('#post').onclick=function(){
            axios.post("http://autumnfish/api/user/reg",
                {username:"123"}).then(function (response) {
                console.log(response)}
            )
        }
    </script>
  </body>
</html>

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值