vue.js数据绑定操作安详严整分分快三计划

作者:分分快三计划

事件处理

  1. vue中定义事件处理函数
  2. DOM中绑定事件处理函数

     ■  完整写法:v-on:事件名称=”事件处理函数” 

     ■ 简写方式: @事件名称=”事件处理函数” 

  <div id="app">
    <input type="text" v-model="number"><br/>

    <!-- vue中事件绑定需要用v-on:指令-->
    <!-- 完整写法 -->
    <button v-on:click="handleClick">事件绑定完整写法:点击number  </button><br/>

    <!-- 因为事件处理用的比较多,所以vue提供了@事件名称="处理函数"的简写方式 --> 
    <button @click="handleClick">事件绑定简写方式:点击number  </button>  
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el : '#app' ,   
      data : {
        number : 1    
      },
      methods : {  // 事件处理函数定义在methods中,注意:methods中定义的方法名称不能和data中的数据名称相同
        handleClick : function () {
          console.log(this.number  );
        }
      }
    });
  </script>

 效果:

  分分快三计划 1

 

 

vue安装介绍参考: 三种方式安装(vue-cli)

2.4.3 条件指令

  • v-if  v-else-if  v-else,根据条件确定是否创建该 DOM 节点

    <p v-if="money>5000">土豪</p>
    <p v-else-if="money>3000">小康</p>
    <p v-else>穷鬼</p>
    

  • v-show:根据条件控制该节点的显示、隐藏,控制 display 属性

    <p v-show="isshow">折叠菜单</p>
    

表单控件

基本操作(上)

本章节简介:

    vue的安装

    vue实例创建

    数据绑定渲染

    表单数据双向绑定

    事件处理

3.3 事件类型

  • 属性事件:click、dblclick、mouseover、mouseout、mouseenter、mouseleave、mousedown、mouseup、mousemove
  • 键盘事件:keydown、keyup、keypress
  • ui事件:scroll、resize、load、unload
  • 表单事件:focus、blur、select、change、submit

多个键名:

属性绑定:v-bind

  - 完整写法: v-bind:属性名称=”数据变量或表达式” 

  - 简写方式: :属性名称=”数据变量或表达式” 

示例:

    <!-- 完整写法 -->
    <input type="text" v-bind:value="message">
    <!-- 简写 -->
    <input type="text" :value="message">

下面举例:数据和属性绑定的几种用法和常见错误:

    <!-- 下面以data中的message的各种绑定形式举例: -->
    <!-- 普通文本数据绑定 -->
    <!-- 
         正确绑定方式
    -->
    <h1>{{ message }}</h1>

    <!-- 
         错误绑定方式 : 这里表示的是字符串 message
         {{ }}内不需要加引号,如果加了引号,就会把 message当做字符串处理,而不是data中的数据成员
    -->
    <h1>{{ 'message' }}</h1>

    <!-- 这里表示的是数字 123 ,不和任何数据有关联 -->
    <h1>{{ 123 }}</h1>  

    <!-- 属性绑定方式 -->
    <!--
         错误的用法,属性绑定需要用 v-bind 指令进行绑定,而不能使用八字胡语法
    -->
    <h1 foo="{{ message }}">测试文本</h1>

    <!-- 
         正确的属性绑定方式: 完整写法(简写去掉 v-bind 只用冒号即可)
    -->
    <h1 v-bind:foo="message">测试文本</h1>

    <!-- 
      错误的绑定方式 : 同理这里表示的是字符串
    -->
    <h1 v-bind:foo="'message'"></h1>

