09-GuliMall Vue上手

最新推荐文章于 2024-08-14 22:44:40 发布

鸣鼓ming

最新推荐文章于 2024-08-14 22:44:40 发布

阅读量148

点赞数

分类专栏：谷粒商城学习笔记文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_41865229/article/details/125844128

版权

谷粒商城学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

vue官方中文文档

1.创建Vue项目

1.新建项目工程

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹。这里，我们新建一个 VueDemo 的文件夹.然后使用vscode打开文件夹
在这里插入图片描述

2.安装vue

1.可以使用script标签引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

2.也可以使用npm安装到本地, 这里我们演示使用npm安装
使用终端打开文件夹,输入以下命令, 若不加@2.6.14则默认安装最新版

npm install vue@2.6.14

在这里插入图片描述
安装成功

3.使用vue

新建html文件,使用标签引入本地vue文件, 注意路径不要写错

<script src="../node_modules/vue/dist/vue.js"></script>

在这里插入图片描述
index.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>
    
</head>
<body>
    <div id="app">
        <h1>my name is {{name}}</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"lisi"
            }
        });
    </script>
</body>
</html>

首先通过 new Vue()来创建 Vue 实例 , 然后构造函数接收一个对象，对象中有一些属性：

el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
name：这里我们指定了一个 name 属性, 页面中的h1元素中，我们通过{{name}}的方式，来渲染刚刚定义的 name 属性。

open with livw server
在这里插入图片描述

2.Vue组件

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。在 vue 里，所有的 vue 实例都是组件.

在这里插入图片描述

<!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>
    
</head>
<body>
    <div id="app">
        <h1>my name is {{name}}</h1>
        <couter></couter>
        <mybtn></mybtn>
        <mybtn></mybtn>
        <mybtn2></mybtn2>
        <mybtn2></mybtn2>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>

        // 1.定义全局组件，两个参数：1，组件名称。2，组件参数      
        Vue.component("mybtn",{
            template:`
                <div>
                    <p>{{num}}</p>
                    <input type="button" value="点击num加1" @click="num++">
                </div>
            `,

            //data必须是函数,不能写成data:{num:1}
            data(){
                return {
                    num:1
                }
            }
        })

        // 2.定义局部组件
        const btn = {
            template:`
                <div>
                    <p>{{num}}</p>
                    <input type="button" value="点击num减1" @click="num--">
                </div>
            `,
            //data必须是函数,不能写成data:{num:1}
            data(){
                return {
                    num:100
                }
            }
        }

        new Vue({
            el:"#app",
            data:{
                name:"lisi"
            },
            components:{
                mybtn2 : btn
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

3.Vue生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。
在这里插入图片描述

beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是 init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就是：在dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。
beforeDestroy：该函数将在销毁实例前进行调用。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。

<!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>

</head>

<body>
    <div id="app">
        <h1>my name is {{name}}</h1>
        <couter></couter>
        <mybtn></mybtn>
        <mybtn></mybtn>
        <mybtn2></mybtn2>
        <mybtn2></mybtn2>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "lisi"
            },
            methods: {
                show(){
                    console.log("======show========");
                },
                add(a,b){
                    return a+b;
                }
            },

            beforeCreated() {
              
                console.log("beforeCreated");
            },
            created() {
                this.show();
                console.log("created");
                console.log("3+4="+this.add(3,4));
            },
            beforeMount() {
                console.log("beforeMount");
            },
            mounted() {
                console.log("mounted");
            },
            beforeDestroy() {
                console.log("beforeDestroy");
            },
            destroyed() {
                console.log("destroyed");
            },
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            updated() {
                console.log("updated");
            }

        });
    </script>
</body>

</html>

鸣鼓ming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09-GuliMall Vue上手

往往不同的页面，也会有相同的部分。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。每个Vue实例在被创建时都要经过一系列的初始化过程创建实例，装载模板，渲染模板等等。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。vscode本身没有新建项目的选项，所以要先创建一个空的文件夹。//1.定义全局组件，两个参数1，组件名称。...
复制链接

扫一扫

专栏目录