vue - 计算属性、表单输入绑定
计算属性
computed:{}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> <div id="computed">
<div>
<!-- dlrow olleh --> <!-- {{msg.split('').reverse().join('')}} --> {{reverseStr}}
</div> <button @click='clickHanlder'>修改</button> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript">
var com = new Vue({
el:"#computed",
data:{
msg:"hello world"
},
methods:{
clickHanlder(){
console.log(this.reverseStr); // get this.reverseStr = "Hello Luffy" // set
}
},
computed:{
// 默认只有 getter 方法 // 计算数据属性 watch 监听 // reverseStr(){
// return this.msg.split('').reverse().join('')
// } reverseStr:{
set:function(newValue){
this.msg = newValue;
},
get:function(){
return this.msg.split('').reverse().join('')
}
} }
}) </script> </body>
</html>
计算属性的应用 v-model
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> <!-- preevent 可以阻止发送 form 表单，可以 ajax-->
<form id='computed' @submit.prevent> <!-- <input type="text" v-model='msg'> -->
<input type="text" v-model.lazy='msg'>
<input type="number" v-model.number='msg'>
<h3>{{msg}}</h3> <input type="submit" name="" value="提交"> <!-- v-model 实现原理- -->
<!-- <input type="text" v-bind:value='getValue' @input='msgChange'> --> <!-- <h3>{{getValue}}</h3> --> <!-- 官网 https://cn.vuejs.org/v2/guide/forms.html --> </form> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript">
var com = new Vue({
el:"#computed",
data:{
msg:"123"
},
methods:{
msgChange(e){
console.log(e.target.value)
this.getValue = e.target.value
}
// $.ajax() xmlhttpRequest axios 能做ajax技术 },
computed:{
getValue:{
set:function(newValue){
this.msg = newValue
},
get:function(){
return this.msg
}
}
}
}) </script> </body>
</html>
介绍
vue的核心：声明式的指令和数据的双向绑定。
那么声明式的指令，已经给大家介绍完了。接下来我们来研究一下什么是数据的双向绑定?
另外，大家一定要知道vue的设计模式：MVVM
M是Model的简写，V是View的简写，VM就是ViewModel。
通过官网的介绍，我们知道v-mode指令是v-bind:vlaue 和v-on:input的结合体。
----------------------------------------------------------
v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model只适用在表单控件中
比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。内容太多，就不给大家一一阐述了。大家一定要去阅读vue的官网文档
https://cn.vuejs.org/v2/guide/forms.html
ps:官网上的vue的文档非常好，喜欢vue的同学没事多来看看！
笔记
模块化 一个js就是一个模块 export default xxx
import xxx form ooo ----------------- 前端工具 webpack:打包机 html css js font 打包，之后交给服务器 html 文件太大；
webpack 有一些loader 加载器 插件 插件： 一个功能，一个js文件 组件： bootstrap，包含js html css ; 组件包含插件 webpack
可以对html压缩，
css压缩
js压缩 混淆；
减小服务器的压力，安全
图片压缩 前期：
grunt
gulp ----------------- node.js 小型的服务器 node.js + webpack
（热重载） npm run dev 实时监听 只要保存 就自动刷新了 ----------------- nodejs 服务器语言
npm init --yes 初始化我们的项目
自动的生成一个package.json文件 npm install jquery --save
npm install webpack --save-dev (开发依赖) ---------------- 如果你拿到一个新的项目 cd 当前目录
// npm rebuild 重建一下 在 run install 出错的情况下；
npm install npm run dev
npm start
npm run build 淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org ----------------------- vue 框架 单页面 网易云页面
掘金 尽可能减少请求；减少服务器的压力；前端做性能 做优化，主要都是为了减少服务器的压力。 vue主要用来做单页面的，主要是做移动端的！做移动端优先， 一级路由 二级路由
/books/1
/publish/ ----------------------------- 作业：
1. 上一页
2. 列表选中当前一项变色； 选项卡www.sina.com.cn
3. 代码敲一遍 知道每个指令干嘛的，熟练computed 计算属性的用法
4. v-model原理实现，
5. 预习；表单控件；
vue - 计算属性、表单输入绑定的更多相关文章
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue.js教程--基础2(事件处理 表单输入绑定
事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...
- Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- VUE：事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue（10）表单输入绑定v-model
v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...
随机推荐
- iOS推送证书从申请到使用
关于这个话题,已经有非常多写的非常好的文章了.可是,在自己做的过程中,即使别人写的已经非常好了,还是会遇到这样那样的问题. 自己还是再写一遍吧. 本文记录了从无到有申请证书,到最后可以发出通知.当然, ...
- MySQL Date函数的正确用法
以下的文章主要介绍的是MySQL Date函数的实际应用其中包括如何获取当前时间的具体操作,Unix时间的具体应用,时间前后.时间间隔与时间转换的实际内容描述,以下就是文章的主要内容. MySQL D ...
- 微信支付（公众号支付APIJS、app支付）服务端统一下单接口java版
一.微信公众号支付APIJS: 要完整的实现微信支付功能,需要前后端一起实现,还需要微信商户平台的配置.这里只是涉及服务端的代码. jar包:pom.xml <!-- ↓↓↓↓↓↓↓↓ 支付相关 ...
- [转]线上GC故障解决过程记录
排查了三四个小时,终于解决了这个GC问题,记录解决过程于此,希望对大家有所帮助.本文假定读者已具备基本的GC常识和JVM调优知识,关于JVM调优工具使用可以查看我在同一分类下的另一篇文章: http: ...
- select2 选择框插件
<select id="selBusi_type"><select> //初始化业务类型下拉 var initBusiTypeSel = function( ...
- 移动HTML 5前端性能优化指南
概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点,首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s),所 ...
- POJ 1655 Balancing Act(求树的重心--树形DP)
题意:求树的重心的编号以及重心删除后得到的最大子树的节点个数size,假设size同样就选取编号最小的. 思路:随便选一个点把无根图转化成有根图.dfs一遍就可以dp出答案 //1348K 125MS ...
- MAC快捷键使用大全
当写到标题的时候.突然想起刚接触电脑的时候总是会有一些window希统快捷键大全.foxmail快捷键使用大全,最没想到的是,作为一个说不上资深.也是有了年头的程序猿,到现在.我还要在写一个快捷键使用 ...
- POJ 1837 Balance(01背包变形, 枚举DP)
Q: dp 数组应该怎么设置? A: dp[i][j] 表示前 i 件物品放入天平后形成平衡度为 j 的方案数 题意: 有一个天平, 天平的两侧可以挂上重物, 给定 C 个钩子和G个秤砣. 2 4 - ...
- python2.0_s12_day9_协程&多线程和cpu,磁盘io之间的关系
事件驱动和异步io有什么直接关系. 当我们访问一个网页,不考虑网络问题.我们人类不觉得网页慢. 但是实际中对计算机来说还是慢.那慢在哪里.io io操作是整个网络操作中最慢的.比如你打开网页要是有2秒 ...