day2、vue

1.初识vue

1.1初步使用模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <!--    导入vue的包-->
​
    <script src="../js/vue.js"></script>
​
</head>
<body>
        <!--
        初识Vue：
                1.想让Vue工作，就必须创建一个vue实例，且要传入一个配置对象；
                2.root容器里面的代码依然符合html规范，只不过汇入了一些vue的特殊语法
                3.root里面的代码被称为【Vue模板】
        -->
​
        <!--准备好一个容器-->
        <div id="root">
            <!--        插值语法，使用两个花括号，这样就能读取到data里面的所有东西了-->
            <h1>姓名：{{name}}</h1>
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
        </div>
​
        <script type="text/javascript">
            Vue.config.productionTip = false;
​
            //只传一个参数，参数的类型是一个对象
            const vvm = new Vue({
                //element,元素写了一个id选择器
                //el:document.getElementById('root')
                el: '#root',//el用于指定vue实例为哪个容器服务，通常为css选择器字符串
                data: {
                    name: '饶鑫',
                    age: 18
                }
            });
        </script>
</body>
</html>

image-20220430150531977

1.2容器和实例对应关系

  • 当同时存在两个类（类名相同）的容器 一个vue实例

    • vue实例会解析第一个容器，另一个不会解析

  • 当同时存在两个类（类名相同）的容器 两个vue实例

    • 会报错

  • 所以总结，容器和实例必须要一一对应

1.3双括号内写什么

插值语法

  • 两个花括号中必须必须要写js的表达式

    • image-20220430150754747

  • 注意区分js表达式和表达式代码

  • 表达式

    • 一个表达式会生成一个值，可以存在任何需要值的地方

      • a

      • a+b

      • x===y?a:b

  • js代码

    • if（）{}

    • for（）{}

2.模板语法

2.1插值语法

  • 插值语法

    • 功能：用于解析标签体内容

    • 写法：{{xxx}}xxx是js表达式，且可以直接读取到data中的所有属性

2.2指令语法

  • 指令语法

    • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件）

    • 举例v-bind:herf="xxx"可以简写为 ：href = "xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性。

    • 备注：Vue中有很多的指令，且形式都是：v-？？？？，此处我们只是那v-bind举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <!--    导入vue的包-->
​
    <script src="../js/vue.js"></script>
​
</head>
<body>
​
<div id="root">
    <!--        插值语法，使用两个花括号，这样就能读取到data里面的所有东西了-->
    <h1>插值语法：{{name}}</h1>
    <h1>指令语法</h1>
    <!--    v-bind是绑定 他就会将双引号里面的东西当做js表达式去执行 相当于找url变量-->
    <!--    v-bind可以简写为 ： 冒号-->
    <a v-bind:href="url"  target="_blank" >点我去学习</a>
</div>
​
<script type="text/javascript">
    Vue.config.productionTip = false;
​
    new Vue({
        el: '#root',
        data: {
            name: '饶鑫',
            url:'https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7&spm_id_from=pageDriver'
        }
    });
</script>
</body>
</html>

 

image-20220430154451466

3.数据绑定

3.1单项数据绑定 v-bind

  • 单项绑定

    • 数据只能从data流向页面

image-20220430155544604

3.2双向数据绑定 v-model

  • 改页面上的东西，页面里面的东西，也可以改变

  • v-model只能应用在表单类元素上，就是用在输入类的语句上，value值

    • 数据不仅可以凶data流向页面，还可以从页面流向data。

    • 备注

    • 双向绑定一般用在表单类元素上（input select）

    • v-model：value可以简写为v-model，应为v-model默认的收集得劲就是value值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
​
<div id="root">
    单项数据绑定：
    <input type="text" v-bind:value="name">
    双向数据绑定：
    <input type="text" v-model:value="name">
    <input type="text" v-model="name">
</div>
​
​
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'raoxin'
        }
    })
</script>
</body>
</html>

