vue基础知识笔记

初始vue

  1. 想让vue工作必须创建vue实例，且要传入一个配置对象

  2. root容器里的代码依然符合html规范，只不过混入了一些vue 的特殊语法

  3. root容器里的代码被称为vue模板

  4. <!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>初始vue</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <div class="root">
        <h1>hello , {{name}}</h1>
    </div>
</body>
<script>
    Vue.config.productionTip = false; //阻止生产提示   由于加载顺序问题在这里设置失效了
    const x = new Vue({
        el: ".root", //用于指定vue为哪个容器服务
        data() {
            return {
                name: '嘿嘿嘿',
            };
        },
    })
</script>

</html>

  5. 容器与vue实例之间关系为一对一

  6. {{xxx}} 中的xxx为js表达式且xx可以自动读取data里的数据

  7. data数据发生改变，页面数据也会改变

  8. 注意区分：js表达式和js代码的区别

    1. js表达式会产生一个值
    2. js代码是语句

vue模板语法

  1. 插值语法：

    1. 功能： 用于解析标签体内容
    2. 写法: {{xxx}}xxx是js表达式 ，可以读取data里的所有数据

  2. 指令语法

    1. 功能： 用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
    2. 写法： v-bind:href="xxx"或:href="xxx" xxx同样是js表达式
    3. 备注 :v-bind 只是vue的一个指令
  3. <!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>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div class="root">
        <h1>插值语法</h1>
        <h3>你好{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <!-- <a v-bind:href="url">点我去百度</a> -->
        <a :href="url">点我去百度</a>
        <a :href="url.toUpperCase()">点我去百度</a>
    </div>
</body>

<script>
    new Vue({
        el: ".root",
        data() {
            return {
                name: "jack",
                url: "https://baidu.com"
            };
        },
    })
</script>

</html>

数据绑定

  1. 单向数据绑定(v-bind) ：数据只能从data读取不能修改data里的内容
  2. 双向数据绑定(v-model)：数据既可以从data中读取也可以修改data里的内容
    1. 注意
      1. 双向绑定只能应用于表单元素上
      2. v-model:value可以简写为v-model因为v-model本来就是获取的value值

el与data的两种方式

<!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>
    <script src="../js//vue.js"></script>
</head>

<body>
    <div class="root">
        <h1>你好{{name}}</h1>
    </div>
</body>
<script>
    /*
    el的两种写法
    const vue = new Vue({
        // el: ".root",
        data() {
            return {
                name: 'jack',
            };
        },
    })
    vue.$mount(".root")
    */

    new Vue({
        el: ".root",
        // data() {
        //     console.log(this); //此处this是vue实例对象
        //     return {
        //         name: 'value',
        //     };
        // },
        data: {
            name: "vale"
        }
    })
</script>

</html>

mvvm模型

vue数据代理

  1. 通过vm对象代理data中的属性
  2. 好处：更加方便的获取data中的数据
  3. 基本原理
    1. 通过Object.defineProperty()把data对象中的所有属性添加到vm上。
    2. 为每一个添加到vm上的属性都指定一个get和set
    3. 在get和set内部去操作data中对应的属性

事件处理

  1. 事件的基本使用：
    1. 使用v-on 或 @xxx 绑定事件 其中 xxx是时间名
    2. 事件的回调需要配置在mehtods中，最终会出现在vm上
    3. methods中配置的函数，不要使用箭头 函数否则this会指向window
    4. methods 中配置的函数都是被vue管理的 函数 this只想的是vm或组件实例对象
    5. @click=demo 和@click=($event)效果一直，只不过后面可以传参
  2. 事件修饰符
    1. prevent 阻止默认事件
    2. stop 阻止冒泡
    3. once 事件只触发一次
    4. capture 使用事件的捕获模式
    5. self 只有event.target是当前操作元素时才会触发
    6. passive 事件的默认行为立即执行，无需等待事件回调执行完毕
  3. 键盘事件
    1. vue中常用按键别名
      1. 回车=> enter
      2. 删除=>delete
      3. 退出=>esc
      4. 空格=>space
      5. 换行=>tab
      6. 上=>up
      7. 下=>down
      8. 左=>left
      9. 右=>right
    2. vue中未提供别名的键可以使用原始键名绑定注意单词之间永短横线命名
    3. 系统修饰键
      1. 配合keyup使用：按下修饰键的同时再按下其他键，随后释放其他键，事件才会被触发
      2. 配合keydown使用：正常出发事件
    4. keycode指定具体按键
    5. vue.config.keycodes.自定义的按键名=键码 定制案件别名
posted @   01cui  阅读(8)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae