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在内部为不同的输入元 ...
随机推荐
- Java动态代理-->Spring AOP
引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓“登高必自卑,涉远必自迩”.以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系列分别介绍这些Jav ...
- NodeJs生成SVG图形验证码
背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑 ...
- 新版SourceTree免帐号登录安装
http://blog.csdn.net/zcbyzcb/article/details/72959720?locationNum=2&fps=1 [ { "$id": & ...
- visual studio 2017使用NHibernate4.0连接oracle11g数据库
之前一直是公司用NHibernate2.1来做项目,连接oracle 10g的数据库,配置NHibernate的东西都是以前的同事做好了的,也怪自己太懒了,没尝试过配置这个东西,虽然一直在使用NHib ...
- [深入理解Android卷一全文-第四章]深入理解zygote
由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该由于纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的所有内容. ...
- ALM在win7/IE8下无法浏览
操作系统WIN7 64位. 安装完ALM后,用IE8打开查看,没有登录界面,提示需要安装东西. 按照提示安装,没有响应,然后到网上查了一下资料: ALM/QC11.0在win8/IE11下无法浏览 页 ...
- C语言各种存储模式的区别?最常用的存储模式有哪些?
DOS用一种段地址结构来编址计算机的内存,每一个物理内存位置都有一个可通过段地址一偏移量的方式来访问的相关地址.为了支持这种段地址结构,大多数C编译程序都允许你用以下6种存储模式来创建程序: ---- ...
- 关于HTML5的十大面试题
1.html5的文档类型和字符集分别是什么? 答:<!doctype html>/<meta charset="UTF-8"> 2.在html5中如何嵌入一 ...
- ios Instruments 内存泄露
本文转载至 http://my.oschina.net/sunqichao/blog?disp=2&p=3 虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄露还是 ...
- Bootstrap篇：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...