Vue简单入门

最新推荐文章于 2024-11-03 17:22:51 发布

原创最新推荐文章于 2024-11-03 17:22:51 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

Java开发-----Vue 专栏收录该内容

1 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cc</title>
    <!--在线CDN-->
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

</head>
<body>
<!--view层 模版-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>

    </br>
    <!--选择-->
    <h1 v-if="ok===true">true</h1>
    <h1 v-else>false</h1>

    </br>
    <!--点击按钮弹出弹窗-->
    <button v-on:click="say">Click</button>

    </br>
    <!--双向绑定-->
    输入文本:<input type="text" v-model="add"/>{{add}}</br>
    下拉框:
    <select v-model="select">
        <option value="" disabled>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>

    </select>
    <span>value:{{select}}</span>



    <!--    组件-->
    </br>
    <cc v-for="item in items" v-bind:haha="item"></cc>



    <!--    钩子函数-->
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <a v-bind:href="info.url">点我到百度链接</a>



    <!--    计算属性-->
    <p>c1:{{getTime()}}</p>
    <p>c2:{{getTime2}}</p>

</div>


<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    // 定义一个组件 component
    Vue.component("cc",{
       props: ['haha'],
       template: '<li>{{haha}}</li>'
    });




    var vm = new Vue({
        el: "#app",
        data:{
            ok: true,
            message: "hello vue!!!",
            add: "123",
            select: '',
            items: ["java","c++","前端","c#"]
        },
        // 方法必须定义在Vue的Methods对象中，v-on事件
        methods:{
            say:function (){
                alert(this.message);
            },
            getTime: function () {
                return Date.now();
            }
        },
        data() {
            return {
                info: {
                    name:null,
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null

                    }
                },
            }
        },
        mounted() {
            //钩子函数 链式编程 ES6新特性
            axios.get("../data.json").then(response => (this.info=response.data));
        },

        //计算属性
        computed: {
            getTime2: function () {
                // this.message;this
                return Date.now();
            }
        }

    });
</script>
</body>
</html>

{
  "name": "cqh",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "缇香郡",
    "city": "宁波",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}