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在内部为不同的输入元 ...
随机推荐
- Kernel.org 被黑，获取 Android 源码方法一则
8 月底 9 月初,作为 Linux 的老窝,Kernel.org 被黑客攻击了,其攻击原因众说纷纭.一直以来 Linux 对于我来说不是很感兴趣,所以从来不会关注类似事件,可是这次这个攻击,却影响到 ...
- R语言barplot绘图函数
barplot 函数用于绘制柱状图,下面对其常用的参数进行一个详细的解释: 1)height : 高度,通过这个参数可以指定要画多少个柱子以及每个柱子的高度,其值有两种格式, 第一种 :向量 vect ...
- 查看当前mysql数据库实例中,支持的字符集有哪些,或者是否支持某个特定字符集
需求描述: 查看当前mysql实例中支持哪些字符集,过滤特定的字符集 操作过程: 1.通过show character set来进行查看 mysql> show character set; + ...
- IDE、SATA、SCSI、SAS、FC、SSD 硬盘类型
http://www.cnblogs.com/awpatp/archive/2013/01/29/2881431.html
- RabbitMQ消息确认(发送确认,接收确认)
前面几篇记录了收发消息的demo,今天记录下关于 消息确认方面的 问题. 下面是几个问题: 1.为什么要进行消息确认? 2.rabbitmq消息确认 机制是什么样的? 3.发送方如何确认消息发送成功? ...
- swift - 移除界面上的所有元素
下面代码可以遍历移除页面视图上的所有元件: //清空所有子视图 func clearViews() { for v in self.view.subviews as [UIView] { v.remo ...
- python2.0_day16_django_url_view_models_template介绍
本节内容 Django流程介绍 Django url Django view Django models Django template Django form Django admin Django ...
- /var/log/spooler
/var/log/spooler 用来记录 Linux 新闻群组方面的日志,内容一般是空的,没什么用,了解即可
- c#图片生成png格式和原图不同
下面这种,会生成和原图类似的图片,png格式的图片该是空的地方仍旧是空的
- CSS美化自己的完美网页
CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...