06日目Vue-ライフサイクル

1.Vueインスタンスのライフサイクル

Vueインスタンスの作成、操作、破棄から、常にさまざまなイベントがあります。これらのイベントは、Vueインスタンスのライフサイクルです。

2、ライフサイクルフック

ライフサイクルフック：ライフサイクルイベントのエイリアスです。ライフサイクルフックは、ライフサイクル関数またはライフサイクルイベントとも呼ばれます。

作成中のライフサイクル機能：

WeChat Image_20201218095147

スリーフック機能

beforeCreate
作成した
beforeMount
マウント
beforeUpdate
更新
beforeDestroy
破壊されました

3.1beforeCreateとcreatedフック関数の間のライフサイクル。

このライフサイクル中に、初期化イベントが実行され、データが監視されます。作成時にデータがデータ属性にバインドされていることがわかります。しかし、それはまだマウントされておらず、elはまだ利用できません。

3.2作成からマウント前までのライフサイクル

この段階で、最初にオブジェクトにelオプション（オプション）があるかどうかを判断します。その場合は、コンパイルを続行します。そうでない場合は、コンパイルを停止します。これは、Vueインスタンスでvm。$ mount（el）が呼び出されるまでライフサイクルが停止することを意味します。

Vueインスタンスオブジェクトにテンプレートオプションがある場合、それはテンプレートとしてレンダリング関数にコンパイルされます。
テンプレートオプションがない場合、外部HTML（outerHTML）はテンプレートとしてコンパイルされます。
テンプレート内のテンプレートの優先度がouterHTMLの優先度よりも高いことがわかります。

3.3beforeMountとmountedの間のライフサイクル。

ことがわかる$ EL部材をVUEインスタンスオブジェクトに追加され、取り付けられたDOM要素が交換されます。前の結果グラフでは、beforeMountの前にelがまだ定義されていないことがわかります。

3.4マウント

前のコードによって生成された結果グラフに注意して

ください。図から、マウントされる前に、h1はまだページにハングしていないため、まだ{ {message}}で占められていることがはっきりとわかります。仮想DOMの形式。取り付け後に交換しました。

5.beforeUpdateとupdatedの間のライフサイクル

この図から、vueのデータが変更されると、対応するコンポーネントの再レンダリングがトリガーされ、beforeUpdateおよびupdatedフック関数が連続して呼び出されることがわかります。
実験を続けるには、コンソールに次のように入力します。

vm.message = '触发组件更新'
1

コンソール出力は次のとおり

です。これらの2つのフック関数がトリガーされていることがわかります。
ここで注意すべきことの1つは、2つの関数のデータが「トリガーコンポーネントの更新」に更新されていることです。違いは何ですか？

注意：

ここでの更新は、vueオブジェクトのデータ属性の更新ではなく、ビューレイヤーの更新を指します。したがって、これら2つの関数は両方ともデータの変更後に発生します（データ属性の変更によりこれら2つの関数がトリガーされるため、理解しやすいです）。違いは、beforeUpdateがビューレイヤーが変更される前に発生することです。つまり、ページが再作成されていません。 -rendered、この時点でもページには「Vueライフサイクル」が表示されます（beforeUpdateは、ページが再レンダリングされる前にデータを変更する最後の時間でもあります）。更新は、ビューレイヤーが変更された後、つまりページに「トリガーコンポーネント」アップデートとして再レンダリングされました。

6.beforeDestroyとdestroyedの間のライフサイクル

beforeDestroyは、インスタンスが破棄される前に呼び出されます。このステップでは、インスタンスは引き続き完全に呼び出し可能です。
破棄された関数は、インスタンスが破棄された後に呼び出されます。この時点で、vueインスタンスによって示されるすべてがバインド解除され、すべてのイベントリスナーが削除され、すべての子インスタンスも破棄されます。

2.タイミングタスクと遅延タスクを補足する

1.時限タスク

    setInterval(
        function () {
    
    
            alert(444)
        },3000
    )//每隔3s钟干什么事

2.タスクを遅らせる

    setTimeout(
        function () {
    
    
        alert(33333)
    },3000) //延迟3s钟干什么事

3つのスワイパーカルーセル図の学習

1.最初にプラグインをロードします

使用する必要のあるファイルは、swiper-bundle.min.jsとswiper-bundle.min.cssです。Swiperのバージョンによって使用されるファイル名は少し異なります。Swiperファイルをダウンロードするか、CDNを使用できます。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    
    <script src="dist/js/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
    
    <title>Title</title>
    <style>
        .swiper-container {
     
     
            width: 60%;
            height: 600px;
        }
    </style>
</head>

2.正式なコードを書く

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <title>Title</title>
  <style>
      .swiper-container {
     
     
          width: 60%;
          height: 600px;
      }

      img {
     
     
          width: 100%;
      }
  </style>
</head>
<body>

<div id="box">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="data in datalist">
        <img :src="data" alt="">

      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>
</div>