上面所说的表达式,是指一些简单的Java Script表达式,如下所示:

    {{ number   1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-'   id "></div>>

注意:普通的文本数据绑定和属性绑定都是单向绑定

  • 数据改变,视图跟着变
  • 视图改变,数据不变

 对有些特殊属性,作用方式有所不同,如 class 和 checked

3.8 v-model 修饰符

语法:v-model.修饰符=”变量”

修饰符:lazy,文本框失去焦点后再去更新数据

    number,从字符串中获取数字部分

    trim,删除文本框中的前后空格

<div id="app">
    姓名:<input v-model.lazy.trim="name" type="text" name=""><br/>
    年龄:<input v-model.number="age" type="text" name="">
    <p>姓名为:{{name}}<br/>年龄为:{{age}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            name:'',
            age:''
        }
      })
</script>

分分快三计划 2

例:省市联动

city-data.js

    <div id="app">
        省:
        <select v-model="currentP">
            <option v-for="(item,index) in getP">{{item}}</option>
        </select>
        市:
        <select v-model="currentC">
            <option v-for="item in getC">{{item}}</option>
        </select>    
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            //定义数据项
            data:{
                city:cityInfo,
                currentP:'-请选择-',
                currentC:'请选择'
            },
            //定义计算属性
            computed:{
                //获取所有省份、直辖市,并在option 中循环
                getP(){
                    //用function 匿名函数作用于this.city数组的每个元素,同时将每个元素传入该匿名函数中
                    var provinces = this.city.map(function(item){
                        return item.name
                    })
                    //在数组开头添加一个元素
                    provinces.unshift('-请选择-')
                    console.log(provinces)
                    return provinces
                },
                //根据当前省份(currentP变量)获取城市
                getC(){
                    //根据当前城市,获取sub部分
                    var citys = []
                    var provinces = this.city.find((item)=>{
                        return item.name == this.currentP
                    })
                    if(provinces && provinces.sub){
                        //遍历当前省份的市区
                        citys = provinces.sub.map(function(item){
                            return item.name
                        })
                        return citys;
                    }
                    console.log(provinces)
                }
            }
        })        
    </script>

 

3.自动添加前缀

Vue实例

 

    new Vue({
      el : ' ' ,   
      data : {  },
      methods : {  }
      }
    });

 

 vue实例中几个最基本的属性el、data、methods,作用如下:

 - el

    ■ 指定被Vue管理的模板入口,网页中的DOM节点

    ■ 作为模板入口的DOM节点不能是body、html

    ■ 必须是一个普通的HTML标签节点,一般是某个 div

 - data

    ■ 作用:数据驱动试图中的数据

    ■ 不是什么数据都往里面初始化的,一般是根据你的视图来初始化使用:数据驱动视图功能的数据

    ■ data中的成员一般叫做和视图交互的响应式数据成员

    ■ 以前想要操作DOM,必须给DOM起一个id搞一个标识。现在不需要了,只需要在data中初始化一个数据成员,然后再模板中绑定使用这个成员,我们就可以通过修改数据的方式来改变视图显示

    ■ 核心就是把DOM操作思想转变成“数据驱动视图”

 - methods

    ■ 一般用来定义事件处理函数

    ■ 虽然我们可以把方法写到data中,但是在Vue中更推荐把所有方法都写到methods属性中。因为这样做更加合理,数据和方法分开,分门别类。

    ■ 注意:methods中不允许有和data中重名的成员

2.4.2  属性指令

属性指令:将数据项绑定到属性上,如:img 的 src属性、a 标签的 href 、class、style属性等

语法:v-bind:属性名=”变量名”,通常会省略v-bind,简写为::src、:href、:class、:style

<div id="app">
    <a v-bind:href="myhref">百度一下</a>
    <a :href="myhref">百度一下</a>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            myhref:"http://www.baidu.com"
        }
    })
</script>
  • :class语法

    • <标签 :class=”{类名:T|F,类名:T|F}”,如果值为true,表示给这个元素加上该类名
    • <标签 :class=“[‘类名1’,’类名2’]”,同时拥有多个类名

    <p :class="{green:true}">{{content}}</p>
    <p :class="{green:false}">{{content}}</p>
    <p :class="['green','fs-40']">{{content}}</p>
    <p :class="active ? 'green' : 'red'">{{content}}</p>
    

