VUE笔记

知识库大约 4 分钟

vueJs简介

安装

# npm源加速
npm config set registry https://registry.npm.taobao.org
# 全局安装webpack依赖
npm install webpack -g
# 全局安装vue 脚⼿架
npm install -g @vue/cli-init
# vue脚⼿架使⽤webpack模板初始化⼀个项⽬
vue init webpack my-project
npm install
npm run dev

直接用script引入

// 完整版(包含完整的警告和调试模式)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
// 压缩版(删除了警告)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

vue简单示例

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>初识Vue</title>
 <!-- 引入Vue -->
 <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
 <!-- 准备好一个容器 -->
 <div id="demo">
  <h1>Hello，{{name.toUpperCase()}}，{{address}}，{{1+1}},{{Date.now()}}</h1>
 </div>
 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  new Vue({
   el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。\
   // el:document.getElementById('root'),也可以这么写，但不推荐
   data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
    name: 'DEV',
    address: '北京'
   }
  })
 </script>
</body>
</html>

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">{{message}}</div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          message: "Vue的⽣命周期",
        },
        beforeCreate: function () {
          console.group("------beforeCreate创建前状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //undefined
          console.log("%c%s", "color:red", "data : " + this.$data); //undefined
          console.log("%c%s", "color:red", "message: " + this.message); //undefined
        },
        created: function () {
          console.group("------created创建完毕状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //undefined
          console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
          console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeMount: function () {
          console.group("------beforeMount挂载前状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
          console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
          console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        mounted: function () {
          console.group("------mounted 挂载结束状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
          console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
          console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
          console.group("beforeUpdate 更新前状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        },
        updated: function () {
          console.group("updated 更新完成状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        },
        beforeDestroy: function () {
          console.group("beforeDestroy 销毁前状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function () {
          console.group("destroyed 销毁完成状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        }
      });
      // 设置data中message数据值
      //vm.message = "good...";
      // 销毁Vue对象
      //vm.$destroy();
    </script>
  </body>
</html>

VUE事件处理

鼠标按钮修饰符

<button v-on:click="showInfo">点我（不传参）</button>
<button @click="showInfo($event,66)">点我（传参）</button>       
<button @click.right="showInfo">右键点我</button>
<button v-on:click.ctrl.exact="showInfo">ctrl+触发</button>       
<button v-on:click.shift="showInfo">shift+触发</button>         
<button v-on:click.exact="showInfo">没有任何系统修饰符触发</button>

事件修饰符

修饰符可以连续写

<button @click.prevent="showInfo">阻止默认事件（常用）</button>
<button @click.stop="showInfo">阻止事件冒泡（常用）</button>
<button @click.once="showInfo">事件只触发一次（常用）</button>
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进⾏处理 -->
<button v-on:click.capture="showInfo">使用事件的捕获模式</button>
<!-- 只当在 event.target 是当前元素⾃身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<button v-on:click.self="showInfo">当前元素⾃身时触发</button>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕；@wheel滚轮滚动事件 @scroll滚动条滚动事件 -->
<ul @wheel.passive="demo" class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

键盘事件

<input type="text" placeholder="按下enter触发事件" @keydown.enter="showInfo">
<input type="text" placeholder="按下ctrl+y触发事件" @keyup.ctrl.y="showInfo">

Object.defineProperty()

MDNopen in new window

Vue数据劫持与数据代理，计算属性等都用到了这个方法，必须理解它。
作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。

// 第一种
let Person = Object.defineProperty({}, 'name', {
  value: 'jack',
  writable: true      // 是否可以改变
});
// 第二种
let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    console.log('当获取值的时候触发的函数')
    return temp
  },
  set: function (val) {
    console.log('有人修改了age属性，且值是', value)
    temp = val
  }
})

VUE笔记

# vueJs简介

# 安装

# 直接用script引入

# VUE事件处理

# Object.defineProperty()

vueJs简介

安装

直接用script引入

VUE事件处理

Object.defineProperty()