计算属性

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 - 计算属性、表单输入绑定的更多相关文章

  1. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  2. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  3. Vue表单输入绑定（文本框和复选框）

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

  4. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  5. Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  6. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  7. VUE：事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  9. Vue（10）表单输入绑定v-model

    v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...

随机推荐

  1. 获取作为 URL 部署清单的位置。

    ActivationContext ac = AppDomain.CurrentDomain.ActivationContext; ApplicationIdentity ai = ac.Identi ...

  2. 【Mongo】聚合函数

    http://blog.csdn.net/miyatang/article/details/20997313 SQL Terms, Functions, and Concepts MongoDB Ag ...

  3. 第八章 示例代码（MyBatis）

    Sample Code JPetStore 6 is a full web application built on top of MyBatis 3, Spring 3 and Stripes. I ...

  4. jQuery使用cookie与json简单实现购物车功能

    本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id  String类型 2.添加商品id的时候 把 ...

  5. DLL文件的使用

    一. 动态链接库 什么是动态链接库?DLL三个字母对于你来说一定很熟悉吧,它是Dynamic Link Library 的缩写形式,动态链接库 (DLL) 是作为共享函数库的可执行文件.动态链接提供了 ...

  6. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  7. POJ 1946 Cow Cycling(抽象背包, 多阶段DP)

    Description The cow bicycling team consists of N (1 <= N <= 20) cyclists. They wish to determi ...

  8. 未配置jdk环境变量，cmd环境能运行java -version命令

    我的情况是C:\Windows\System32路径下有java.exe.javaw.exe.javaws.exe三个文件,将三个文件删除后配置自己的jdk环境变量 可能原因参考帖子:https:// ...

  9. Python做简单爬虫（urllib.request怎么抓取https以及伪装浏览器访问的方法）

    一:抓取简单的页面: 用Python来做爬虫抓取网站这个功能很强大,今天试着抓取了一下百度的首页,很成功,来看一下步骤吧 首先需要准备工具: 1.python:自己比较喜欢用新的东西,所以用的是Pyt ...

  10. 动态调整UITableViewCell高度的实现方法

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...