分分快三计划 3

  • :style 语法:(:style的值可以是一个对象,设置多个样式)

    <p :style="info">{{content}}</p>
    

此时,filterA将name的值做为第一个参数,arg1,arg2做为第二、第三个参数传入过滤器函数中。

表单数据双向绑定

      表单标签的数据绑定需要使用v-model指令来操作,因为表单数据是和用户交互的数据。

  v-model指令绑定的数据是双向绑定的。

  数据←→视图(相互影响)

  表单标签如:文本、多行文本、复选框、单选按钮、选择列表等等。

  示例:

    <!-- 注意 : 非表单元素不可以使用 v-model 指令进行双向绑定 -->
    <!-- 错误用法:<h1 v-model="message"></h1> -->

    <!-- 表单元素 text 和 textarea 的双向绑定用法 -->
    <input type="text" v-model="message">
    <textarea cols="30" rows="10" v-model="message"></textarea>

    <!-- checkbox 的双向数据绑定的正确用法 -->
    <input type="checkbox" v-model="seen">

    <!-- 注意:checkbox 不能使用属性绑定的用法控制选中状态,如下错误用法示例 -->
    <input type="checkbox" :checked="seen">
    <!-- 
        这样相当于给checkbox加上 checked 属性,而作为 html 元素的 checkbox
        加了checked属性,无论是 true 还是 false 都是选中状态的。
     -->

3.5 事件对象

获取当事件发生时,事件源的一些信息(状态)。在Vue中当事件发生时,会自动给事件处理函数传递一个$event事件对象,无需手动传递,接收即可

<div id="app">
       <div style="width: 200px;height: 200px;background: red" @mousemove="move"></div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        methods:{
            move(event){
                console.log(event)
            }
        }
    })
</script>

单个勾选框,v-model即为布尔值,此时Input的value并不影响v-model的值。

安装

  安装方式有三种:

    一、vue官网直接下载

     http://vuejs.org/js/vue.min.js

    二、使用CDN方法

  1. BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内不稳定)           
  2. unpkg:, 会保持和 npm 发布的最新的版本一致。(推荐使用)
  3. cdnjs : ,如(<script src="

    二、使用node.js的npm包管理工具下载

npm install vue

3.7 表单的处理

Vue 处理表单数据时,通过v-model实现双向数据绑定,v-mode会同时监视表单输入、模型数据的更新,若表单内容改变,模型中的变量随之变化,反亦相同

  • 输入框:v-mode 将输入框的内容赋值给变量,同,变量内容改变,输入框的内容随之改变(例子)
  •  单选框:同理,模型数据改变时,视图层随之改变

    性别:<input type="radio" name="sex" value="male" v-model="sex">男
    <input type="radio" name="sex" value="female" v-model="sex">女
    <p>性别为:{{sex}}</p>
    

  • 复选框

注:由于复选框有多个选择,因此,常用数组来表示复选框的内容

<div id="app">
    爱好:<input type="checkbox" name="hobby" value="swim" v-model="hobby">swim
    <input type="checkbox" name="hobby" value="climb" v-model="hobby">climb
    <input type="checkbox" name="hobby" value="dance" v-model="hobby">dance
    <p>爱好为:{{hobby}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            hobby:[]
        }
      })
</script>
  • 下拉列表

注:v-model 监视 select标签,获取 option选项的value值,同理,v-model 的变量值改变了,select下拉列表的内容随之改变

<div id="app">
    <select v-model="country">
        <option value="China">中国</option>
        <option value="USA">美国</option>
    </select>
    <p>国家:{{country}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            country:''
        }
      })
</script>

数组语法:v-bind:style允许将多个样式对象绑定到同一元素上。

数据绑定渲染

3.1 事件介绍

事件,指用户和网页交互的行为,包括:鼠标单击、鼠标双击、键盘按下、键盘抬起等

事件由3个部分组成:事件源、事件类型、事件处理程序

先监听事件,当事件发生时,做出相应处理

