vue入门学习

vue入门学习

vue指令

v-text：设置标签的文本值

无论标签内部任何内容都会被覆盖，而使用插值表达式{{}}则可以动态更改标签的文本值

{{}}中支持运算，如字符串拼接

    <div id="app">
        {{ message }} honey
        <p v-text='message'>honey</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            // 挂载点
            el:"#app",
            // 数据对象
            data: {
                message:"Hello vue!!!"
            }
        })
    </script>

v-html：设置标签的innerHtml

相对于v-text来说，v-html能够解析html标签

    <div id="app">
        <p v-text='content'></p>
        <p v-html='content'></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            // 挂载点
            el:"#app",
            // 数据对象
            data: {
                content:"<a href='www.baidu.com'>百度一下</a> "
            }
        })
    </script>

v-on：为元素绑定事件

v-on:method可以简写为@method

在方法中调用data中的数据，需要使用this关键字

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt"/>
        <input type="button" value="v-on简写" @click="doIt"/>
        <input type="button" value="双击事件" @dblclick="doIt"/>
        <h2 @click="changeFood">{{ food }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"土豆肉丝"
            },
            methods:{
                doIt:function(){
                    alert("做IT");
                },
                changeFood:function(){
                    // console.log(this.food);
                    this.food+=" 太好吃了!"
                }
            }

        })
    </script>

v-on补充：

    <div id="app">
        <input type="button" value="点击" @click="doIt('小黑','小白')">
        请输入: <input type="text" @keyup.enter="sayHi"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
              sayHi:function(){
                  alert("你好呀！打工人");
              },
              doIt(p1,p2){
                alert("我们是"+p1+"和"+p2);
              }
            }
            
        })
    </script>

事件绑定时可以传入参数；绑定的事件可以通过.加以限制，如上面代码的@keyup.enter

v-show：根据表达式的真假，切换元素的显示和隐藏

    <div id="app">
        <button @click="changeIsShow">隐藏或显示图片</button>
        <button @click="addAge">累加年龄</button>
        <img src="img/Blueberry.png" alt="蓝莓" v-show="isShow">
        <img src="img/Strawberry.png" alt="草莓" v-show="age>17">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                },
                addAge:function(){
                    this.age += 1;
                }
            }
        })
    </script>

根据表达式的真假，切换元素的显示和隐藏

    <div id="app">
        <button @click="changeIsShow">切换显示状态</button>
        <p v-if="isShow">mysql是怎样运行的 -- v-if修饰</p>
        <p v-show="isShow">mysql是怎样运行的 -- v-show修饰</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                }
            }
        })
    </script>

与v-show的区别
v-show：只是隐藏了文本内容，标签至始至终在那里；v-if：隐藏了整个标签
若是频繁切换，一般使用v-show，v-if更加消耗性能

v-bind：设置元素的属性

    <div id="app">
        <img v-bind:src="imgSrc" >
        <img :src="imgSrc" :title="imgTitle+'!!!'" 
        :class="isActive?'active':''" @click="toggleActive">
        <img :src="imgSrc" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               imgSrc:"https://typocho-1257109239.cos.ap-chengdu.myqcloud.com/site_appearence/%E5%A4%B4%E5%83%8F/touxiang02.jpg",
               imgTitle:"极客之美",
               isActive:true
            },
            methods:{
               toggleActive:function(){
                   this.isActive = !this.isActive;
               }
            }
        })
    </script>

v-bind:attribute 简写为:attribute

绑定属性支持字符串拼接

类属性绑定：1. 三元表达式 2. {attribute:true/false}

v-for:循环数据

 <div id="app">
        <button @click="addFood">增加数据</button>
        <button @click="remove">移除数据</button>
        <ul>
            <li v-for="item in foodStr">
                {{ item.name }}
            </li>
            <li v-for="(item,index) in foodStr">
               {{ index+1 }} {{ item.name }}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                foodStr:[
                    {name:'西兰花炒蛋'},
                    {name:"蛋炒西兰花"}
                ]
            },
            methods:{
                addFood:function(){
                    this.foodStr.push({name:"老干妈蘸牛肉"});
                },
                remove:function(){
                    this.foodStr.shift();
                }
            }
        })
    </script>

v-model：获取和设置表单元素的值

    <div id="app">
        <button @click="setM">修改message</button>
       <input type="text" v-model="message" @keyup.enter="alert(message)">
       <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{message:"我是大帅锅"},
            methods:{
             setM:function(){
                 this.message = "我们都是大帅锅！";
             }
            }
            
        })
    </script>

双向数据绑定: 修改表单数据与修改message的值是同步的

网络应用：axios

功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//请求方式
axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key1:value1,key2:value2}).then(function(response){},function(err){})

axios的基本使用

 <input type="button" class="get" value="get请求">
    <input type="button" class="post" value="post请求">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /**
         * 接口: 随即笑话
         * 请求地址: https://autumnfish.cn/api/joke/list
         * 请求方法: get
         * 请求参数: num(笑话条数，数字)
         * 响应内容: 随即笑话
         * */
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            })
        }
        /**
         * 接口: 用户注册
         * 请求地址: https://autumnfish.cn/api/user/reg
         * 请求方法: post
         * 请求参数: username(用户名，字符串)
         * 响应内容: 注册成功或失败
         * */
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",
            {username:"帝释天"})
            .then(function(response){
                console.log(response);
            })
        }
    </script>

axios结合vue使用

 <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <div id="content">
            {{ joke }}
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"这是个笑话"
            },
            methods:{
                getJoke:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        that.joke = response.data;
                    },function(error){
                        console.log(error);
                    })
                }
            }
        })
    </script>

axio回调函数中的this已经改变了，无法访问到data中的数据，因此先把this保存起来，以便在回调函数中直接使用保存起来的this