一. Vue简介

前端开发作者： 2024-08-26 09:20:01

1. Vue理解 1.1 特点 JavaScript 框架简化Dom操作（使用Vue提供的特殊语法，Vue会自动的去操纵使用特殊语法的DOM元素）响应式数据驱动（页面是由数据生成的）渐进式的框

1. Vue理解

1.1 特点

1.2 高级功能

1.3 第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HelloVue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            const app = new Vue({
                <!-- el类型：String或HTMLElement -->
                el: '#app',<!-- data类型：Object或function -->
                <!-- 注意：组件当中data必须是一个函数 -->
                data: {
                    message: 'Hello Vue!'
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
</html>

<body>
    <div id="app">
        {{ message }}
        <h2>{{ person }}</h2>
        <h2>{{ person.name }}</h2>
        <h3>{{ words}}</h3>
        <h3>{{ words[2] }}</h3>
    </div>
    <script>
        const app = new Vue({
                el: '#app',data: {
                    message: 'Hello Vue!',person:{
                        name:"lak",gender:"女"
                    },words:["GG","TT","YY","MM"]
                }
            })
	</script>
</body>

2. Vue中的MVVM

3. Vue声明周期

3.1 Vue生命周期理解

3.2 总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HelloVue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script>
        window.onload = function(){
            const app = new Vue({
                el:"#app",data:{
                    msg:"GG"
                },method:{},//1.生命周期中的第一个函数，该函数在执行时Vue实例仅仅完成了
                //  自身事件的绑定和生命周期函数的初始化工作，Vue实例中还没
                //  有Data，el，methods相关属性
                beforeCreate(){
                    console.log("beforeCreate:" + this.msg);//拿不到该属性
                },//2.生命周期中的第二个函数，该函数在执行时Vue实例已经初始化
                //  化了data属性和methods中相关方法
                created(){
                    console.log("create:" + this.msg);
                },//3.生命周期的第三个函数，该函数在执行时Vue将el中指定作用范围
                //  作为模板编译
                beforeMount(){
                    console.log("beforeMount:" + 
                        document.getElementById("sp").innerText);
                    //beforeMount:{{msg}}
                },//4.生命周期的第四个函数，该函数在执行过程中，已经将数据渲染到
                //  界面中并且已经更新页面
                mounted(){
                    console.log("beforeMount:" + 
                        document.getElementById("sp").innerText);
                    //beforeMount:GG
                },//5.生命周期的第五个函数，该函数是data中数据发生变化时执行的，
                //  此事件执行时仅仅时Vue实例中的data数据变化，而页面中显示的还是
                //  原始数据
                beforeUpdate(){},//6.生命周期的第六个函数，此事件执行时Vue实例中的data数据
                //变化，页面中的数据也相应发生了变化
                update(){},//7
                beforeDestory(){},//8
                destoryed(){},})
            
        }
    </script>
</head>
<body>
    <div id="app" >
        <span id="sp">{{msg}}</span>
    </div>
</body>
</html>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68894.html