Vue基础学习笔记（一）

别活在过去i

已于 2023-11-20 17:04:23 修改

阅读量43

点赞数

分类专栏： Vue2基础文章标签： vue.js 学习笔记

于 2023-11-20 16:27:05 首次发布

本文链接：https://blog.csdn.net/L170311/article/details/134511944

版权

Vue2基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

6.object.defineProperty

1.初识VUE，hello world

初识vue

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

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

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

        4.vue实例和容器是一一对应关系。

        5.真实开发中只有一个vue实例，并且会配合组件一起使用

        6.{{xxx}}中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性

        7.一旦data中数据发生变化，那么页面中会用到该数据的地方也会自动更新

注意区分：JS表达式bJS代码（语句）

        1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

        （1）a

(2)a+b

(3)demo(1)

(4)x===y?'a':'b'

2.Js代码

         （1）if(){}

(2)for(){}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="vue.js"></script>
</head>
<body>
   <div id="root">
    <h1> hello :{{name}} 年龄:{{age}}地址:{{address}}</h1>
   </div>
   <script type="text/javascript">
    const x = new Vue({
        el:'#root',  //el用于指定当前VUE实例为哪个容器服务，值通常为css选择器字符串
        data:{       //data中用于存储数据，数据拱el所指定的容器去使用，值暂时先写成一个对象
            name:'鑫鑫',
            age:23,
            address:"杭州"
        }
    })
   </script>
</body>

2.模板语法

Vue模板有2大类

        1.插值语法：

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

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

        2.指令语法

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

                例子：v-bind:href="xxx"或简写为：href="xxx",xxx同时要写JS表达式且可以直接读取到data中的所有属性

        备注：vue中有很多的指令，且形式都是v-???,此处我们只是拿v-bind举例子

<body>
    <div id="root">
        <h1>插值语法:</h1>
      <h1>hello :{{name}} 年龄:{{age}}地址:{{address}}</h1></br>
      <h1>指令语法:</h1>
      <a v-bind:href="xiaomi.url.toUpperCase()">点我去{{xiaomi.name}}官网</a>
      <a :href="xiaomi.url" :x="xiaomi.x">点我去{{xiaomi.name}}官网</a>
    </div>
    <!--创建vue实例-->
    <script type="text/javascript">
      const x = new Vue({
        el: "#root", //el用于指定当前VUE实例为哪个容器服务，值通常为css选择器字符串
        data: {
          //data中用于存储数据，数据拱el所指定的容器去使用，值暂时先写成一个对象
          name: "鑫鑫",
          age: 23,
          address: "杭州",
                //二级对象
                xiaomi:{
                    name:'小米',
                    url:"http://xiaomi.com",
                    x:"我是二级对象中的x"
                }
        },
      });
    </script>
</body>

3.数据绑定

vue中有两种数据绑定的方式

        1.单项数据绑定（v-bind）:数据只能从data流向页面

        2.双向数据绑定（v-modle）:数据不仅能从data流向页面，还可以从页面流向data

备注：

        1.双向绑定一般应用在表单类元素上（如input,select等）

        2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值

<body>
    <!--创建一个容器-->
    <div id="root">
       <!--普通写法-->
       单项数据绑定:<input type="text" v-bind:value="name"><br>
       双向数据绑定:<input type="text" v-model:value="name"><br>
       <!--简写写法-->
       单项数据绑定:<input type="text" :value="name"><br>
       双向数据绑定:<input type="text" model="name"><br>

       <!--错误示范-->
       <h2 v-model="name">v-model只能应用在表单类元素（输入类元素）上</h2>
    </div>
    <!--创建vue实例-->
    <script type="text/javascript">
      const x = new Vue({
        el: "#root", //el用于指定当前VUE实例为哪个容器服务，值通常为css选择器字符串
        data: {
          //data中用于存储数据，数据拱el所指定的容器去使用，值暂时先写成一个对象
          name: "鑫鑫",
          age: 23,
          address: "杭州",
                //二级对象
                xiaomi:{
                    name:'小米',
                    url:"http://xiaomi.com",
                    x:"我是二级对象中的x"
                }
        },
      });
    </script>
  </body>

4.el与data的两种写法

data与el的两种写法

        1.el有两种写法

                （1）new Vue时放置el属性

                （2）先创建Vue实例，随后再通过vm.$mount('XXX')来指定el的值

        2.data有两种写法

                （1）对象式

                （2）函数式

                  学习到组件时，data必须使用函数式

        3.一个重要原则：

        由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是vue实例了