</body>
<script>


  var vm = new Vue({
     
     
    el: "#box",
    data: {
     
     
      datalist: []
    },
    mounted() {
     
     
      //大坑
      setTimeout(() => {
     
     
        //this指的是function这个函数
        //使用了箭头函数以后，this指的是上一层
        this.datalist = [
          "https://www.bing.com/th?id=OHR.TreCime_ZH-CN7609469681_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn",
          "https://www.bing.com/th?id=OHR.TreCime_ZH-CN7609469681_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn",
          "https://www.bing.com/th?id=OHR.TreCime_ZH-CN7609469681_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn",
          "https://www.bing.com/th?id=OHR.TreCime_ZH-CN7609469681_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn"
        ];
      }, 800);


    },
    updated() {
     
     
      //只要js数据发生变化，组件就会执行updated方法，轮播图又会重新创建
      var mySwiper = new Swiper(".swiper-container", {
     
     

        // 自动轮播
        autoplay: {
     
     
          delay: 1000,//1秒切换一次
        },

        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
     
     
          el: ".swiper-pagination"
        },

        // 如果需要前进后退按钮
        navigation: {
     
     
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }


      });
      //鼠标覆盖停止自动切换
      mySwiper.el.onmouseover = function() {
     
     
        mySwiper.autoplay.stop();
      },

//鼠标离开开始自动切换
        mySwiper.el.onmouseout = function() {
     
     
          mySwiper.autoplay.start();
        }
    },


  });

</script>
</html>

4つのカスタム手順

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>

    <title>Title</title>
</head>
<body>

<div id="box">

    <!--    <div v-mystyle> 我是div</div>-->
    <!--    <p v-mystyle> 0pppp</p>-->
    <!--    <p > sfasfsdafsd </p>-->

    <div v-mystyle="'green'"> 我是div</div>
    <div v-mystyle="'red'"> 我是div</div>

    <div v-mystyle="color"> 我是div</div>

</div>


</body>
<script>
    //自定义指令,不需要写v使用的时候，加上v-名字

    // Vue.directive('mystyle', {
     
     
    //     inserted() {  //在标签上使用这个指令，就会触发inserted的执行
    //         console.log('我执行了')
    //     },
    // })
    //只要使用了我的指令，背景就变红色
    // Vue.directive('mystyle', {
     
     
    //     inserted(ev) {  //ev就是dom对象
    //         ev.style.background='red'
    //     },
    // })

    //只要使用了我的指令，背景就变成我传入的颜色
    Vue.directive('mystyle', {
     
     
        inserted(ev, color) {
     
       //ev就是dom对象
            console.log(ev)
            console.log(color.value)
            ev.style.background = color.value
        },
        update(el, input) {
     
     
            el.style.background = input.value

        }
    })


    var vm = new Vue({
     
     
        el: '#box',
        data: {
     
     
            color: 'red'
        },


    })


</script>
</html>

5、フィルター

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <ul>
        <li v-for="item in datalist">
            <h2>{
   
   {item.nm}}</h2>
            <p>主演是：{
   
   {item.star}}</p>
            <!--        <img :src="geturl(item.img)" alt="">-->
            <img :src="item.img | repUrl" alt="">

        </li>
    </ul>

</div>


</body>
<script>

    Vue.filter('repUrl', function (url) {
     
     
        return url.replace('w.h', '128.180')
    })
    var vm = new Vue({
     
     
        el: '#box',
        data: {
     
     
            datalist: null
        },
        methods: {
     
     
            geturl(url) {
     
     
                return url.replace('w.h', '129.180')
            }
        },
        mounted() {
     
     
            axios.get("http://127.0.0.1:5000/").then(res => {
     
     
                console.log(res.data)
                this.datalist = res.data.coming
            }).catch(err => {
     
     
                console.log(err);
            })
        }


    })


</script>
</html>

6つの単一ファイルコンポーネント

# 原来写的组件存在的问题
    全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
    字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
    不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
    没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
    
# 以后每个组件就是一个 xx.vue-----最终----->html,css,js
	并且还可以使用 webpack 构建工具
# CLI 会为你搞定大多数工具的配置问题

7ビューCLI

1 安装node（昨天装了），官网下载，一路下一步----》node，npm
2 淘宝镜像（cnpm，）npm install -g cnpm --registry=https://registry.npm.taobao.org
3 装完以后，本地就有cnpm命令，以后再装模块，就使用cnpm安装
2 cnpm install -g @vue/cli    # -g 全局安装
3 装完以后就会走vue命令
4 通过vue命令创建项目
	vue create 项目名（命令行下创建项目）
    	
    vue ui (图形化界面，点点点创建项目)
    	-点一点就会（bable，eslint）
    注意：
    	新建的这些项目的本质是：cli从git上给你拉了一个空项目（模板），以后再模板上继续写就可以了
5 注意
    vue：2.x
    bable：兼容性相关（es6的语法，自动转成es5兼容浏览器）
    eslint：语法检查，代码格式化
    
6 运行项目
	npm run serve  :在浏览器中访问
        
7 使用ide打开编写
	pycharm打开

プロジェクトカタログ紹介

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉，不上传git，使用npm install重新安装)
public: 共用资源
	--favicon.ico
	--index.html: 项目入口页面，单页面开发
src: 项目目标,书写代码的地方
	-- assets:资源，静态图片
	-- components:组件（swiper组件...）
	-- views:视图组件(也是组件)
	-- App.vue:根组件
	-- main.js: 入口js
	-- router.js: 路由文件
	-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json：项目配置依赖（等同于python项目的reqirement.txt）

"scripts": {
  "serve": "vue-cli-service serve",   npm run serve  运行项目
  "build": "vue-cli-service build",   npm run build   构建项目---》html，css，js
  "lint": "vue-cli-service lint"      npm run lint    格式化代码
}