week11_day01_Vue基础3&&Vue项目1

最新推荐文章于 2020-07-01 15:52:29 发布

-玫瑰少年-

最新推荐文章于 2020-07-01 15:52:29 发布

阅读量441

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/shihao1998/article/details/106764879

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.10.4前后端分离

前端和后端分离: 工程上的分离, (分为前端项目, 分为后端项目)
对于前后端不分离的来说, 数据和前端代码的结合----服务器来做

前后端不分离的项目(前端和后端属于一个项目)
就比如可以在现在的Code3项目中创建一个包，写一些java代码，读取HTML代码。

前后端分离的写法: 数据结合-----浏览器
浏览器发请求，分两次发，一次请求html对应的前端的内容，一次请求数据

我们之前讲的这个图，不是前后端分离
在这里插入图片描述
这才是前后端分离：

浏览器发送一个请求，DNS域名服务首先将域名转换成ip，根据ip地址去访问前端服务器，前端服务器接收请求并解析请求，返回给一个前端页面给浏览器，并告诉浏览器数据的地址，
然后浏览器就根据地址去后端服务器取数据。最后将前端页面和数据结合。

Vue也是前后端分离的。

1.10.5组件间传值: 向下(父组件传给子组件)传值

Vue对象需要数据，就得调用浏览器向后端请求数据。
一个页面有多个Vue对象，他们都需要数据，要让浏览器发送多次请求么？
可以，但是不合适，因为太多的请求操作对后台的压力很大。
后台希望发送一次请求就能处理完这个页面，这就可以让最上层的组件调用浏览器发请求，最上层组件请求后得到的数据都在其data域中，怎么把返回的数据分别给到其子组件呢？
向下传值

Props
v-bind : 单向绑定

传值:
至少要分两步,
第一步: 递(父组件, 传递通过v-bind)
第二步: 接收(子组件接收, 通过 props)
在这里插入图片描述

1.10.6组件间传值: 向上(子组件传递给父组件)
也要有两个动作:
1: 子组件通知父组件: emit
2: 父组件监听子组件: 自定义方法
在这里插入图片描述

1.11 生命周期函数（钩子、方法）
生命周期：一个对象从被创建到最后消亡的一系列过程。
Vue中关注的核心点是Vue对象，我们在这说的生命周期函数就是在Vue中，Vue对象从创建到销毁的过程。

Vue的生命周期方法是Vue对象固有的，和data一样，你就算不写，它也存在于Vue对象中，只不过为空。

生命周期函数是Vue对象在创建到销毁的某一个过程中执行的方法
四对八个方法：创建—挂载—改变—销毁

什么是挂载，html代码、js代码、对象，加载到DOM树上，这叫挂载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="root">
    {{msg}}
    <input v-model="msg">
</div>

<script>
    var root = new Vue({
        el: '#root',
        data: {
            msg: 123
        },
        //创建
        beforeCreate:function () {
            console.log("控制台打印:beforeCreate")
        },
        created:function () {
            console.log("控制台打印:created")
        },
        //挂载，就本例子来说，Vue对象和div代码块建立联系就叫挂载
        //挂载之前是{{msg}}
        beforeMount:function () {
            //页面还未被渲染
            console.log(this.$el),
                console.log("控制台打印:beforeMount")
        },
        //挂载之后是123
        mounted:function () {
            //页面渲染完成
            console.log(this.$el),
                console.log("控制台打印：mounted")
        },
        //更新
        beforeUpdate:function () {
            console.log("控制台打印：beforeUpdate")
        },
        updated:function () {
            console.log("控制台打印：updated")
        },
        //销毁
        //Chrome浏览器控制台打印root.$destroy()即可
        beforeDestroy:function () {
            console.log("控制台打印：beforeDestory")
        },
        destroyed:function () {
            console.log("控制台打印：destroyed")
        }
    })

    //常用的只有：created和mounted，一般用于初始化数据的时候
    //浏览器请求页面的时候，html页面是一个空的页面（没数据），数据得去后端取，
    //Vue对象控制去后端取数据，调用浏览器发请求。
    //什么时候取，创建的时候和挂载的时候。
    //取出来放在data里面去显示它
</script>
</body>
</html>

1Vue

1.1工程化的创建一个Vue项目
工程化就是我们创建出来后就是一个工程，能用，能开发，甚至可以直接打包部署
1.1.1第一步
安装node

检测是否安装成功
node -v
npm -v

1.1.2第二步
安装cnpm 阿里
npm install -g cnpm --registry=https://registry.npm.taobao.org
在这里插入图片描述
npm：命令标识
Install: 安装
-g: 全局安装(两个问题: 第一个,不要直接复制ppt中的代码运行（可以将其复制到Notepad++中，Notepad++会把隐藏字符去掉，然后再复制Notepad++中的代码）全局: )
Cnpm: 要安装的包
–registry=https://registry.npm.taobao.org: 从那获得这个包

Cnpm -v

npm是一个包管理工具，用来下包，取npm服务器下载，npm服务器在国外，下载会很慢，
此时就需要cnpm，cnpm是阿里做的，在国内，我们可以利用cnpm下载，cnpm会和npm保持同步。

1.1.3第三步: vue-cli
安装脚手架工具(vue-cli: 它可以帮助我们快速构建一个项目)

cnpm install -g @vue/cli
cnpm install -g @vue/cli-init
vue –V (v必须大写)

1.1.4第四步: webpack
模块打包:
cnpm install -g webpack

总结步骤：
1.安装node，然后node -v 、npm -v
2.安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装脚手架工具(vue-cli: 它可以帮助我们快速构建一个项目)
cnpm install -g @vue/cli
cnpm install -g @vue/cli-init
vue –V (v必须大写)
4.模块打包：cnpm install -g webpack
1.1.5创建项目
安装步骤：
1.vue init webpack vuetest
2.cd vuetest
3.cnpm install
4.npm run dev
然后浏览器输入：http://localhost:8080，出现以下界面，表示创建成功
在这里插入图片描述
安装过程：