Vue基础

已于 2022-04-23 14:26:06 修改
阅读量1.2k 收藏
点赞数
文章标签： 前端 vue
于 2022-04-22 23:37:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60771648/article/details/124282422
版权

目录

一、初识Vue

二、Vue模板语法

三、数据绑定

四、el与data的两种写法

五、Vue中的MVVM

五、数据代理

1. 回顾Object.defineproperty方法

2.何为数据代理

3.Vue中的数据代理

六、事件处理

1.事件处理的基本使用

2.事件修饰符 

 

一、初识Vue

初识Vue:

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

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

        3. root容器里的代码被称为【Vue模板】；

        4. Vue实例和容器一一对应的：

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

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

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

        注意区分： js表达式 和 js代码(语句)

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

                (1). a

                (2). a+b

                (3). demo(1)

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

            2. js代码(语句)

                (1). if() {}

                (2). for() {} 

<body>
    <!-- 
        初识Vue:
        1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
        2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
        3. root容器里的代码被称为【Vue模板】；
        4. Vue实例和容器一一对应的：
        5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用：
        6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
        7. 一旦data中的数据发送改变，那么页面中用到该数据的地方也会自动更新；

        注意区分： js表达式 和 js代码(语句)
            1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                (1). a
                (2). a+b 
                (3). demo(1)
                (4). x === y ? 'a' : 'b'

            2. js代码(语句)
                (1). if() {}
                (2). for() {}
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示
        
        // 创建Vue实例
        new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: { // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name: '尚硅谷',

            }
        }) 
    </script>
</body>
</html></html>

二、Vue模板语法

 Vue模板语法有2大类：

          1.插值语法：

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

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

          2.指令语法：

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

              举例：v-bind:href="xxx" 或 简写为 :href="xxx", xxx同样要写js表达式

                    且可以直接读取到data中的所有属性。

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

​
<body>
    <!-- 
        Vue模板语法有2大类：
          1.插值语法：
              功能：用于解析标签体内容。
              写法：{{xxx}}，xxx是js表达式，且可以直接读取data中的所有属性。
          2.指令语法：
              功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
              举例：v-bind:href="xxx" 或 简写为 :href="xxx", xxx同样要写js表达式
                    且可以直接读取到data中的所有属性。
              备注：Vue中有很多的指令，且形式都是：v-????,此处我们只是拿v-bind举个例子。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>

        <h1>指令语法</h1>
        <a :href="url">点我去尚硅谷学习1</a>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                name: 'jack',
                url:'http://www.atguigu.com'
            }
        })
    </script>
</body>
</html></html>

​

三、数据绑定

Vue中有2种数据绑定的方式：

            1.单向绑定(v-bind)：数据只能从data流向页面。

            2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

              备注：

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

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

​
<body>
    <!-- 
        Vue中有2种数据绑定的方式：
            1.单向绑定(v-bind)：数据只能从data流向页面。
            2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
              备注：
                  1.双向绑定一般应用在表单类元素上（如：input、select等）
                  2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
     -->

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

        <!-- 简写 -->
        单向数据绑定: <input type="text" :value="name"></br>
        双向数据绑定: <input type="text" v-model="name"></br>

        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <h2 v-model:x="name">你好啊</h2>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        new Vue({
            el:"#root",
            data: {
                name:'尚硅谷'
            }
        })
    </script>
</body>
</html></html>

​

四、el与data的两种写法

data与el的两种写法

            1.el有2种写法

                    (1).new Vue时候配置el属性。

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

            2.data有2种写法

                    (1).对象式

                    (2).函数式

                    如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

            3.一个重要的原则：

                    由Vue管理的函数，一定不用写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

​
<body>
    <!--
        data与el的两种写法
            1.el有2种写法
                    (1).new Vue时候配置el属性。
                    (2). 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
            2.data有2种写法
                    (1).对象式
                    (2).函数式
                    如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
            3.一个重要的原则：
                    由Vue管理的函数，一定不用写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; //阻止 vue 在启动时生成生产提示。

        // el的两种写法
         const v = new Vue({
             // el:"#root", //第一种写法
             data: {
                 name:'尚硅谷'
             }
         })
         console.log(v);
         v.$mount('#root') //第二种写法

        // setTimeout(() => {
        //     v.$mount('#root')
        // },1000)

        // data的两种写法
        new Vue({
            el:"#root",
            //data第一种写法：对象式
            data: {
                name:'尚硅谷'
            } 

            //data第二种写法：函数式
            data(){
                console.log('@@@',this); // 此处的this是Vue实例对象
                return{
                    name:'尚硅谷'
                }
            }
        })
    </script>
</body>
</html></html>

​

五、Vue中的MVVM

 MVVM模型

            1. M：模型(model)：data中的数据

            2. V: 视图(View)：模板代码

            3. VM: 视图模型(ViewModel)：Vue实例

        观察发现：

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

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

