vue-基本使用（1）

@vue/cli 自定义配置

项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js，在项目根目录手动创建

module.exports = {
    devServer: { // 自定义服务配置
        port: 3000,  //端口号设置
        open: true, // 自动打开浏览器
    },
    lintOnSave:false  //关闭eslint，写代码出错，控制台不报错
}

插值表达式

模板中使用 “Mustache” 语法 (双大括号) 的文本插值

script 中定义数据，data() 函数返回一个对象，就是当前组件的数据

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age >= 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
// ViewModel  ->  vue.js 监听数据变化,自动渲染 DOM
// MVVM 的好处: 让程序员只需要关注数据的操作, 提前定义好模板就可以完成开发了, 不需要手动操作 DOM
export default {
  data() {
    // 当前组件的 「数据」
    return {
      // 在返回的对象中定义属性，就可以在页面上渲染，直接在插值表达式中使用
      msg: "HelloWorld",
      obj: {
        name: 'zs',
        age: 18
      },

    };
  },
};
</script>

v-bind指令

作用：给元素的原生属性绑定一个变量，数据变化时会自动更新 DOM

语法：<img v-bind:src="url" />

简写：<img :src="url" />

<template>
  <div>
    <!-- <img v-bind:src="url"> -->
    <!-- v-bind 的作用: 给元素的原生属性绑定一个变量 -->
    <img :src="url">
  </div>
</template>

<script>
// ViewModel  ->  vue.js 监听数据变化,自动渲染 DOM
// MVVM 的好处: 让程序员只需要关注数据的操作, 提前定义好模板就可以完成开发了, 不需要手动操作 DOM
export default {
  data() {
    // 当前组件的 「数据」
    return {
      url: 'http://yun.itheima.com/Upload/./Images/20210706/60e423442cb61.jpg'

    };
  },
};
</script>

v-on指令

作用：绑定事件

语法：v-on:click="事件处理函数(methods中定义)"

简写：@click="事件处理函数(methods中定义)"

需求：点击按钮，切换图片显示

<template>
  <div>
    <img :src="url" />
    <br />
    <!-- 点击按钮, 切换图片的URL -->
    <!-- http://yun.itheima.com/Upload/./Images/20210625/60d5bd0406901.jpg -->
    <!-- <button @click="changeUrl">切换图片</button> -->
    <button @click="changeUrl('http://yun.itheima.com/Upload/./Images/20210705/60e2bd06d766a.jpg')">切换图片</button>
  </div>
</template>

<script>
// ViewModel  ->  vue.js 监听数据变化,自动渲染 DOM
// MVVM 的好处: 让程序员只需要关注数据的操作, 提前定义好模板就可以完成开发了, 不需要手动操作 DOM
// 数据 驱动 视图
export default {
  data() {
    // 当前组件的 「数据」
    return {
      url: "http://yun.itheima.com/Upload/./Images/20210706/60e423442cb61.jpg",
    };
  },
  methods: {
    changeUrl(imgUrl) {
      // 不建议用箭头函数
      // console.log('我被点了')

      // 为什么 this 可以访问到 data 中的数据?
      // this => 都指向当前组件对象
      // 因为 data 中的数据 最终会被挂载到组件对象身上
      // 所以 this.url 等于直接访问 data 里的数据
      // this.url = 'http://yun.itheima.com/Upload/./Images/20210625/60d5bd0406901.jpg'

      this.url = imgUrl
    },
  },
};
</script>

事件对象

绑定事件时未传值，第一个参数就是事件对象

绑定事件时传值，需要手动传入 $event 实参

<button @click="changeUrl($event, 'http://yun.itheima.com/Upload/./Images/20210705/60e2bd06d766a.jpg')">切换图片

事件修饰符

stop：阻止冒泡

prevent：阻止默认行为

once：触发一次后事件被移除

<template>
  <div>
    <div @click="fatherFn">
      <p @click.stop="oneFn">.stop - 阻止事件冒泡</p>
      <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>
      <p @click.once="twoFn">点击观察事件处理函数执行几次</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("fahter-触发click事件");
    },
    oneFn(){
      console.log("p标签点击了");
    },
    twoFn(){
      console.log("p标签被点击了");
    }
  }
}
</script>

按键修饰符

键盘事件

enter：按下回车时触发

esc：按下 esc 时触发

13：keyCode 为 13 的按键被按下时触发

<template>
  <div>
    <!-- 1. 绑定键盘按下事件.enter-回车 -->
    <input type="text" @keydown.enter="enterFn">
    <!-- 2. .esc修饰符 - 取消键 -->
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
  methods: {
    enterFn(){
      console.log("用户按下的回车");
    },
    escFn(){
      console.log("用户按下esc键");
    }
  }
}
</script>