【vue】2.1 vue入门

作者: bobokaka | 来源:发表于2021-03-23 03:32 被阅读0次

【vue】2.1 vue入门
vue基础入门（2.1）
VUE系列教程目录
VUE系列教程目录
Vue 入门到实战课程
Vue.js状态管理工具Vuex快速上手
Vue2简单入门
Vue.js再入门
Vue.js使用vue-router构建单页应用
01vue-安装vue

在公司用了很久的vue，从来没有系统学过，在此系统学习一波。

2.0 vue最简单版使用

我们知道vue是一个经常进行高度组件化的js工具库，但组件是什么？
如下例子。

<!DOCTYPE html>
<html lang="ch-Zn">

<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">
        {{message}}
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">

            </todo-item>
        </ol>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todo-item', {//表示组件名称叫“todo-item”
        props: ['todo'],//接收的属性叫tudo
        template: '<li class="text">{{todo.text}}</li>'//模板叫这个
    })


    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue!',
            groceryList: [{
                    id: 0,
                    text: '蔬菜'
                }, {
                    id: 1,
                    text: '奶酪'
                }, {
                    id: 2,
                    text: '干果'
                },

            ]
        }
    })
</script>

</html>

image.png

3.0 vue开发环境搭建

vue脚手架。

image.png

看到如下画面表示运行成功。

image.png

通过vsCode打开文件夹。

image.png

4.0 vue组件的生命周期

image.png

<template>
  <div>
    {{ log("render") }}
    {{ now }}
    <button @click="start = !start">{{ start ? "停止" : "开始" }}</button>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data: function() {
    console.log("data");
    this.moment = moment;
    this.log = window.console.log;
    return {
      now: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      start: false
    };
  },
  watch: {
    start() {
      this.startClock();
    }
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
    this.startClock();
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    clearInterval(this.clockInterval);
  },
  destroyed() {
    console.log("destroyed");
  },
  methods: {
    startClock() {
      clearInterval(this.clockInterval);
      if (this.start) {
        this.clockInterval = setInterval(() => {
          this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
        }, 1000);
      }
    }
  }
};
</script>

5.0 函数式组件

无状态、无实例、没有this上下文、无生命周期。
就是一个function或者表达式。

6.0 指令（14种）

image.png
v-text会把元素内所有的东西替换掉。
v-bind:key == :key
v-on:click == @click
v-pre直接输出其中的字符串，而不是转译{{}}符号
v-once绑定的变量指挥执行一次。

自定义指令：

image.png

组件的一般使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 4</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // mvvm , vue 实例，vue 组件
  const app = Vue.createApp({
    data() {
      return {
        inputValue: '',
        list: []
      }
    },
    methods: {
      handleAddItem() {
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    },
    template: `
      <div>
        <input v-model="inputValue" />
        <button
          v-on:click="handleAddItem"
          v-bind:title="inputValue"
        >
          增加
        </button>
        <ul>
          <todo-item
            v-for="(item, index) of list"
            v-bind:content="item"
            v-bind:index="index"
          />
        </ul>
      </div>
    `
  });

  app.component('todo-item', {
    props: ['content', 'index'],
    template: '<li>{{index}} -- {{content}}</li>'
  });

  app.mount('#root');

</script>
</html>

事件修饰符：stop, prevent, capture, self, once, passive
按键修饰符：enter, tab, delete, esc, up, down, left, right
鼠标修饰符：left, right, middle
精确修饰符：exact

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 12</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // event, $event
  // 事件修饰符：stop, prevent, capture, self, once, passive
  // 按键修饰符：enter, tab, delete, esc, up, down, left, right
  // 鼠标修饰符：left, right, middle
  // 精确修饰符：exact
  const app = Vue.createApp({
    methods: {
      handleClick() {
        console.log('click')
      },
    },
    template: `
      <div>
        <div @click.ctrl.exact="handleClick">123</div>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>
</html>