4.el和data的两种写法

  • el的第二种写法

    • 一个是new vue的时候配置

    • 一个是先创建实例，通过x.$mount('#root');

    • <script>
          Vue.config.productionTip = false;
          const x = new Vue({
              // el:'root',
              data:{
              name:'raoxin'
              }
           });
          //也可以指定这个x实例的指向的容器
          x.$mount('#root');
      </script>

  • data的两种写法

    • 对象式

    • 函数式

      • 目前两种方法都可以，但是学到组件的时候，data必须用函数式，否则会报错

  • 重要原则

    • 由于vue函数管理，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
​
<div id="root">
   <h1>你好，{{name}}</h1>
​
</div>
​
​
<script>
    Vue.config.productionTip = false;
    //el的两种写法
    // const x = new Vue({
    //     // el:'root',
    //     data:{
    //     name:'raoxin'
    //     }
    //  });
    // //也可以指定这个x实例的指向的容器
    // x.$mount('#root');
​
    // data的两种写法
    // 如上就是对象式
    //函数式
    new Vue({
        el:'#root',
        // data:function(){
        //     console.log(this);
        //     //这里的this输出就是vue
        //     //但是如果这个function写成箭头函数，这个this就是window,对之后得学习会有影响
        //     //()=>{}
        //     return{
        //         name:'raoxin'
        //     }
        // }
     //   在对象里面写方法，一般删掉function，删掉：
        data(){
            console.log(this);
            //这里的this输出就是vue
            //但是如果这个function写成箭头函数，这个this就是window,对之后得学习会有影响
            //()=>{}
            return{
                name:'raoxin'
            }
        }
     })
​
</script>
</body>
</html>

5.mvvm模型

vue作者参考了这个模型

image-20220430172249738

image-20220430172750832

  • vm就是处理数据和页面之间的桥梁，当数据发生变化的时候，这个视图层也会发生相应的变化

  • 所以在项目中经常用vm来代表实例对象

  • 红色框就是vm

  • new vue出来的实例对象的所有模型都可以在vm中，就是红色框中直接使用

6.数据代理 object.defineProperty()

6.1该方法的简单使用以及理解

这不叫数据代理

  • <script>
        let number = 18;
        let person = {
            name:'raoxin',
            sex:'nan',
        }
        Object.defineProperty(person,'age',{
            value:20
        })
    </script>

  • 通过这个方法有三个基本的特点

    • 不可修改

    • 不可删除

    • 不可枚举

image-20220430180044352

  • 意思就是给person这对对象添加一个age他的value值是18

  • 但是这个值是不参与枚举的，意思就是，不参加遍历，也不可以通过person修改，不可以删除

  • 想要让他可以枚举

    • image-20220430180459234

  • 想让他可以修改

    • image-20220430180624960

  • 想让他可以删除image-20220430180740835

    • image-20220430180724781

 

  • 需求image-20220430190754763

  • 需要这个number变，person里面的number也变image-20220430190959558

image-20220430191142244

  • get函数就是getter

  • 我每一次查询age都会触发getter函数的调用，且值就是getter的返回值

6.2数据代理的定义

数据代理：通过一个对象代理对另一个对象中属性的操作

<script>
    // 通过obj1的值来修改obj2的值
    let obj1 = { x:100};
    let obj2 = { y:200};
    Object.defineProperty(obj2,'x',{
        //当有人读取obj2 x的值的时候，get就会被调用
        get(){
            return obj1.x;
        },
        //当有人修改obj2.x的时候，这个就会调用
        set(value){
            obj1.x = value;
        }
    })
</script>

image-20220430194516029

image-20220430201409124

6.3vue中数据代理的应用

  • 在vue中data就是代理的对象

  • 读取的时候和修改的时候

    • image-20220430195533501

  • 验证

    • image-20220430195746318

    • image-20220430195918240

    • image-20220430200002359

  • ！！！！

  • image-20220430200321688

  • image-20220430200406490