<body>
    <!-- 
       MVVM模型
            1. M：模型(model)：data中的数据
            2. V: 视图(View)：模板代码
            3. VM: 视图模型(ViewModel)：Vue实例
        观察发现：
            1.data中所有的属性，最后都出现在了vm身上。
            2.vm身上所有的属性 及 Vue原型上所有的属性，在Vue模板中都可以直接使用。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <h1>学校名称：{{name}}</h1>
       <h1>学校地址：{{address}}</h1>
       <h1>测试一下1：{{1+1}}</h1>
       <h1>测试一下2：{{$options}}</h1>
       <h1>测试一下3：{{$emit}}</h1>
       <h1>测试一下3：{{_c}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        new Vue({
            el:"#root",
            data: {
                name:'尚硅谷',
                address:'北京'
            }
        })
    </script>
</body>
</html></html>

五、数据代理

1. 回顾Object.defineproperty方法

<body>
    <script type="text/javascript">
        let number = 18
        let person = {
            name:'张三',
            sex: '男',
            // age: 18
        }

        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true, //控制属性是否可以被删除，默认值是false
        
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                // return 'hello'
                console.log('有人读取age属性了');
                return number
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性，且值是',value);
                number = value
            }
        }) 

        // 遍历Object.keys 对象属性
        // console.log(Object.keys(person));

        console.log(person);
    </script>
    
</body>
</html><html>

2.何为数据代理

<body>
    <!-- 数据代理：通过一个对象代理另一个对象中属性的操作（读/写） -->
    <script type="text/javascript">
        let obj = {x:100}
        let obj2 = {y:200}

        Object.defineProperty(obj2,'x',{
            //有人通过obj2访问x的时候，返回的值是obj.x
            get(){
                return obj.x;
            },
            set(value){
                obj.x = value
            }
        })
    </script>
</body>
</html>

​

3.Vue中的数据代理

 

       1.Vue中的数据代理：

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

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

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

        3.基本原理：

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

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

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

 

 代码：

​
<body>
    <!-- 
        1.Vue中的数据代理：
             通过vm对象来代理data对象中属性的操作（读/写）
        2.Vue中数据代理的好处：
             更加方便的操作data中的数据
        3.基本原理：
             通过Object.defineProperty()把data对象中所有属性添加到vm上。
             为每一个添加到vm上的属性，都指定一个getter/setter。
             在getter/setter内部去操作（读/写）data中对应的属性
       
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>学校名称：{{name}}</h2>
       <h2>学校地址：{{address}}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        let data = {
            name:'尚硅谷',
            address:'宏福科技园'
        }
        const vm = new Vue({
            el:"#root",
            data: {
                name:'尚硅谷',
                address:'宏福科技园'
            }
        })
    </script>
</body>
</html>

​

六、事件处理

1.事件处理的基本使用

事件的基本使用：

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

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

            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

            5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

​
<body>
    <!-- 
       事件的基本使用：
            1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
            2.事件的回调需要配置在methods对象中，最终会在vm上；
            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
            5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>欢迎来到{{name}}学习</h2>
       <BUtton v-on:click="showInfo">点我提示信息</BUtton>
       <BUtton @click="showInfo1">点我提示信1（不传参）</BUtton>
       <BUtton @click="showInfo2(66,$event)">点我提示信2(传参)</BUtton>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:"#root",
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(event){
                    //event.target拿到发生事件的事件目标
                    // console.log(event.target.innerText);

                    // console.log(this); //此处的this是vm

                    alert('同学你好')
                },
                showInfo1(event){
                    //event.target拿到发生事件的事件目标
                    // console.log(event.target.innerText);

                    // console.log(this); //此处的this是vm

                    alert('同学你好！')
                },
                showInfo2(number,a){
                    console.log(number,a);
                    //event.target拿到发生事件的事件目标
                    // console.log(event.target.innerText);

                    // console.log(this); //此处的this是vm

                    alert('同学你好！！')
                },
            }
        })
    </script>
</body>
</html></html>

​

2.事件修饰符 

 Vue中的事件修饰符：

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

            2.stop：阻止事件冒泡（常用）；

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

            4.capture：使用事件的捕获模式；

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

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

修饰符可以连续写 

<body>
    <!-- 
       Vue中的事件修饰符：
            1.prevent：阻止默认事件（常用）；
            2.stop：阻止事件冒泡（常用）；
            3.once：事件只触发一次（常用）；
            4.capture：使用事件的捕获模式；
            5.self：只有event.target是当前操作的元素时才出发事件；
            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>欢迎来到{{name}}学习</h2>
       <!-- 阻止默认事件（常用） -->
       <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
       <!-- 阻止事件冒泡（常用） -->
       <div @click="showInfo" class="demo1">
           <button @click.stop="showInfo">点我提示信息</button>
           <!-- stop.prevent 先停止冒泡再处理默认事件 -->
           <a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我提示信息</a>
       </div>
        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>
        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素时才出发事件； -->
        <div @click="showInfo">
            <button @click.self="showInfo">点我提示信息</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
        <!-- scroll 为滚动事件 -->
        <ul class="list" @wheel.passive="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        new Vue({
            el:"#root",
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    // preventDefault 阻止默认行为
                    // e.preventDefault();

                    // stopPropagation 阻止冒泡行为
                    // e.stopPropagation()
                    // alert('同学你好！')

                    // console.log(e.target);
                },
                showMsg(msg){
                    console.log(msg);
                },
                demo(){
                    // console.log('@');
                    for (let i = 0; i < 10000; i++) {
                        console.log('#');
                    }
                    console.log('累坏了');
                }
            }
        })
    </script>
