结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
文章目录
前言
上节,我们学习了
- Vue指令之
v-on
事件处理、事件修饰符、v-for列表渲染 点击进入上一节
本节内容
- Vue指令之v-model双向数据绑定
1、v-model
-
预期:随表单控件类型不同而不同
-
限制:
<input>
<select>
<textarea>
- components
-
修饰符:
-
用法:
在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。
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)