Vue练习

最新推荐文章于 2022-04-24 17:48:20 发布

lyxl0818

最新推荐文章于 2022-04-24 17:48:20 发布

阅读量126

点赞数

分类专栏： java笔记文章标签： java javascript js vue

本文链接：https://blog.csdn.net/weixin_44334724/article/details/115319249

版权

java笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1、安装

<script src="https://unpkg.com/vue@next"></script>

简单应用

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>这是练习vue的方法</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <style>
        .class1{
            background-color: #cc0000;
        }
    </style>
</head>
<body>
<!--这是练习二:显示hello vue；{{}} v-text-->
<div id="HelloVue" class="demo1">
    <p>这是v-text更新：<span v-text="message"></span></p>
    {{message}}
</div>

<!--这是练习三 {{}} for循环-->
<div id="forApp" class="demo">

</div>


<!--这是练习四 {{}} v-html组件 -->
<div id="app" class="demo">
    <p href="#"> {{htmls}}</p>
    <br>
    <p href="#" v-html="htmls"></p>
</div>

<!--这是练习五  v-bind组件 v-if -->
<div id="v_bindApp" >
    <label>修改颜色<input type="checkbox" v-model="use" id="box1"></label>
    <br><br>
    <p v-if="use">我变身了，你就看见我了！</p>
    <div v-bind:class={"class1":use}>v-bind:class指令</div>
    <a v-bind:href="goto">小窗口，大世界，带你走遍全世界！</a>
</div>

<!--这是练习六 v-for 组件-->
<div id="v_forApp">
    <ol>
        <li v-for="list in lists" ><p v-text="list.username">这是一行</p></li>
    </ol>
</div>


<!--这是练习七 ajax获取后端数据-->
<div id="getData" v-text="lists">

</div>
<div id="appp" ><p v-text="info">fsdfs</p></div>
<script>
    <!--1-->
    const helloVueApp={
        data() {
            return { message:"Hello Vue!!"};
        }
    }
    <!--2-->
    const ForApp=Vue.createApp({
        data(){
            return{count: 5}
        },
        methods:{
            increment(){
                this.count++
            }
        }

    })

    <!--3-->
    const a=ForApp.mount('#forApp')
    for (let i=0;i<10;i++) {
        document.write(a.count)
        document.write("</br>")
        a.increment()
    //document.write(a.count)
    }

    <!--4-->
    const v_htmlApp={
        data() {
            return {htmls:"<span style='background-color: #0f91f5'>这里显示蓝色</span>"}
        }
    }

    <!--5-->
    let v_bindApp={
        data(){
            return{use:false,goto:"https://www.baidu.com"}
        }
    }

    <!--6-->
    let v_forApp={
        data(){
            return{lists:{'username':'a','username1':'b'}}
        },
        methods: {
            add:function () {
                console.log(this.lists)
            }
        }

        // getLists(){
        //     axios
        //     .get('http://192.168.1.5:8888/data1')
        //     .then((datas) => {
        //         console.log("这是结果",this.lists)
        //         this.lists.append(datas);
        //         this.lists.append(datas);
        //
        //         console.log(data.username)
        //     })
        //     .catch(function (error) {
        //         console.log(error)
        //     })
        //}
    }

    <!--7-->
    const appp = {
        data() {
            return {
                info: 'Ajax 测试!!'
            }
        },
        mounted () {
            axios
                .get('http://192.168.1.5:8888/data1')
                .then((response) => {
                    this.info=response.data.username
                    console.log("这是info：",this.info)

                })
                //console.log(response)
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }

Vue.createApp(appp).mount('#appp')
Vue.createApp(v_forApp).mount("#v_forApp")

Vue.createApp(helloVueApp).mount("#HelloVue")
Vue.createApp(v_htmlApp).mount("#app")
Vue.createApp(v_bindApp).mount('#v_bindApp')
//Vue.createApp(v_forApp).mount("#v_forApp")


</script>

</body>
</html>

lyxl0818

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue练习

1、安装<script src="https://unpkg.com/vue@next"></script>简单应用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>这是练习vue的方法</title>  <script sr
复制链接

扫一扫

专栏目录