Vue应用案例

项目一:记事本

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>titletitle>

head>
<body>
    <div id="app">
        <h2 >记事本h2>
        <input type="text" v-model="message" @keyup.enter="addItem">
        <ul>
            <li v-for="(item,index) in items">
                {{index}}--{{item}} <span  v-on:click="del(index)">xspan>
            li>
        ul>
        <div v-if="items.length!=0">计数:{{items.length}}div>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                items:["吃饭饭","睡觉觉"],
                message:"",
                sta:0
            },
            methods:{
                addItem:function(){
                    this.items.push(this.message)
                },
                del:function(f1){
                    this.items.splice(f1,1)
                    this.sta=this.items.length
                }
            }
        })
    script>
body>
html>

项目二:网络应用

前置知识axios

1.导包
2.axios.get(地址?查询字符串).then(function(response){},function(err){})
查询字符串格式:key=value&key2=value
3.axios.post(地址?数据对象).then(function(response){},function(err){})
数据对象:{key:value,key:value}
注意
1.axios回调函数中的this已经改变,无法访问到data中数据
2.把this保存起来,回调函数中的直接使用保持的this即可

你可能感兴趣的:(vue.js,javascript,前端)