vm实例中需要包括:

特殊属性class:

  • v-bind:class=”{类名:布尔值}”

    ■ 当布尔值为true的时候,这作用这个类名

    ■ 当布尔值为false的时候,这去除这个类名

基本操作如下:

    <!-- 当item.done 为true的时候,类 complete 就对当前 <li> 起作用 -->
    <li v-bind:class=" { complete : item.done } ">
      <a href="">{{ item.title }}</a>>
    </li>

3. Vue.js 事件处理

Hello {{ name }}



data:{
    name: 'vue'
}
== > Hello vue

特殊属性checked:

         checked在html标签中只要有checked属性即为选中的意思,无需true或flase,但在vue中处理了这个误解人的属性,v-bind:checked=“布尔值” ,只有布尔值为true时才有checked属性。

3.2 Vue.js 中事件监听

语法:v-on:事件类型=”事件处理函数” 或 简写为:@事件类型=”事件处理函数”

<div id="app">
        <button v-on:click="btnClick">按钮</button>
        <button @click="btnClick">按钮</button>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            methods:{
                btnClick(){
                    alert("单击事件");
                }
            }            
        })
    </script>

.lazy:默认情况下,v-model在input事件中同步输入框与数据,加lazy属性后会在change事件中同步。

文本绑定:{{ }}

 - mustache语法 ( 八字胡 ) ,中括号括号里面可以是数据变量或者表达式

  示例:

<h1>{{ message }}</h1>

 

2.4.1  数据绑定指令

  • v-text,将数据项绑定到标签上,作用类似于{{数据项}}
  • v-html,将数据项绑定到标签上,作用类似于{{数据项}}

    <h1 v-text="fruit"></h1>
    <h1 v-html="fruit"></h1>
    

注:两者区别:v-html 可解析数据项中的html标签,v-text 原封不动输出

  • v-model,通常是将输入框的值绑定到一个变量上,实现双向数据绑定

    <h1 v-text="fruit"></h1>
    <h1 v-html="fruit"></h1>
    <input type="" name="" v-model="inputValue">
    {{inputValue}}
    

注:需在data里定义变量名

在使用transform这类属性时,v-bind:style会根据需要自动添加厂商前缀。:style在运行时进行前缀探测,如果浏览器版本本省就不支持不加前缀的css属性,那就不会添加。

 2.5 Vue 实例方法

保存逻辑代码,将来可像函数一样调用

语法:methods:{方法名:function(){}} 或 简化为:methods:{方法名(){}}

<div id="app">
   {{f1()}}---{{f2()}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    

        },
        methods:{
            f1:function(){
                console.log("f1")
            },
            f2(){
                console.log("f2")
            }
        }
    })
</script>

分分快三计划 4

首次赋值后再更改vm实例属性值不会引起DOM的变化

3.4 事件处理函数的位置

  • 若代码较少,将事件处理代码直接写到行内

       <h1>
           标题{{isshow ? '隐藏' : '展示'}}
       </h1>
       <div v-show="isshow">这是折叠菜单内容</div>
    

  • 若代码较多,将事件处理程序写在 methods 的方法中

      

    标题     {{isshow ? '隐藏' : '展开'}}   

      
    这是折叠菜单的内容

filterBy:传入值必须是数组,参数为{String | Function}targetStringOrFunction,即需要匹配的字符串或函数;"in"可选分隔符。{String}[...searchKeys],为检索的属性区域。

2. Vue.js 语法

typeof vm.selected //=> object
vm.selected.number //=> 123

2.3 数据渲染(插值)

将 data 中的数据项内容渲染到视图层

语法:{{数据项名称}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{fruit}}</h1>
  </div>
<script type="text/javascript">
  let app = new Vue({
    //挂载到Vue 中的标签        
    el:'#app',
    //定义数据项
    data:{
      fruit:'西瓜'
    }
  })
</script>
</body>
</html>

则渲染结果为

