计算属性

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. Building a Non-blocking TCP server using OTP principles

    转自:https://erlangcentral.org/wiki/index.php/Building_a_Non-blocking_TCP_server_using_OTP_principles ...

  2. jquery中判断选择器，找没找到元素用$().size()==0

    jquery中判断选择器,找没找到元素用$().size()==0

  3. glsl 多重纹理

    #include"glsl.h" void SHADER::drawBox() { glBegin(GL_QUADS); // Front Face glNormal3f( 0.0 ...

  4. iOS: UUID and SSKeyChain

    需要加入SSKeyChain文件 传送门:SSKeyChain // // UniqueIDCreater.h // Housemart // // Created by Haozhen Li on ...

  5. SpringMVC-Controller

    接上: web.xml Spring-servlet.xml Controller层是控制层,在其类上添加@Controller注解,会被Spring-servlet.xml中的<context ...

  6. mysql中，查看当前数据库下所有的基表，不包括视图

    环境描述: mysql版本:5.5.57-log 操作系统版本:Red Hat Enterprise Linux Server release 6.6 (Santiago) 需求描述: 查看当前使用的 ...

  7. Java精选笔记_EL表达式

    EL表达式 初始EL EL是一种可以简化JSP页面的表达式,EL表达式的语法非常简单都是以"${"符号开始,以"}"符号结束的 EL表达式是一种简单的数据&qu ...

  8. swift - UIPickerView 的使用

    效果显示数下图: 1.初始化 pickerView.center = self.view.center //将dataSource设置成自己 pickerView.dataSource=self // ...

  9. mybatis 循环遍历

    /****Service/ public ServiceMessage<MemberFreedomRepModel> getMFListByPay(Long memberId,Long f ...

  10. Android Intent实现页面之间跳转

    什么是IntentIntent可以理解为信使(意图)由Intent来协助完成Android各个组件之间的通讯Intent实现页面逐渐的跳转1.startActivity(inetnt)2.startA ...