<body>
    <!--创建一个容器-->
    <div id="root">
      <h2>你好，{{name}}</h2>
    </div>
    <div id="roots">
        <h2>你好，{{code}}</h2>
    </div>
    <!--创建vue实例-->
    <script type="text/javascript">
        //第一种data和el写法
        const x=new Vue({
            el:'#root',
            data:{
                name:'VUE！'
            }
        })
        //第二种写法
        const a=new Vue({
            data(){
                return{
                    code : "前端框架",
                }
            }
        })
        a.$mount("#roots");
    </script>
  </body>

5.MVVM模型

.MVVM模型

        1.M：模型（model）：data中的数据

        2.V：视图（vew）：模板代码

        3.VM：视图模型（viewModel）：vue实例对象

观察发现：

        1.data中所有的属性，最后都出现在了vm身上

        2.vm身上的所有的属性及vue原型上的所有属性，在vue模板都可以直接使用

6.object.defineProperty

相对于Java中的get,set函数

 <body>
    <script type="text/javascript">
      let number = 18;
      let person = {
        name: "张三",
        sex: "男",
      };
      Object.defineProperty(person, "age", {
        // enumerable：true 控制属性是否可以枚举，默认值是false
        // writeable：true  控制属性是否可以被修改，默认值是false
        // configurable：true 控制属性是否可以被删除，默认值是false

        // 当有人读取person的age属性时，getter函数就会被调用，且返回值就是age的值
        get() {
          console.log("有人读取age属性");
          return number;
        },
        // 当有人修改person的age属性时，setter函数就会被调用，且会收到修改的值
        set(value) {
          console.log("有人修改了age属性,改为", value);
          number = value;
        },
      });

7.数据代理

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

<body>
    <script type="text/javascript">
      let obj = { x: 100 };
      let objs = { y: 200 };
      Object.defineProperty(objs, "x", {
        get() {
          console.log("访问到了obj的x");
          return obj.x;
        },
        set(value) {
          console.log("修改了obj的x");
          obj.x = value;
        },
      });
    </script>
  </body>

8.Vue中的数据代理

1.Vue中的数据代理:

        通过vm对象来代理data对象中属性的操作

2.vue中数据代理的好处

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

3.基本原理

        通过object.defineProperty()把data对象中所有属性添加到vm

        为每一个添加到vm上的属性，都指定一个getter/setter

        在getter/setter内部去操作（读/写）data中对应的属性

9.事件处理

.

事件的基本使用

1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名

2.事件的回调需要配置在method对象中，最终会在vm上

3.methods中配置的函数，不要有箭头函数，否则this就不是vm了
    // 普通函数
    let sum = function(a, b) {
        return a + b;
    }
    // 箭头函数
    let sum1 = (a, b) => {
        return a + b;
    }
4.methods中配置的函数，都是被vue所管理的函数，this的指向是vue或组件实例对象

5.@click="demo"和@click="click($event,xxx)"效果一样但是后者可以传参和使用event对象

<body>
    <div id="root">
      <h1>前端框架——{{msg}}</h1>
      <button @click="showinfo">点我提示信息(不传参)</button>
      <button @click="shows($event,'非常')">点我也可以提升(传参)</button>
    </div>
    <!--创建vue实例 -->
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "VUE",
        },
        //函数抒写地方:
        methods: {
          showinfo() {
            alert("方便快捷");
          },
          shows($event,value) {
            alert(value + "好用");
          },
        },
      });
    </script>
  </body>

10.事件修饰符

Vue中的事件修饰符（属性）：

        1.prevent:阻止默认事件（常用）

        2.stop:终止事件冒泡（常用）

        3.once：事件只触发一次（常用）

        4.capture：使用事件的捕获阶段

        5.self：只有event.target是当前操作的元素时才触发事件

        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

下一篇：Vue基础学习笔记（二）-CSDN博客

持续更新中..............

别活在过去i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础学习笔记（一）

例子：v-bind:href="xxx"或简写为：href="xxx",xxx同时要写JS表达式且可以直接读取到data中的所有属性。6.{{xxx}}中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性。由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是vue实例了。4.methods中配置的函数，都是被vue所管理的函数，this的指向是vue或组件实例对象。2.vm身上的所有的属性及vue原型上的所有属性，在vue模板都可以直接使用。
复制链接

扫一扫

专栏目录