2.7 过滤器 filters

将数据被渲染到视图前进行格式化处理,而不会修改作用域中原有的数据

语法:

  • 定义过滤器:filters:{过滤器1:function(参数1,参数2…){} 或 简写为 filters:{过滤器1 (参数1,参数2…){}}

注:定义过滤器时,必须声明参数,且参数1固定,指要操作的数据,剩余参数是调用过滤器时传递进来的

  •  使用过滤器:{{变量名 | 过滤器1 | 过滤器2….}}

    {{avg|fix(1)}}

  • 过滤器组合使用

    {{avg|fix(1)|insertBefore}}

例如:

2.1 实例化Vue对象

接收一个对象作为参数,主要用来配置Vue

let app = new Vue({})

Class与Style绑定

2.6 计算属性 computed

若模板中使用的变量(表达式)过多,会导致模板过重,不便于维护、管理,因此,可将代码写在计算属性中

语法:computed:{方法名:function(){}} 或 简写为: computed:{方法名(){}}

<div id="app">
   {{computedAge}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            age:19
        },
        computed:{
            computedAge(){
                return this.age >18 ?'成年人':'未成年'
            }
        }
    })
</script>

注:计算属性 与 实例方法 的区别

  • 计算属性有缓存,而实例方法无缓存,建议使用计算属性
  • 使用计算属性时,{{计算属性名}},使用实例方法时,{{方法名()}}

单选框示例:

2.2 Vue配置项

el:需挂载到Vue中的标签,使用Vue进行管理(通常将根元素挂着到Vue)

data:定义数据项,在此定义所有数据

您可能感兴趣的文章:

  • vue.js数据绑定的方法(单向、双向和一次性绑定)
  • Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
  • Vue.js数据绑定之data属性
  • vue.js动态数据绑定学习笔记
  • Vue.js中数据绑定的语法教程
  • Vue.js Layer表格数据绑定与实现更新的实例
  • Vue.js每天必学之数据双向绑定
  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定
  • Vue.js第一天学习笔记(数据的双向绑定、常用指令)
  • vue.js利用defineProperty实现数据的双向绑定
  • 详解Vue.js之视图和数据的双向绑定(v-model)

3.6 事件修饰符

在原生JavaScript中,通过 event.preventDefault 阻止默认行为, style="color: #3366ff">如:enter键表示回车换行

<div id="app">
    <p v-html="message"></p>
    <textarea rows="5" cols="30" @keydown="postMessage"></textarea>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            message:""
        },
        methods:{
            postMessage(ev){
                //事件对象的keyCode属性获取按键
                if(ev.keyCode == 13){
                    //按下的是enter键,将输入框中的内容显示到p标签,target属性指事件源,即textarea标签
                    this.message = ev.target.value   "<br>";
                    ev.target.value = ''
                    //通过事件对象的preventDefault方法阻止enter键的回车换行默认行为
                    ev.preventDefault();
                }
            }
        }
    })
</script>
  • .prevent,阻止默认行为

例:enter 键阻止回车换行

<div id="app">
    <p v-html="message"></p>
    <textarea rows="5" cols="30" @keydown.prevent="postMessage"></textarea>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            message:""
        },
        methods:{
            postMessage(ev){
                if(ev.keyCode == 13){
                    this.message = ev.target.value   "<br>";
                    ev.target.value = ''
                }
            }
        }
    })
</script>
  • .stop,阻止事件冒泡

    • 事件冒泡,执行完子元素的事件后,执行父元素的事件

      
           

点击按钮后,控制台打印如下:

分分快三计划 5

    • 阻止冒泡,阻止子元素向上查找父元素的事件

      
           

点击按钮后,控制台打印如下:(已阻止了父元素上的事件)

分分快三计划 6

  • .capture:冒泡改为捕获(默认是冒泡,捕获指先执行父元素,再执行自己)

      
           

点击按钮后,控制台打印如下:

