1、模板语法

1、插值法 {{}} => 作用于标签体

2、指令语法 v-bind、v-if、v-model…. => 作用于标签属性

Vue模板语法有两大类：

1、差值语法

2、指令语法

image-20230824153840665

image-20230824155500399

2、el和data的两种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <p>初始化vue的两种写法：{{msg}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
    /*Vue第一种写法*/
    new Vue({
        el:"#app",
        data:{
            msg : "Hello World"
        }
    })
    /*Vue第二种写法*/
    const v = new Vue({
        data:{
            msg: "Hello World"
        }
    })
    v.$mount("#app");
  
  
   /*data第一种写法*/
    new Vue({
        el:"#app",
        data:{
            msg : "Hello World"
        }
    })
    /*data第二种写法*/
    const v = new Vue({
       data(){
           return {
               msg:"Hello World"
           }
       }
    })
    v.$mount("#app");
</script>
</body>
</html>

3、MVVM模型

1、M：模型（Model） ：对应data中的数据

2、V：视图（View）：模板

3、VM：视图模型（ViewModel）：Vue实例模型

image-20230824163344109

4、Object.defineProperty

<script>
    let person = {name:"张赞",address:"南京"}
    Object.defineProperty(person,'age',{
        value:28
    })
    console.log(person)
</script>
/*以上方式的age不能参与遍历    Object.defineProperty */


<script>
 		let person = {name:"张赞",address:"南京"}
    /*如果想使用age进行办理操作，可以使用 Object.defineProperty 的参数 enumerable属性*/
    Object.defineProperty(person,'age',{
        value:28,
        enumerable:true, //控制属性是否可以枚举，默认值是false
        writable:true, //控制属性是否可以进行修改，默认值是false
        configurable:true //控制属性是否可以进行删除，默认值是false
    })
    for (let personKey in person) {
        console.log("###",person[personKey])
    }
    console.log(person)
</script>


<script>
    let number = 18;
    let person = {
        name:"zhang",
        address:"nanjing"
    }
    Object.defineProperty(person,"age",{
      	//当有人读取persion的age属性时，get函数（getter）就会被调用，且返回值就是age的属性
        get() {
            console.log("have person get this value：",number)
            return number;
        },
      	//当有人设置persion的age属性时，set函数（setter）就会被调用，且会收到修改的具体的值
        set(v) {
            console.log("have person set this value：",v)
            number = v
        }
    })
</script>

5、数据代理

1、vue中的数据代理：

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

2、vue中数据代理的好处:

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

3、基本原理：

​ 通过Object.defineProperty()把data对象中所有属性添加到vm上，

​ 为每一个添加到vm上的 属性，都执行一个getter/setter.

​ 在getter/setter内部去操作(读/写)data中对应的属性

<script>
let obj = {name:"aaa",age:18}
let obj2 = {name:"bbb",address:"nanjing"}

Object.defineProperty(obj2,'age',{
  get(){
    return obj.age
  },
  set(v) {
    obj.age = v
  }
})
</script>

6、事件处理

事件的基本使用：

  • 使用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</title>
</head>
<body>
<div id="app">
    <button v-on:click="showInfo">点击我进行操作-v-on</button>
    <br>
    <button @click="showInfo">点击我进行操作-@（无参）</button>
    <br>
    <button @click="showInfo1(123)">点击我进行操作-@（有参）</button>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            showInfo() {
                alert("Hello World")
            },
            showInfo1(num) {
                alert(num)
            }
        }
    })
</script>
</body>
</html>

7、事件修饰符

Vue中的事件修饰符：

  • prevent：阻止默认事件（常用）
  • stop：阻止事件冒泡（常用）
  • once：事件只触发一次（常用）
  • capture：使用事件的捕获模式
  • self：是有event.target是当前操作的元素时才触发事件
  • passive：事件的默认行为立即执行，无需等待时间回调执行完毕

8、键盘事件

1、Vue中常用的案件别名
  • 回车 => enter
  • 删除 => delete（捕获删除和退格）
  • 退出 => esc
  • 空格 => space
  • 换行 => tab特殊，必须配合keydown使用
  • 上 => up
  • 下 => down
  • 左 => left
  • 右 = > right
2、Vue未提供别名的按键

可以使用按键原始额key值去绑定，单注意要转为kebab-case（短横线命名）

3、系统修饰符（用法特殊）

crtl、alt、shift、meta

  • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
  • 配合keydown使用：正常触发事件
4、使用keyCode去指定具体的按键（不推荐）
5、定制按键别名
  • Vue.config.keyCodes.自定义键名 = 键码

9、计算属性

  • 定义：要用的属性不存在，要通过已有属性计算得来
  • 原理：底层借助了Object.defineProperty 方法提供的getter和setter
  • get函数什么时候执行：
    • 当初次读取时会执行一次
    • 当依赖的数据发生改变时被再次调用
  • 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
  • 备注：
    • 计算属性最终会出在vm上，直接读取使用即可
    • 如果计算属性要被修改，必须写set函数去相响应修改，且set中要引起计算时依赖的数据发生改变。

10、监视属性

绑定事件的时候：@xxx=“yyy” yyy可以写一些简单的语句

>  <button @click="info = !info">切换天气 </button>
> ```

```html
<div id="app">
    <h2>今天天气很{{info}}</h2>
    <button @click="change">切换天气 </button>
    <!--<button @click="info = !info">切换天气 </button>   效果同上-->
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            isHot:true
        },
        //计算属性
        computed:{
            info(){
                return this.isHot ? "炎热" : "凉爽"
            }
        },
        // 方法
        methods: {
            change(){
                this.isHot = !this.isHot
            }
        },
    })
</script>
文档更新时间: 2023-12-18 03:25   作者：JeffreyCheung