Web前端最全【vue核心技术实战精讲】1，复习指南

2401_84411433

于 2024-05-08 23:12:50 发布

阅读量447

点赞数 25

分类专栏：程序员文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/2401_84411433/article/details/138589624

版权

程序员专栏收录该内容

217 篇文章 2 订阅

订阅专栏

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

html5

前言

上节,我们学习了

Vue指令之v-on事件处理、事件修饰符、v-for列表渲染点击进入上一节

本节内容

Vue指令之v-model双向数据绑定

1、`v-model`

预期：随表单控件类型不同而不同
限制：
- <input>
- <select>
- <textarea>
- components
修饰符：
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
用法：

在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

参考：
- 表单控件绑定
- 组件 - 在输入组件上使用自定义事件

2、`总结`

v-model 双向的数据绑定

双向数据流（绑定）

页⾯面改变影响内存(js)
内存(js)改变影响⻚页⾯面

v-bind 和 v-model 的区别?

input v-model=“name”
- 双向数据绑定⻚页⾯面对于input的value改变，能影响内存中name变量量
- 内存js改变name的值，会影响⻚页⾯面重新渲染最新值
input :value=“name”
- 单向数据绑定内存改变影响⻚页⾯面改变
v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

3-1、`实战` `<input>`

A、 `输入框 type="text"`

示例

<body>
    <div id='app'>
        <p>{{msg}}</p>
        <input type="text" v-model='msg'>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
            }
        })
    </script>
</body>

效果

B、 `单选按钮 type="radio"`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>单选按钮</label>
            <br>
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

C、 `复选框 type="checkbox" - 单个复选框，绑定布尔值`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>单个复选框，绑定到布尔值：</label>
            <br>
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>
        </div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

D、 `复选框 type="checkbox" - 多个复选框，绑定到数组`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>多个复选框，绑定到同一个数组</label>
            <br>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({


### HTTP

* HTTP 报文结构是怎样的？

* HTTP有哪些请求方法？

* GET 和 POST 有什么区别？

* 如何理解 URI？

* 如何理解 HTTP 状态码？

* 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

* 对 Accept 系列字段了解多少？

* 对于定长和不定长的数据，HTTP 是怎么传输的？

* HTTP 如何处理大文件的传输？

* HTTP 中如何处理表单数据的提交？

* HTTP1.1 如何解决 HTTP 的队头阻塞问题？

* 对 Cookie 了解多少？

* 如何理解 HTTP 代理？

* 如何理解 HTTP 缓存及缓存代理？

* 为什么产生代理缓存？

* 源服务器的缓存控制

* 客户端的缓存控制

* 什么是跨域？浏览器如何拦截响应？如何解决？  

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)