7.事件处理

7.1鼠标点击事件的基本处理

<body>
    <div id="root">
<!--        点击是会调用myfun的函数-->
        <button v-on:click="myfun">点我提示信息</button>
    </div>
​
    <script>
        Vue.config.productionTip = false;
        // 这个函数放在外面是没有用的
        // var myfun = function (){
        //     alert('nihao1');
        // }
        new Vue({
                el:'#root',
                data:{
            },
            methods:{
                //    也可以myfun（）{}
                myfun:function (){
                    alert('nihao1');
                }
            }
         })
    </script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
<!--        点击是会调用myfun的函数-->
        <button v-on:click="myfun">点我提示信息</button>
<!--        @是v-on的简写-->
        <button @click="myfun">点我提示信息</button>
    </div>

    <script>
        Vue.config.productionTip = false;
        // 这个函数放在外面是没有用的
        // var myfun = function (){
        //     alert('nihao1');
        // }
        const x = new Vue({
                el:'#root',
                data:{
            },
            methods:{
                //    也可以myfun（）{}
                myfun(event){
                    // alert(this ===x);//这里面的this就是x,就是vue实例，返回结果为true
                    alert('同学你好')
                }
            }
         })
    </script>
</body>
</html>

image-20220430204103551

image-20220430204121515

  • 传参就加showinfo（）加括号，不传就不加，但是想要传参数，但是本身的event又不丢失，可以用$event占位

image-20220430204631334

7.2事件修饰符

  • 防止点击弹窗后跳走，可以

    • image-20220430205339049

  • 在vue中可以image-20220430205404774

7.1.1 vue中有哪些事件修饰符

 

  • image-20220430205432366

7.1.2先阻止冒泡再阻止跳转

修饰符可以连续写

image-20220502194403545

7.3键盘事件

7.3.1keydown（鼠标按下）

7.3.2keyup（鼠标按下并弹出）

  • 首先每个按键都有自己的按键编码，也有自己的名称（不是所有的按键都可以绑定事件）

  • 比如回车键是16，名称是Enter，在vue中绑定事件的时候用原来的名称也是可以的，但是vue为了我们更加的方便，将其都改为小写，如下面的图中的1

  • 如何去拿按键的原来的名称和编码呢

    • 如下可以使用console.log(e.keycode)和console.log(e.key)

    • 结果如下

    • image-20220502193540769

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script src="../js/vue.js"></script>
      </head>
      <body>
          <div id="root">
      <!--        按下enter，以后调用conSole函数-->
            <input type="text" placeholder="按下提交" @keyup="conSole">
          </div>

          <script>
              Vue.config.productionTip = false;
              new Vue({
                  el:'#root',
                  methods:{
                    //  获取值，即获取框中的值
                    conSole(e){
                      // console.log(e.target.value);
                      console.log(e.key);
                      console.log(e.keyCode);
                    }
                  }
               })
          </script>
      </body>
      </html>

  • vue给常用的按键都起了别名

  • image-20220502191900308

  •  

  • <body>
        <div id="root">
    <!--        按下enter以后调用conSole函数-->
          <input type="text" placeholder="按下提交" @keyup.enter="conSole">
        </div>

        <script>
            Vue.config.productionTip = false;
            new Vue({
                el:'#root',
                methods:{
                  //  获取值，即获取框中的值
                  conSole(e){
                    console.log(e.target.value);
                  }
                }
             })
        </script>
    </body>

7.3.3特殊情况（alt＋y）

  • 比如绑定的是tab键，当我按下tab的时候，光标就已经切走了，还没有等我按键抬起来，就触发不了了，所以要配合keydown使用

  • 也可以配合其他键使用比如alt＋y

  • ctrl+y

  • image-20220502194520713

7.3.4自己定义别名

image-20220502194232886

 

 

posted @ 2022-05-02 21:52  newlive122  阅读(82)  评论(0)    收藏  举报