Vue.js 笔记 (一)

最后更新时间：2022年11月16日

Vue

初识Vue

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue.html</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>Hello，{{ language }}</h1>
</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:"#root",
        data:{
            language:'javascript'
        }
    });

</script>
</html>

模板语法

  1. 插值语法：

    • 功能：用于解析标签体内容。
    • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

  2. 指令语法：

    • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
    • 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>Hello，{{ language }}, I am {{ name.toUpperCase() }}</h1>
    <h2><a v-bind:href="blog_url">this is my blog</a></h2>
</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:"#root",
        data:{
            language:'javascript',
            name: 'ronie',
            blog_url:'https://www.ronie.ren'
        }
    });

</script>
</html>

数据绑定

  1. 单向绑定(v-bind)：数据只能从data流向页面。
  2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。双向绑定一般都应用在表单类元素上（如：input、select等），v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据绑定</title>
  <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
  <h1>Hello，{{ language }}, I am {{ name.toUpperCase() }}</h1>
  <h2><a v-bind:href="blog_url">this is my blog</a></h2>
  <form action="">
    <input type="text" v-model:value="inputName" name="name">
  </form>
</div>
</body>
<script type="text/javascript">
  const vm = new Vue({
    el:"#root",
    data:{
      language:'javascript',
      name: 'ronie',
      blog_url:'https://www.ronie.ren',
      inputName:'kelly'
    }
  });
</script>
</html>

el与data

  1. el的2种写法

    • new Vue时候配置el属性。

      <script type="text/javascript">
const vm = new Vue({
 el:'#root',
})
</script>

    • 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

      <script type="text/javascript">
const vm = new Vue({})
vm.$mount('#root')
</script>

  2. data的2种写法

    • 对象式

      <script type="text/javascript">
const vm = new Vue({
 el:'#root',
 data: {
   name:'ronie'
 }
})
</script>

    • 函数式

      <script type="text/javascript">
const vm = new Vue({
 el:'#root',
 data:function (){
   return {
     name:'ronie'
   }
 }
})
</script>

MVVM模型

  1. MVVM模型

    • M：模型(Model) ：data中的数据
    • V：视图(View) ：模板代码
    • VM：视图模型(ViewModel)：Vue实例

  2. 观察发现：

    • data中所有的属性，最后都出现在了vm身上。
    • vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理

  1. Object.defineproperty

    <script type="text/javascript">
 let person = {
     name: "ronie",
     sex:"male"
 }
 let number = 18
 Object.defineProperty(person,'age',{
     // value:18,  //  属性的值，默认为 undefined。
     // enumerable:true, //  控制属性是否可以枚举，默认值是false
     // writable:true, //  该属性是否可写，如果设置成 false，则任何对该属性改写的操作都无效（但不会报错）
     // configurable:true //  如果为false，则任何尝试删除目标属性或修改属性以下特性（writable, configurable, enumerable）的行为将被无效化

     //一旦目标对象访问该属性，就会调用这个方法，并返回结果。默认为 undefined。
     get(){
         console.log('有人读取age属性了')
         return number
     },
     // 一旦目标对象设置该属性，就会调用这个方法。默认为 undefined。
     set(value){
         console.log('有人修改了age属性，且值是',value)
         number = value
     }
 })
</script>

  2. 数据代理
    通过一个对象代理对另一个对象中属性的操作（读/写）

    <script type="text/javascript" >
 let obj1 = {x:100}
 let obj2 = {y:200}

 Object.defineProperty(obj2,'x',{
     get(){
     return obj1.x
 },
     set(value){
     obj1.x = value
 }
})
</script>

  3. Vue中的数据代理

    1. Vue中的数据代理：

      • 通过vm对象来代理data对象中属性的操作（读/写）

    2. Vue中数据代理的好处：

      • 更加方便的操作data中的数据

    3. 基本原理：

      • 通过Object.defineProperty()把data对象中所有属性添加到vm上。
      • 为每一个添加到vm上的属性，都指定一个getter/setter。
      • 在getter/setter内部去操作（读/写）data中对应的属性。