分分快三计划 7

  • .self :只处理自己身上的事件,不理会冒泡或捕获

      
           

点击按钮后,控制台打印如下:

分分快三计划 8

  • .once:一次性事件,只执行一次

    <button @click.once="btnClick">按钮</button>
    

点击(多次)按钮后,控制台打印如下:

分分快三计划 9

多选

1. Vue.js 介绍

Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层)。

作者:尤雨溪

注:学习 vue.js 时,一定要抛弃 jQuery 的思想(jQuery的特点在于强大的选择器、dom操作,而vue.js 的特点在于数据驱动来实现数据和显示相分离)

  • 特点:
    • 数据驱动,数据(模型层)、视图层的分离
    • 双向数据绑定:MVVM
      • Model变化,View视图也跟着变化
      • View视图变化,Model模型也跟着变化
    • SPA(Single Page Application)单页面应用
      • 传统网页:通过a标签的href属性实现页面跳转,每次跳转都会发送一个新的http请求,因为PC端的处理器较强大,没有问题,但在移动端会出现卡顿现象
      • SPA:将所有网页封装到一个 html 文件的不同 div(template模板)里面,每个网页对应一个 div(template),通过 div 显示、隐藏达到页面跳转的效果
    • 组件化、模块化
      • 目的是提升代码的复用性。如,订餐系统中的数量加减操作、轮播图等可能在多个地方都使用,就可将该功能设计成一个组件

orderBy:传入值必须是数组,参数为{String|Array|Function}sortKeys,即指定排序的策略。

2.4.4 循环指令

  • v-for 循环指令,用来遍历数组、对象等多个数据

语法:v-for=”(value, key) in 数组|对象”

注:每遍历一条记录,会将值赋给 value,将下标(属性名)赋值给 key

<div id="app">
    <ul>
        <li v-for="(item,index) in fruits">
            {{item}}---{{index}}
        </li>
    </ul>
    <ul>
        <li v-for="(item,index) in person">
            {{index}}:{{item}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            fruits:['橘子','苹果','西瓜'],
            person:{name:'David',age:20,hobby:'swim'}
        }
    })
</script> 

例:选项卡效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>    
</head>
<body>
<div id="app">
    <div class="tabLink">
        html
        css
        js
    </div>
    <div class="tabBody">
        <div v-show="currentTab === 'html'">html选项卡的内容</div>
        <div v-show="currentTab === 'css'">css选项卡的内容</div>
        <div v-show="currentTab === 'js'">js选项卡的内容</div>
    </div>        
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',//定义数据项
        data:{    
            currentTab:'html'//默认让第一个div显示
        }
    })
    let spans = document.querySelectorAll(".tabLink span");//querySelectoryAll查找.tabLink 后面的所有span标签
    spans.forEach((element)=>{//遍历span节点    
        element.addEventListener("click", function(){//给每个span标签绑定click事件
            app.currentTab = element.innerText//将当前span标签的内容赋值给currentTab变量
        }, false)
    })
</script>
</body>
</html>
<div v-bind:style="alertStyle"></div>

2.4 指令

  • 指令:旧时公文的一种,上级对下级的批示。计算机领域,指一段代码,即告诉计算机从事某一运算
  • Vue 中指令(Directives):写在 html 标签上的带有 v- 前缀的特殊属性。
  • 职责:当其表达式的值改变时相应地将某些行为应用到 DOM 上
<div class="tab" v-bind:class="{'active':active,'unactive':!active}"></div>

pluralize:参数为{String}single,[double,triple],字符串复数化。

<input type="radio" v-model="checked" v-bind:value="a" >

1.文本插值

<p v-for="item in items | orderBy [name,version]">{{item.name}}</p> //使用items里的两个键名进行排序

注:此时对vm.firstNamevm.lastName进行修改,始终会影响vm.fullName

<label><input type="radio" value="male" v-model="gender">男</lable>
<label><input type="radio" value="famale" v-model="gender">女</lable>
<p>{{ gender }}</p> //显示的是value值

