Vue.js学习

最新推荐文章于 2024-09-13 14:34:15 发布

fxyxxkk

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量237

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_62758196/article/details/126746703

版权

第一课

M V VM模型

双向绑定 v-model

引入图片 v-bind:src="url"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hhh</title>
    <!-- 引入vue.js框架 -->
    <script src="js/vue26.js"></script>
</head>
<body>
    <!-- 定义程序的界面 也就是M V VM 中的 V （全称view视图） -->
    <div id="app">
        <h1>{{message}}</h1>
        <!-- v-model指令可以实现数据的修改 -->
        <h1><input type="text" v-model="abc"></h1>
        
    </div>
    <script>
        // 定义程序的数据 也就是M V VM 中的 M （全称modle模型）
        let myDate = {
            message: 'I like Vue.js',
            abc: ''
        };
        // 创建视图模型 也就是M V VM 中的 VM （全称viewmodel视图模型）
        // new Vue();
        // 也可以创建一个Vue的实例对象 保存到变量vm中
        let vm = new Vue({
            // el属性用于指定程序的界面是什么 Element缩写
            // data属性用于指定程序用到的数据是什么
            el: '#app',
            data: myDate
        })
    </script>
</body>
</html>

     <div id="box">
        <img v-bind:src="url">
    </div>
    <script>
         let vm = new Vue({
            el:"#box",
            data: {
                url: 'mr.gif'
            }
        })
    </script>

第二课

Vue中的方法 methods:

加入css样式 v-html

生命周期钩子函数不是很懂这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="box">
        <div v-html="title">{{title}}</div>
        <h3>{{ showInfo() }}</h3>
        <button v-on:click="showInfo()">执行方法showInfo</button>
        <button v-on:click="xiaohui()">销毁Vue实例</button>
    </div>
    <script>
        // 创建Vue实例对象
        let dome=new Vue({
            // el选项
            el: '#box',
            // data选项
            data:{
                title:'<h1 style="color:red;">明日学院</h1>',
                name: '明日学院',
                url:'www.mingrisoft.com'
            },
            // 方法选项，用于定义处理事件的函数或者一些普通的函数
            methods:{
                // 在对象中的函数，我们成为方法，定义格式与常规的函数有一定区别
                showInfo:function(){
                    // this代表当前这个showInfo方法所在的Vue实例对象dome
                    alert("showInfo方法被调用了！")
                    return this.$data.name + '：'+this.$data.url;
                },
                xiaohui: function(){
                    // 调用Vue实例对象内置的方法，将当前this代表的demo对象销毁
                    this.$destroy();
                }     
            },
            //定义生命周期钩子函数
            beforeCreate: function(){
                console.log('beforeCreate生命周期钩子函数被调用！');
            },
            created: function(){
                console.log('created生命周期钩子函数被调用！');
            },
            beforeMount: function(){
                console.log('beforeMount生命周期钩子函数被调用！');
            },
            mount: function(){
                console.log('mount生命周期钩子函数被调用！');
            },
            beforeDestroy: function(){
                console.log('beforeDestroy生命周期钩子函数被调用！');
            },
            destroyed: function(){
                console.log('destroyed生命周期钩子函数被调用！');
            }
        })
    </script>
</body>
</html>