事件

  1. 事件的基本使用：

    • 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
    • 事件的回调需要配置在methods对象中，最终会在vm上；
    • methods中配置的函数，不要用箭头函数！否则this就不是vm了；
    • methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
    • @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>事件处理</title>
 <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
  <button v-on:click="showInfo1">{{ "button1".toUpperCase() }}</button>
  <button v-on:click="showInfo2('inputInfo')">{{ "button2".toUpperCase() }}</button>
</div>
</body>
<script type="text/javascript">
  const vm = new Vue({
  el:'#root',
  data:{},
  methods:{
     showInfo1(event){
         console.log("this is showInfo1:", event)
       },
     showInfo2(data){
         console.log("this is showInfo2:", data)
       }
     }
  })
</script>
</html>

  2. Vue中的事件修饰符：

    • prevent：阻止默认事件（常用）
    • stop：阻止事件冒泡（常用）
    • once：事件只触发一次（常用）
    • capture：使用事件的捕获模式
    • self：只有event.target是当前操作的元素时才触发事件
    • passive：事件的默认行为立即执行，无需等待事件回调执行完毕
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script type="text/javascript" src="../vue/vue.js"></script>
<style>
.in{
  width: 200px;
  height: 150px;
  background-color: #16da68;
}
.out{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  width: 100%;
  background-color: #c5567d
}
</style>
</head>
<body>
<div id="root">
 <!--  点击内部box，会触发冒泡，使用stop修饰符取消冒泡-->
 <div class="out" @click="outClick">
<div class="in" @click.stop="inClick">
</div>
 </div>

 <hr>
 <hr>

 <!--  点击链接后，会出现弹窗，然后执行a标签的默认事件（页面去往https://www.ronie.ren），使用prevent取消默认事件-->
 <a href="https://www.ronie.ren" @click="a_action">点我去Ronie的blog</a>

 <hr>
 <hr>

 <!--  使用once修饰符，事件只触发一次-->
 <button @click.once="a_action">这个按钮只能点一次</button>

 <hr>
 <hr>

 <!--  使用事件的捕获模式-->
 <div class="out" @click.capture="outClick">
<div class="in" @click="inClick">
</div>
 </div>
</div>
</body>

<script type="text/javascript">
const vm = new Vue({
el:'#root',
methods:{
  outClick(){
    alert("outClick")
  },
  inClick(){
    alert("inClick")
  },
  a_action(){
    alert('a clicked')
  }
}
})
</script>
</html>

  3. 键盘事件

    • Vue中常用的按键别名：

      • 回车 => enter
      • 删除 => delete (捕获“删除”和“退格”键)
      • 退出 => esc
      • 空格 => space
      • 换行 => tab (特殊，必须配合keydown去使用)
      • 上 => up
      • 下 => down
      • 左 => left
      • 右 => right
    • Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

    • 系统修饰键（用法特殊）：ctrl、alt、shift、meta

      • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
      • 配合keydown使用：正常触发事件。
    • 也可以使用keyCode去指定具体的按键（不推荐）
    • Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>键盘事件</title>
 <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>欢迎来到{{name}}的Blog</h2>
  <!--  按住shift + k触发，k抬起时触发-->
  <input type="text" placeholder="按下回车搜索" @keyup.shift.75="showInfo"> 
</div>
</body>
<script type="text/javascript">
 const vm = new Vue({
 el:"#root",
 data:{
   name:"ronie",
 },
 methods:{
   showInfo(e){
     console.log(e.key, e.keyCode) // key为按键， keycode为按键码
     // alert('enter key down')
   }
 }
 })
</script>
</html>

声明：Hello World|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - Vue.js 笔记 (一)

我的朋友，理论是灰色的，而生活之树是常青的！