</body>
</html></html>

 

 3.键盘事件

1.Vue中常用的按键别名:

            回车 => enter

            删除 => delete (捕获"删除"和"退格"键)

            退出 => esc

            空格 => space

            换行 => tab (特殊, 必须配合keydown去使用)

            上 => up

            下 => down

            左 => left

            右 => right

        2.Vue未提供别名的按键,可以使用案件原始的key值去绑定,但注意要转为kebab-case(短横线命名)

        3.系统修饰键 (用法特殊):ctrl、alt、shift、meta

            (1).配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发.

            (2).配合keydowm使用: 正常触发事件.

       

        4.也可以使用keyCode去指定具体的按键 (不推荐)

        5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

 

<body>
    <!-- 
       1.Vue中常用的按键别名:
            回车 => enter
            删除 => delete (捕获"删除"和"退格"键)
            退出 => esc
            空格 => space
            换行 => tab (特殊, 必须配合keydown去使用)
            上 => up
            下 => down
            左 => left
            右 => right

        2.Vue未提供别名的按键,可以使用案件原始的key值去绑定,但注意要转为kebab-case(短横线命名)

        3.系统修饰键 (用法特殊):ctrl、alt、shift、meta
            (1).配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发.
            (2).配合keydowm使用: 正常触发事件.
        
        4.也可以使用keyCode去指定具体的按键 (不推荐)

        5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>欢迎来到{{name}}学习</h2>
       <!-- 键盘事件常用的 keyup,keydown -->
       <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
       <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        Vue.config.keyCodes.huiche = 13 // 定义了一个别名按键
        new Vue({
            el:"#root",
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    // if (e.keyCoed !== 13) return // 相当于无值返回
                    // console.log(e.target.value);

                    // 2.
                    console.log(e.key,e.keyCode);
                }
            }
        })
    </script>
</body>
</html></html>

 

Tawnyi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue基础知识点部分
asa134124的博客
10-31 166
目录 模板语法 数据绑定 el与data的两种写法 MVVM模型 数据代理： 事件处理 事件修饰符 键盘事件 模板语法 new Vue({ el:'#root', data:{ name:'蛰伏', school:{ name:'Java', ...
Vue el和data的两种写法（5）
weixin_44206148的博客
11-26 307
el的另一种写法： 一般我们写el是这种形式： new Vue({ el: '#root', data: { name: 'Pickachu' } }) 这种写法叫对象式，这就要求我们在new Vue的时候就确定了我们要绑定哪个容器。 上述写法也可以改成： const v = new Vue({ // el: '#roo
v-bind指令，v-model指令，el与data的两种写法
qq_62971599的博客
09-18 3342
v-bind指令，v-model指令，el与data的两种写法
vue基础知识（一）
qq_52981021的博客
08-19 208
vue语法、数据绑定、事件处理、计算、监听属性
_el和data的两种写法
COGOCG的博客
03-02 209
el的两种写法 第一种：el：'#root', 第二种：$mount Vue 的 mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手 动挂载上。new Vue时，el和$mount并没有本质上的不同。 以后学习组件的时候，data必须使用函数式，否则会报错。 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了 this就...
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
基于vue基础实现的记事本
09-24
本文将详细解析如何基于Vue基础实现一个记事本应用，重点涉及用户数据的增删操作。 首先，我们要理解Vue的核心概念：数据绑定。Vue采用的是双向数据绑定，这意味着视图层与数据模型之间可以相互影响。在创建Vue实例...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue属性、$props、$options、$el、$root
weixin_45727786的博客
05-21 1491
Vue属性 1.$props: 2.$options 获取的是vue实例中的选项，包含自定义选项 3.$el:访问vue实例的根dom元素 4.$root获取根vue实例 ​ 1.​ $props:父组件传给子组件 ​ 4.$root获取根vue实例         root 和parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过roo
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 498
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
Haproxy搭建Web群集
wkysdhr的博客
07-08 886
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Webkit简介以及工作流程
最新发布
读心悦
07-10 210
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
JS混淆基本类型和原理
朴拙科技的博客
07-06 716
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 286
【代码】​​ 翻页 上一页/下一页。
音乐播放器
m0_73755059的博客
07-05 747
【代码】音乐播放器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值