vue.js允许在表达式后添加可选的过滤器,以管道符"|"指示。

{{ amount | currency '¥' 2 }} //若amount值为1000,则输出为¥1,000.00

3.绑定表达式

<p v-for="item in items | filterBy customFilter"
  methods:{
    cuestomFilter:function(item){
      if(item.name) return true;  //检索所有元素中包含name属性的元素
    }
  }

vm实例中需要包含:

<select v-model="multiSelected" multiple>
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
MultiSelected: {{ multiSelected.join('|') }}
var vm = new Vue({
    el: '#app',
    data: {
      firstName:'Gavin',
      lastName:'CLY'
    },
    computed: {
      fullName:function(){
        //this指向vm实例
        return this.firstName   ' '   this.lastName;
      }
    }
})



<p>{{ firstName }}</p>  //Gavin
<p>{{ lastName }}</p>  //CLY
<p>{{ fullName }}</p>  //Gavin CLY
<p v-for="name in names | filterBy '1.0'">{{ name }}</p> //检索names数组中值包含1.0的元素

<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json }}</p> //检索items中元素属性name值为1.0的元素输出。检索区域也可以为数组,即in [name,version],在多个属性中进行检索。



//输出结果
vue1.0
{"name":"vue1.0","version":"1.0"}

单选

2.HTML属性

{{ }}Mustache标签

debounce:传入值必须是函数,参数可选,为{Number}[wait],即延时时长。作用是当调用函数n毫秒后,才会执行该动作。

{{ name | uppercase }} // Vue.js将name的值传入给uppercase这个内置的过滤器中(本质是一个函数),返回字符串的大写值。
{{ name | filterA | filterB }}  //多个过滤器链式使用
{{ name | filterA arg1 arg2 }} //传入多个参数

渲染结果为:

对象语法:直接绑定符合样式格式的对象。

<p v-for="item in items | orderBy customOrder">{{item.name}}</p>
methods:{
  customOrder: function(a,b){
    return parseFloat(a.version) > parseFloat(b.version) //对比item中version的值的大小进行排序
  }
}

选中:

json:参数为{Number}[indent]空格缩进数,将json对象数据输出成符合json格式的字符串。

单次插值

vm.isB = false

.number:自动将用户输入转为Number类型,如果原值转换结果为NaN,则返回原值。

<div v-bind:id="'id-' id"></div>

通过v-bind实现,表单控件的值绑定到Vue市里的动态属性上。

<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pliralize 'st' 'nd' 'rd' 'th' }} </p>



//输出结果:
1item 1st
2items 2nd
3items 3rd
4items 4th
<input type="checkbox" v-model="checked" />
checked: {{ checked }}  //显示的是true/false
<div v-bind:style="[ styleObjectA,styleObjectB]" .></div>

本文实例讲述了vue.js数据绑定操作。分享给大家供大家参考,具体如下:

4.Select

选中:

使用自定义的过滤函数,函数可以在选项methods中定义

修饰符:以半角句号.开始的特殊后缀,用于表示指令应该以特殊方式绑定。

1. Text

未选中:

{{ name }}

Radio

.trim:如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入

<input v-on:keyup="onKeyup | debounce 500"> //input元素上监听了keyup事件,并且延迟500ms触发

capitalize:字符串首字符转化为大写。
uppercase:字符串转化为大写。
lowercase:字符串转化为小写。
currency:参数为{String}[货币符号],{Number}[小数位],将数字转化成货币符号,并且会自动添加数字分节号。

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
Selected: {{ selected }}
<div v-bind:class="[classA,classB]"></div>
<input type="text" v-model="message" />
Your input is : {{ message }} 

3.Select Options

指令的值限定为绑定表达式,即当表达式的值发生改变时,会有些特殊行为作用到绑定的DOM上。

limitBy:传入值必须是数组,参数为{Number}limit{Number}[offset],limit为显示个数,offset为开始显示数组下标。

