计算属性

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. 【甘道夫】通过Mahout构建贝叶斯文本分类器案例具体解释

    背景&目标: 1.sport.tar 是体育类的文章,一共同拥有10个类别.    用这些原始材料构造一个体育类的文本分类器,并測试对照bayes和cbayes的效果:    记录分类器的构造 ...

  2. Uniprot 数据库-最常用的蛋白质数据库

    Uniprot 数据库是收录信息最全面的蛋白质数据库,包含swissport, uniparc, TrEMBL 3个子数据库: 其中swiss-prot 是手工核对过的 ,非冗余, 有详细注释信息的蛋 ...

  3. AOP技术应用和研究--AOP简单应用

    为了更好的理解AOP实践和体现AOP的优势.我们始终将OOP和AOP的比較贯穿到下文中.并在终于总结出AOP与OOP相比所拥有的长处,AOP的缺点以及AOP一般的使用场景. 1.1 问题空间到解空间的 ...

  4. SharePoint Server 2013 通过IP无法访问站点

    通过IP访问SharePoint站点,出现“The Web application at http://172.21.19.132:1000 could not be found.... ”如下错误: ...

  5. ORACLE expdp/impdp导出实例

    服务器上以sys或system超级管理员登录. SQL>create directory expdp_dir as '/home/oracle/dmpdata';(dmpdata 需要建立.赋予 ...

  6. java导出word文件

    java导出word文件 test5.ftl文件生存方法, 第一步:用word新建test5.doc,填写完整模板,将需导出数据用${}代替 第二步:将test5.doc另存为test5.xml 第三 ...

  7. 定义的函数在main中调用时提示找不到标识符

    要把定义的函数放在main函数前,如果放在main函数后了,要在main前做声明.声明就是把函数定义的首部一行加一个分号放在main之前. 在c语言中自定义了一个函数,在main中调用时提示找不到标识 ...

  8. 【Android开发】如何设计开发一款Android App

    本文从开发工具选择,UI界面.图片模块.网络模块.数据库产品选择.性能.安全性等几个方面讲述了如果开发一个Android应用.现在整理出来分享给广大的Android程序员. 开发工具的选择 开发工具我 ...

  9. ｃ＃　T obj = default(T);

    泛型类和泛型方法同时具备可重用性.类型安全和效率,这是非泛型类和非泛型方法无法具备的.泛型通常用在集合和在集合上运行的方法中..NET Framework 2.0 版类库提供一个新的命名空间 Syst ...

  10. UVA 11542 - Square(高斯消元）

    UVA 11542 - Square 题目链接 题意:给定一些数字.保证这些数字质因子不会超过500,求这些数字中选出几个,乘积为全然平方数,问有几种选法 思路:对每一个数字分解成质因子后.发现假设要 ...