响应式的数据绑定系统。建立绑定之后,DOM将和数据保持同步,无须手动维护DOM。使代码能够更加简洁易懂、提升效率。

2.Setter

vm.checked == vm.a  //=> true
<select v-model="selected">
    <!-- 对象字面量 -->
    <option v-bind:value="{ number:123}">123</option>
</select>

计算属性

1.Class绑定

4.过滤器

2. Radio

<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="1" v-model="multiChecked">2</label>
<label><input type="checkbox" value="1" v-model="multiChecked">3</label>
<p>MultiChecked:{{ multiChecked.join{'|'} }}</p> //multiChecked:1|2

vm实例中包含:

Mustache标签{{ }}

3.Checkbox

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

5.指令

数组语法:v-bind:class也接受数组作为参数。

<input v-model.trim="msg">
<div v-for="item in items | limitBy 10"></div> //items为数组,且只显示数组中的前十个元素

渲染结果为:

1.基础例子

<button v-on:click.stop="doClick"></button> //stop:停止冒泡。相当于调用了e.stopPropagagation().

v-model:对表单元素进行双向数据绑定,在修改表单元素值时,实例vm中对应的属性值也同时更新,反之亦然。

输入框示例,用户输入的内容和vm.message直接绑定:

{{ name.split('') | limitBy 3 1 }} // ->u,e
<img v-bind:src="avatar" /> <==>  <img src="{{avatar}}" />
data:{
  classA:"class-a",
  classB:"class-b"
}

2.内联样式绑定(style属性绑定)

vm.checked == vm.a //=> true

Checkbox

自定义排序函数:

使用三元表达式切换数组中的class

<div v-bind:class="[classA,isB?classB:""]"></div>

放在Mustache标签内的文本内容。除了直接输出属性值之外,一段绑定表达式可以由一个简单的JavaScript表达式和可选的一个或多个过滤器构成(不支持正则表达式,若需要复杂的转换,则使用过滤器或者计算属性来进行处理)。

<div class="class-a class-b"></div>

更新属性时带来便利

<input v-model.number="age" type="number">
data:{
  alertStyle:{
    color: 'red',
    fontSize: '2px'
  }
}



<div v-bind:style="{fontSize:alertStyle.fontSize,color:'red'}"></div>
<div :id="'id-' id"></div>

数据绑定

<p v-for="item in items | orderBy 'name' -1">{{ item.name}}</p> //items数组中以键名name进行降序排列

简写:

希望本文所述对大家vue.js程序设计有所帮助。

5.绑定value

{{ index   1}}
{{ index == 0 ? 'a' : 'b' }}
{{name.split('').join('|') }}
{{ var a = 1 }} //无效

避免在模板中加入过重的业务逻辑,保证模版的结构清晰和可维护性。

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b" />

6.参数特性

对象语法:v-bind:class接受参数是一个对象,而且可以与普通的class属性共存。

data:{
  active:true
}

数据绑定语法

多个勾选框,v-model使用相同的属性名称,且属性为数组。

vm.checked == vm.b //=>true
var vm = new Vue({
    el:'#app',
    data: {
      message: '',
      gender: '',
      cheched: '',
      multiChecked: '',
      a: 'checked',
      b: 'checked'
    }
})

最终函数的返回值即为输出结果。arg1,arg2可以使用表达式,也可以加上单引号,直接传入字符串。

var vm = new Vue({
    el:'#el',
    data:{
      cents:100
    },
    computed:{
      price:{
        set:function(newValue) {
          this.cents = newValue * 100;
        },
        get:function(){
          return (this.cents / 100).toFixed(2);
        }
      }
    }
})

过滤器limitBy可以接受两个参数,第一个参数是设置显示个数,第二个参数为可选,指从开始元素的数组下标。

<div class="tab active"></div>

参数:src为参数

选中:

单个键名:

<div class="class-a"></div>

vue.js内置的10个过滤器(Vue.js2.0中去除)

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划