vue中如何促成数据的双向绑定分分快三计划

作者:分分快三计划

表单成分双向数据绑定(双向同步卡塔尔

使用v-model属性可让input中的内容和数码达成双向同步,不过选用了v-model属性之后,input的value、checked、select属性都会失灵

<div id="app">
    <input type="text" v-model="msg">
</div>
<script src="vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',//vue的属性和方法对哪个DOM根元素起作用(对它的后代元素也起作用)
        //数据
    如果data中属性的值是一个数组,如果想改变数组中内容,只能使用原生的会修改原数组的方法进行修改,普通的 数组[索引]=值 不行;
        data:{//写在data中的属性都会挂载到当前实例上
            msg:'zhufeng'
        }
    });
    console.log(vm.msg);//'zhufeng'
</script>
展现过滤/排序结果

神迹我们想要呈现二个数组的过滤或排序别本,而不改革或重新设置原始数据,在这里种状态下,能够创设重返过滤排序数组的猜度属性

<p v-for="item in items">{{item}}</p>

new Vue({
        data:{
          num:[1,2,3,4,5,6,7,8]
        },
        computed:{
            items:function () {
                return this.num.filter(function (item) {
                    return item % 2 === 0 it

                })
            }
        }
 }).$mount("#box")        

在考虑属性不适用的意况下,能够应用methods来合营filter

<p v-for="item in even(nums)">{{item}}</p> 

 new Vue({
        data:{
          nums:[1,2,3,4,5,6,7,8]
        },
        methods:{
            even(n){
               return n.filter(function (n) {
                   return n%2===0
               })
            }
        }
}).$mount("#box")       

1.命令含义:

directive(指令卡塔 尔(英语:State of Qatar)是相当的包罗前缀 v- 的下令,指令的值约束为绑定表明式,指令的天职便是当表明式的值改动时把一些特殊的行事接受到DOM上。

v-on:监听 DOM 事件(v-on:click可缩写为@click)

能够用 v-on 指令监听 DOM 事件,并在触发时运转一些 JavaScript 代码(在 methods 对象中定义的方法,何况methods中的方法名不可能和data中的变量名同样卡塔尔国

 <div v-on:click ="fn1('zhaosi,$event')">{{msg}}</div>
    <div @click ="fn1('zhaosi,$event')">{{msg}}</div>//上面的简写 
    方法后面可加()可不加。不加的话默认会传入事件对象e,
    加()代表要传参数,如果要用事件对象,则需要传$event

页面展现

2. 内部常用命令:

  • **v-if 指令 **: 依照表达式的值(true or false卡塔 尔(英语:State of Qatar)在DOM中变化还是移除一个成分
    <body>
    <div id="app">
    <p v-if=" true ">会来得</p> //会在布局中呈现
    <p v-if=" value ">会来得</p> //会在协会中显得
    <p v-if=" false ">不会来得</p> //不会在布局中突显
    <p v-if=" msg ">不会来得</p> //不会在布局中显示
    </div>
    <script>
    new Vue({
    el:'#app',
    data:{
    value:true,
    msg : false
    }
    })
    </script>
    </body>

1、若v-if想要切换八个因素,可以这么使用<template v-if> ..三个标签对...<template>
2、用key属性能够管理可复用成分,Vue 会尽恐怕连忙地渲染元素,平时会复用本来就有成分并非从头开端渲染。

<template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
</template>
在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素,   
input 不会被替换掉——仅仅是替换了它的 placeholder

Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可:
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>
现在,每次切换时,输入框都将被重新渲染
  • **v-show 指令 **:依听有名式的值(true or false卡塔尔国彰显可能蒙蔽一个成分,在DOM结构中有展现
    <body>
    <div id="app">
    <p v-show=" true ">会显示</p>
    <p v-show=" value ">会显示</p>
    <p v-show=" false ">不会显得</p>
    <p v-show=" msg ">不会呈现</p>
    </div>
    <script>
    new Vue({
    el:'#app',
    data:{
    value:true,
    msg : false
    }
    })
    </script>
    </body>

分分快三计划 1

v-show显示

v-show和v-if不雷同,它不扶植<template>语法,v-if和v-show都能说了算DOM元素的彰显和隐身,可是在切换v-if模块时,vue.js有三个片段编写翻译/卸载进程,因为v-if中的模板或然包涵数据绑定大概子组件,v-if是真是的标准渲染,它会保证条件快在切换时适当的绝迹与重新建立条件块内的光阴监听器和子组件。

就此v-if有更加高的切换消耗,而v-show只是轻便基于css切换,v-show有更加高的带头渲染消耗,所以再三切换使用v-show,运转规范十分小也许改换则用v-if较好

  • v-else 指令: 正是js中else的意趣,它必需随着v-if,还会有v-else-if也是
    <body>
    <div id="app">
    <p v-if="value">it's ok</p>
    <p v-else> it's not ok</p>
    </div>
    <script>
    new Vue({
    el:'#app',
    data:{
    value:false,
    }
    })
    </script>
    </body>

  • v-model 指令:用在input,select,text,checkbox,radio等表单控件上开创双向数据绑定

分分快三计划 2

v-model 代码

分分快三计划 3

v-model 效果

在v-model指令后还是可以够加上多少个参数(number,lazy,debounce卡塔 尔(阿拉伯语:قطر‎
① - number: 能将顾客的输入自动转成Number类型,假若调换为NaN,则赶回原值
② - lazy:暗中认可下v-model在input事件中一同输入框的值和多少,大家得以加上贰个lazy性子,将数据改到在change事件中爆发

<div id="app">
     <input type="text" v-model.lazy="value">
     {{value}}
</div>
 <script>
    new Vue({
        el:'#app',
        data:{
            value:'内容是在change事件后,输入框失去焦点才改变',
        }
    })
</script> 

③ - trim:自动过滤客户输入的来踪去迹空格,<input v-model.trim="msg">

  • **v-for 指令: ** vue提供的巡回指令,和js的forEach大概,先看意气风发段代码
  <body>
      <div id="app">
            <!-- 模板迭代 -->
             模板迭代
            <ul>
                <template v-for="(item,index) in 'items' ">
                    <li>{{ item }}-{{index}}</li>
                </template>
            </ul>
            对象迭代
            <ul>
                <li v-for="(value,key,index) in obj">
                    {{value}}-{{key}}-{{index}}
                </li>
            </ul>
            数组迭代
            <ul>
                <li v-for="(item,index) in gc">
                    {{item.name}}-{{index}}
                    {{item.age}}-{{index}}
                </li>
            </ul>
            整数迭代
            <ul>
                <li v-for="i in 10">{{i}}</li>
            </ul>
            字符串迭代
             <ul>
                <li v-for="i in 'span' ">{{i}}</li>
            </ul>
      </div>
      <script>
        new Vue({
            el:'#app',
            data:{
                gc:[
                    {name:'zhangsan',age:10},
                    {name:'lisi',age:21},
                    {name:'wangwu',age:22},
                    {name:'wangwu',age:22}
                ],
                obj:{
                    name :'gc',
                    age :28
                }
            }
        })
       </script> 
</body>

分分快三计划 4

07.png

v-for 在组件中的应用:三个回顾的例证todo-list,可以先跳过,学了组件再回放:(首要)

<body>
    <!-- 没看组件部分的可跳过,看了组件再来看 -->
    <div id='app'>
        <input type="text" v-model="todolist" @keyup.enter="addText">
        <!-- 监听keyup事件,有修饰符.enter,指按了enter键了才触发后面函数 -->
        <ul>
            <li is="todo-list" v-for="(item,index) in gc"  :title="item" @remove="gc.splice(index,1)"></li>  
            <!-- 若这里没用is属性写,直接用的组件名称,而且不加 :key=" xxx "属性则会报一个警告 component lists rendered with v-for should have explicit keys -->
            <!-- is 属性可看我写的组件中的is属性详解文档 -->
        </ul>
    </div>
    <script>
    // 我们来做一个简单的todoList的列子

        // 定义一个全局组件
    Vue.component('todo-list',{
            template:'<li>{{title}} <button @click="$emit('remove')">X</button></li>',//组件模板
            //@cilck绑定的点击事件,@是v-on:的简写方式,$emit('xx')能派发子组件的触发的事件,父组件能通过监听此事件(@xx='...')然后执行代码
            props:['title']   //接受父组件传来的数据,然后用在此组件模板中
        })
    new Vue({
        el:'#app',
        data:{
            gc:[
                '第1个未做的',
                '第2个未做的',
                '第3个未做的'
            ],
            todolist :''
        },
        methods:{
            // 定义一个函数添加用
            addText(){
                this.gc.push(this.todolist); //往遍历的数组中添加数据
                this.todolist = ''  //清空输入框的值
            }
        }
     })
    </script> 
</body>

分分快三计划 5

07-v-for在组件中的使用.gif

v-for 和 v-if 当它们处于同焕发青大年点, v-for 的事先级比 v-if 更加高,那意味着 v-if 将分头重复运营于各种 v-for 循环中

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}  //会先循环再判断
</li>

vue与v-for有关数组数据变动而视图不修正的情事以至化解办法--传送门

  • ** v-text 和 v-html 指令: **
<body>
    <div id="app">

        <!-- 和下面相同 -->
        {{gc}}  

        <!-- 和下面相同 -->
        {{gc}}
        <!-- 最终都渲染出value -->
        <!-- v-text和v-html指令区别在于v-html能解析标签,而text不能 -->
    </div>
    <script>
         new Vue({
            el:'#app',
            data:{
               gc : 'value'
            }
        })
       </script> 

    </script>
</body>
  • ** v-on 指令: ** 事件绑定和监听指令,用在平日成分上时,只好监听原生DOM事件,使用在自定义成分组件上时,能够监听子组件触发的自定义事件,在监听原生DOM事件时,能够用卓殊变量$event把它传播方法eg: v-on:click ="add($event)",其指令简写形式为 @click ,当一个ViewModel 被消逝时,全部的风浪微处理机都会活动被剔除。你不要顾虑什么和煦清理它们。

  • 事件修饰符:

    • .stop 阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>
    • .prevent 阻止默许事件触发 <form v-on:submit.prevent="onSubmit"></form>
    • .capture 开启事件捕获
    • .self 仅仅本成分才触发此绑定事件,子孙成分不可能触发
    • .once 仅仅触发一遍,不能够多吃触发

使用修饰符时,顺序十分重视@click.prevent.self 会阻止全数的点击,而 @click.self.prevent 只会阻止成分上的点击。

  • 键值修饰符:监听键盘事件
    • .enter
    • .tab
    • .delete (捕获 “删除” 和 “退格” 键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

能够透过全局 config.keyCodes 对象自定义键值修饰符外号:
// 能够利用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112

  • 修饰键
    • .ctrl
    • .alt
    • .shift
    • .meta
  • 滑鼠按钮修饰符
    • .left
    • .right
    • .middle
  • ** v-bind指令:**用以相应更新HTML性子。

    绑定src :

![]({{ imgUrl }})是错误写法,正确为![](imgUrl)

绑定 class:

1、对象语法:
<div v-bind:class="{ active: isActive }"></div>         //isActive为真就添加active样式
2、数组语法:
<div v-bind:class="[activeClass, errorClass]">       //2个类名都会渲染上
3、用在组件上:
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
<my-component class="baz boo"></my-component>
最终渲染成为:<p class="foo bar baz boo">Hi</p>

绑定内联样式style:

1、对象语法:
<div v-bind:style="{ color: activeColor, fontSize: fontSize   'px' }"></div>
2、数组语法:
<div v-bind:style="[baseStyles, overridingStyles]">
3、自动添加前缀:
当 v-bind:style使用需要使用特定前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
4、多重值:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">从 2.3 开始你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值
  • ** v-pre指令:** 编写翻译时跳过当前成分和它的子成分,能够用来突显原始的竹签及内容,跳过大批量并未有指令的节点会加快编写翻译。

  • ** v-ref指令:** 此指令能得到当下组件内的DOM成分包蕴子组件,通过this.$refs.xx,注意当v-ref和v-for一齐利用时,注册的值正是多个数组,2.0风流浪漫度改版,变为属性,以下是直接使用性质的艺术

js中可以通过this.$refs.ids 拿到上面的标签span

下拉框

   <div id="app">
    //加了multiple后就变为多选框,用ctrl 左键点击多选,msg也要换为一个数组
        <select v-model="msg" multiple>
        //加了disabled时候用户就不能选中此项了
        //option中的value是给写代码的人看的
            <option value="0" disabled>请选择地区</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">浙江</option>
        </select>
        {{msg}}//如果option的value属性不写,则取的是option中的内容
    </div>
    let app3=new Vue({
        el:'#app',
        data:{
            msg:'0'//默认选中的某一项,值与每一个option的value值对应
        }
    });
表单输入绑定

v-model会忽视全数表单成分的value,checked,selected天性的上马值,因为它会选择Vue实例来作为具体的值,我们理应通过javascript在组件的data选项中扬言开端值 ,对于单选按键以至列表选项,v-model绑定的是input的value的值,对于勾选开关绑定的是逻辑值

v-once:只绑定贰遍(不可能写成v-once=”msg”)

    <div v-once>{{msg}}</div>
v-show

v--show用法与v-if的大概相符,除了v-show未有v-else,区别的是包涵v-show属性的要素始终会被渲染并保留在DOM中,v-show是通过切换到分的css样式disoplay的值来支配成分是不是出示,而v-if则是经过创办和销毁来决定成分是或不是可知,所以比较来讲v-if的切换开支越来越高级中学一年级些,然则v-if是惰性的,如若开始的条件为false的话,那么它会维持什么也不做,直到条件发生变化,而v-show无论条件是怎样都会开展渲染,日常的话,v-show会有更加高的初始渲染花销
貌似的话,倘诺急需格外频仍的张开切换,那么大家会接收v-show,借使运维条件不是平常改变,那么我们会使用v-if

v-model(表单成分设置通晓后会忽略掉value,checked,selected卡塔尔国

让表单成分和数码落成双向绑定(映射关系卡塔尔国

 <input type="text" v-model="msg">
绑定内联 style样式
  • 目的语法
    :style的靶子语法十分直观,css属性名能够用驼峰命名法恐怕短横分割命名

    <div :style="{color:activeColor,fontSize:fontSize 'px'}">
    
    data:{
      activeColor:'red',
      fontSize:30
    }
    

    直白绑定到叁个体裁对象平时越来越好,让模板更清楚

    <div :style="styleObj"></div>
    
    data:{
      styleObj:{
        color:'red',
        fontSize:'13px'
      }
    }
    

    风度翩翩致能够凑合再次回到对象的计量属性使用

  • 数组语法

    :style的数组语法能够将四个样式对象应用到三个因素上

    <div :style="[baseStyles,overr]"><div>
    
    data:{
      baseStyles:{
        color:"red"
      },
      overr:{
        fontSize:"40px"
      }
    }
    
  • 自行抬高前缀

    当:style使用供给一定前缀的css属性时,如transform,vue会自动侦测并丰盛相应的前缀

v-bind:动态地绑定二个或多少个特点

// 绑定一个属性
<img v-bind:src="imageSrc">
//可缩写为如下形式,此时:src后面的值就可以是变量、表达式、赋值运算、计算、三元运算符(尽量少写逻辑运算)
<img :src="imageSrc">//此时imageSrc就代表一个变量
:key

当vue.js在渲染是时开采原来就有成分再一次被采用时会复用原来就有成分并不是再度渲染,那会加速vue渲染的速度,同有时候还应该有贰个实惠,比方下边那么些例子

<body>
<div id="box">
    <user></user>
</div>
<template id="userInfo">
    <div>
        <div v-if="loginType ==='username'">
            <label>Username</label>
            <input type="text" placeholder="请输入用户名" >
        </div>
        <div v-else>
            <label>Email</label>
            <input type="text" placeholder="请输入邮箱">
        </div>
        <button @click="change">switch</button>
    </div>
</template>

<script>
    new Vue({
        components:{
            "user":{
                template:"#userInfo",
                data(){
                    return{
                        loginType: "username"
                    }
                },
                methods: {
                    change() {
                        this.loginType = "Email"
                    }
                }
            }
        }
    }).$mount("#box")
</script>
</body>

在这里个事例中,我们点击button举办切换时,veu会复用重复的因素,template中风姿罗曼蒂克致的因素如llabel,input等要素只会渲染一回,在其次次面世时会被复用,如lable只会改造它的文字,input只会轮流成分的placeholder,而不会再次重复渲染标签,所以在点击切换时我们会意识输入框中大家输入的从头到尾的经过会仍旧留存

这种复用会升高vue的周转效能,不过有时在骨子里成本中我们也许供给幸免这种境况,这时候须求大家用到:key,大家能够透过为每叁个input设置不相同的:key来打招呼vue供给将该因素重新渲染

<input type="text" placeholder="请输入邮箱" :key="Email">

建议在使用v-for循环时假设要利用:key要给每多个莫衷一是的要素分化的key值,推荐使用如下方法

<p v-for="item in items" :key="item.id">{{item}}</p>

v-html:把html字符渲染成html

 <div v-html="msg"></div>
修饰符
  • lazy

    <input type="text" v-model.lazy="pick">
    <!--在默认情况下,v-model会在input事件中同步输入框的值与数据,在使用lazy修饰符后,会变为在change事件中同步-->
    <!--change事件触发条件:输入框内容发生改变并且失去焦点-->
    <!--input事件触发条件:输入框内容发生变化-->
    
  • number

    <input type="number" v-model.number="pick">
    <!--将用户的输入值转化为number类型,在通常的时候即使我们使用的是type="number"类型的输入框,得到的值也是string-->
    
  • trim

    <!--自动去掉用户输入文本的首尾空格-->
    <input type="text" v-model.trim="pick">
    

v-show

规格满足才让v-show所在标签以致标签内的开始和结果体现(操作的是因素的css样式卡塔尔国,不扶持template 标签

 <input type="text" v-show="flag">//flag为true时,input框才显示
动态value

我们得以动用v-bind:将value绑定到Vue实例的八个动态属性上,之后v-model将会绑定到动态value上,动态value能够是目的,字符串,数组等连串

  • 复选框

    <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
    <p>{{toggle}}</p>
    
     new Vue({
      data:{
          a:{
              text:'您已经选中'
          },
          b:"您没有选中",
          toggle:''
      }
    }).$mount("#box")
    
  • 单选按键

    <input type="radio" v-model="pick" :value="a">
    <p>{{pick}}</p>
    
    new Vue({
      data:{
          a:'你已经选中A',
          pick:''
      }
    }).$mount("#box")
    
  • 动态列表

    参照上意气风发例动态列表例子

自定义指令

可透过在vue实例的 style="color: red;">directives:{}品质中予以自定义指令意义

<div id="app">
     <button v-color="flag">变色</button>
  </div>
  let vm=new Vue({
     el:'#app',
     data:{
         flag:true
     },
     directives:{//在这里赋予对应自定义指令意义
         //可直接写对应的指令不用写v-
         color(el,val){
         //el和val都是默认给的:el指的是指令所绑定的DOM元素,val是一个对象,里面存储的是有关指令的信息,可用val.value获取到指令绑定的变量(或者表达式)所代表的值,这里就是flag所代表的值 'red'
         el.style.background=val.value;
         }
     }
  });
复选框
  • 单个复选框

    <input v-model="massage" id="checkbox" type="checkbox">
    <label for="checkbox">
    
  • 几个复选框

    <form action="#">
            <input type="checkbox" id="jack"  v-model="checkedNames">
            <label for="jack">jack</label>
            <input type="checkbox" id="john" value="john" v-model="checkedNames">
            <label for="john">john</label>
            <input type="checkbox" id="moke" value="mike" v-model="checkedNames">
            <label for="moke">mike</label>
    </form>
    checked names:{{checkedNames}}
    
    new Vue({
            data:{
                checkedNames:[]
    <!--如果我们将checkedNames设置为数组,那么在复选框选中后会传回复选框的value值,如果设置为字符串,那么在复选框被选中后会传回当前复选框的选中状态为true/false,并且所有复选框会被同时选中/不选中-->
            }
    })
    

v-cloak:

清除页面刚加载时会见到{{}}闪一下的职能,可加给最外层的根成分;

 //需要添加对应的css样式
    [v-cloak]{
      display: none;
    }
分选列表
  • 单选列表

    <select v-model="selected">
      <option value="" disabled>请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    {{selected}}
    
    new Vue({
      data:{
          selected:''
    }
    }).$mount("#box")
    
  • 动态选项

    <select v-model="selected">
      <option v-for="option in options" :value="option.value">
          {{option.text}}
      </option>
    </select>
    {{selected}}
    
     new Vue({
      data:{
          selected:'A',
          options:[
              {text:'one',value:'A'},
              {text:'two',value:'B'},
              {text:'three',value:'C'}
          ]
      }
    }).$mount("#box")
    

vue中的指令

dom成分的行间属性,vue提供了放置的指令,必得以v-开首,前面包车型客车值均为变量

组件的v-for

在自定义组件中,我们得以像普通成分雷同使用v-for

<my-component is="my-component" v-for="item in 10" :key="item.id" :item="item"></my-component>

不过注意在组件中不能选择item,也即是无法得到父级的多少,需求大家经过props获取父级的多寡(item卡塔 尔(英语:State of Qatar)

在vue2.2.0 的本子里,当组件在行使v-for时,key是必须的

Vue中的Class样式与style样式动态绑定(动态的先行级高于原本的卡塔尔

style="color: red;">:class=”{}”或者:class=”[]: 
通过:class=”{}”或者:class=”[]来动态的绑定class样式,与原先的class样式不冲突。 
有三种艺术: 
1、对象的艺术绑定 
2、数组的方式绑定

 <div id="app">
<!--以对象的方式动态绑定class样式:当flag为true时,z样式生效。y样式不生效-->
        <div class="x" :class="{z:flag,y:false}">我的世界</div>
<!--以数组的方式动态绑定class样式:y,z两个样式都会生效-->
       <div class="x" :class="[y,z]">我的世界</div>
    </div>
    let vm=new Vue({
        el:'#app',
        data:{
            flag:true
        }
    });

style="color: red;">:style=”{}”或者:style=”[]”:绑定行内的体制 
因此上述的点子来动态绑定行内的样式

<div id="app">
 //第一种是对象的方式
     <div :style="{backgroundColor:'red',color:'pink'}">我是谁</div>
//第二种是数组的方式
     <div :style="[str1,str2]">我的世界</div>
 </div>
    let vm=new Vue({
        el:'#app',
        data:{
            str1:{backgroundColor:'blue'},
            str2:{color:'yellow'}
        }
    });
单选开关
<input type="radio" value="one" v-model="picked" id="one" >
<label for="one">one</label>
<input type="radio" value="two" v-model="picked" id="two" >
<label for="two">two</label>
<p>{{picked}}</p>

 new Vue({
    data:{
        picked:''
    }
}).$mount("#box")

vue中如何完结数据的双向绑定

金镶玉裹福禄双全视图变化数据跟着变:分两步,上边get中的为第二步(即再一次读取的时候会调用get方法得到早前安装的值,以此来贯彻动态改换卡塔尔

是因为一贯写obj.name = this.value;会形成循环调用set方法,所以要依附中间对象的款式把值赋给中间对象,获取obj.name的时候大家获得中间对象的新式值就可以

let  obj = {name:'zhufeng',age:9};//数据
let temp = {name:"lily"};//借助中间对象
let input1 = document.getElementById("box2");//视图
//对某一个对象使用了Object.defineProperty方法之后就要写对应的get和set方法了,不然无法像操作普通对象一样访问或者设置它的属性
//此方法不兼容IE8及以下
Object.defineProperty(obj,"name",{
    configurable:true,//属性是否可删除
    writable:false,//属性是否可修改
    enumerable:false,//属性是否可枚举
    get(){//获取obj的属性名对应的属性值时会调用该方法
       /*2*/ return temp['name'];
    },
    set(val){//设置obj的属性名对应的属性值时会调用此方法

        //实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变)
        //由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可
        /*1、*/ temp.name=val;

        //实现数据变化视图改变
        input1.value=val;
    }
});
//为了初始化的时候让视图中(文本框中)有值:出现obj.name说明要访问这个属性就会用到defineProperty中的get方法
input1.value=obj.name;
//实现视图改变数据跟着改变
input1.addEventListener("input",function(){
    obj.name = this.value;//当值变化时会调用set方法
},false);
文本
<input v-model='massage' placeholder='edit me'>
<p>{{massage}}</p>

条件渲染:v-if v-else-if v-else与v-show

v-if v-else-if v-else:条件满意才渲染v-if所在标签以至标签内的开始和结果;(操作的是DOM结构卡塔 尔(阿拉伯语:قطر‎

  • 设置条件判别的DOM成分必得是接连的
  • 操作的是DOM成分
  • key 管理复用的元素若不想复用DOM成分,只需求给相应的DOM成分扩展不一致的key值
  • 支持 template 标签
  • 往往的来得和隐蔽用v-if会很浪费品质(操作的是DOM结构),那时要用v-show(操作的是CSS样式)

<div id="app">

< class="hljs-name">button @click= class="hljs-string">"flag=!flag">请点击 class="hljs-tag"></button>

class="hljs-comment">//template标签是vue提要求大家的未有其他实际意义,用来包裹成分用的(v-show不援救template标签卡塔 尔(英语:State of Qatar)

<template v-if= class="hljs-string">"flag">

< class="hljs-name">label>登录</ class="hljs-name">label>

<input type="text" key= class="hljs-string">"1">//key 管理复用的成分 若不想复用DOM成分,只必要给相应的DOM成分扩张分裂的key值

</template>

<template v-else>

<label>注册</label>

< class="hljs-name">input type= class="hljs-string">"text" key= class="hljs-string">"2">

</template>

</div>

let vm=new Vue({

el:'#app',

data:{

flag:true

}

});

v-for和v-if

恍如于v-if,大家也得以使用带有v-for的<template>渲染五个元素

<ul>
    <template v-for="item in items">
    <li>{{item.title}}</li>
    </template>
</ul>   

当v-if和v-for处于同豆蔻梢头节点,v-for的事先级比v-if越来越高,那也意味着v-if将会对每叁次的v-for循环举办推断

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

万一是有原则的跳过循环的试行,那么能够将v-if置于成分的外层上

v-text:代替 {{}} 渲染成文本(不会识别html标签卡塔尔国能够卫戍网速卡慢时{{}}出未来页面上

{{}} 中的值都会深入分析成文本内容;

{{msg}}等价于<div v-text="msg"><!--此处不能再写内容,防止出现闪的效果--></div>
多行文本
<p style="white-sapce:pre-line">{{massage}}</p>
<br/>
<textarea v-model="massage" placeholder="add multiple lines"></textarea>

复选框

单个复选框:

 <div id="app">
    //复选框中加了v-model后value依然可用
        <input type="checkbox" v-model="msg">
    </div>
    let app3=new Vue({
        el:'#app',
        data:{
        //如果是复选框且只有一个的时候,会把msg的值转化为布尔值,如果为true,代表选中
            msg:false//为false时代表默认不选中
        }
    });

八个复选框,需求绑定到同贰个数组,而且要给input设置初阶value值,为了在后头选中的时候取获得对应的选中框的值

 <div id="app">
      //复选框中加了v-model后value依然可用
        <input type="checkbox" v-model="msg" value="吃饭">吃饭
        <input type="checkbox" v-model="msg" value="睡觉">睡觉
        <input type="checkbox" v-model="msg" value="敲代码">敲代码
        {{msg}}
    </div>
        new Vue({
          el: '#app',
          data: {
            msg: [] //此处的msg需要是一个数组
          }
        })
骨干指令
  • v-text
    用以在页面中展示数据,能够简写为{{ }}的款式

    <p v-text="msg"></p>
    <p>{{msg}}</p>
    <!--这两种写法是等价的-->
    
  • v-html
    无差距于是用于体现数据,与v-text分歧约等于innerHtml和textContent

    <div v-html="msg"></div>
    
  • v-pre
    用来在展现页面是跳过渲染某大器晚成段代码,该情势首要可以用来跳过没有指令的代码来进步加载速度

    <p v-pre>{{msg}}</p>
    
  • v-once
    增添了该指令的因素/组件只会渲染叁遍,之后vue重新渲染时会直接跳过该因素/组件,纵然大家改形成分/组件引用的数额,成分也不会重复渲染,我们得以在剧情定位的要素/指令上行使该指令来节省质量

    <tem v-once></tem>
    <p v-once>{{msg}}</p> 
    
  • v-bind
    能够绑定一个或多少个动态,大概二个组件的prop,在vue中得以行使v-bing来为元素本身的性质改为动态性子,使成分尤为灵活,能够简写为 " : " 的花样

    <div :style="" :class=""></div>
    
  • v-on
    绑定事件监听器,事件类型由参数钦命,表达式可以是一个办法的名字也许是三个内联语句,当用在平时成分上时只协助原生DOM事件,用在组件上时得以扶持自定义事件,能够简写为"@"情势

    <div @click="click"></div>
    <div @click="bool=!bool"></div>
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
    
  • v-cloak
    该指令是vue用来协作css样式在vue未有在页面渲染完结早先,使用该指令的因素不显示,使客商分界面不会展现在渲染未到位在此以前的{{msg}}之类的修饰符,该指令会在页面渲染完结以往自动被删去

    <style>
      [v-cloak]{
        display:none;
      }
    </style>
    <div v-cloak></div>
    

单选框

对于单选框和复选框来讲,加了v-mdel属性后,开端设置的value属性不会失灵;

 <div id="app">
      <input type="radio" v-model="msg" value="男">男
      <input type="radio" v-model="msg" value="女">女
      {{msg}}
   </div>
  let app3=new Vue({
     el:'#app',
     data:{
       msg:'男'//默认选中的项,值与value的值对应,点击女的时候msg就会动态改为女
     }
   });
v-if,v-else,v-else-if

v-if的判断规范得以是数听他们注脚式,也足以是多少个变量的值,只怕是一条逻辑剖断语句

<div v-if="type==='A'">
A
</div>
<div v-else-if="0<1">
B
</div>
<div v-lese="bool">
C
</div>

也可以由此v-if来支配组件是或不是能够显得

<div id="box">
    <tem v-if="bool"></tem>
</div>

vue中的修饰符

表单修饰符

  • v-model.number:将用户的输入值转为数值类型
  • v-model.lazy:在表单触发change事件时更新数据,而非触发input事件时更新数据
  • v-model.trim:自动过滤顾客输入的源流空白字符

事件修饰符

  • @click.stop:阻止点击事件的传播(往上传出和往下传播都会被阻止卡塔尔
  • @submit.prevent:阻止点击提交开关时的暗许行为(阻止事件的默许行为卡塔尔
  • @click.capture:点击的时候让事件在捕获阶段施行;
  • @click.once:只在首先次点击的时候让绑定的事件施行;
  • @click.self:唯有一些击的事件源是友好的时候接触事件;(判别事件源卡塔 尔(阿拉伯语:قطر‎

典型渲染

v-for:遍历数组、对象、字符串、数字

除恶务尽了巡回难题,更加高效,会在原来的底工上开展更动,会复用原有的布局,不会改善全数DOM

要循环创建哪一个标签就在那一个标签上加v-for,后面的循环最好用in,用of有时会报错循环数组或对象使用v-for指令
  <div v-for="(val,index) in msg">
          {{val,index}}//msg为数组时,val为数组中的每一项,index为索引
  </div>  
  <div v-for="(value,key,index) in msg">
      {{key}}={{value}}{{index}};//msg为对象时,key为对象中的每个属性名,value为属性值,index为索引
  </div>  

列表渲染

根据hash实现单页面开采

透过hash记录跳转的门路(能够生出历史管理卡塔 尔(阿拉伯语:قطر‎ 
浏览器自带的野史管理办法history(history.pushState(),push到哪个地方就跳转到哪个地方卡塔 尔(英语:State of Qatar),大概会诱致404谬误(因为客商大概会随随意便输入路线卡塔 尔(英语:State of Qatar) 
支出时利用hash的主意,上线的时候使用history的诀要 
[使用hash存储]

//存储:存储的时候要把存储的对象转换成字符串
 localStorage.setItem('todo',JSON.stringify(obj));
//获取:获取的时候要把字符串转换成对象
JSON.parse(localStorage.getItem('todo'));

 

绑定HTML class样式
<div id="box">
    <!--传入一个对象,对应值来控制当前元素的样式-->
    <p :class="{col:bool,weight:bool}" class="size" @click="change">hello</p>
    <!--传入一个实例中的计算属性,通过计算属性的返回值控制当前元素的样式-->
    <p :class="classList">hello</p>
    <!--传入一个实例中的对象,对象中定义的值会控制当前元素的样式-->
    <p :class="classObj">hello</p>
    <!--传入一个数组,可以用来接收多个样式对象-->
    <!--可以通过使用三元表达式来控制当前元素样式-->
    <p :class="[bool?classList:'']">hello</p>
    <!--也可以通过在数组中传入对象来传入多个样式-->
    <p :class="[classList,{col:bool}]">hello</p>
</div>
<script>
    new Vue({
        data: {
            bool: true,
            classList: {
                colGreen: true,
                style: true
            },
            col: true,
            error: {
                type: "fatal"
            }
        },
        computed: {
            classObj: function () {
                return {
                    col: this.col && !this.error,
                    weight: this.error && this.error.type === "fatal"
                }
            }
        },
        methods: {
            change() {
                this.bool = false;
            }
        }
    }).$mount("#box")
</script>

:class样式能够和原生的class属性共存,在要素被渲染后,:class样式和class的体裁都会被保存

在应用组件的时候,在组件上中间增添的样式将会和在组件上增多的体制一齐被渲染

<body>
<div id="box">
    <tem class="size"></tem>
</div>
<script>
    const Tem={
        template:`
            <div class="box">
                <p class="col">hello</p>
            </div>
        `
    }
    new Vue({
        el:"#box",
        components:{
            "tem":Tem
        }
    })
    //模板最后的渲染结果是
    //<div class="size box">
    //<p class="col">hello</p>
    //</div>
</script>
</body>
v-for

咱俩选用v-for指令依据意气风发组数组选项的列表实行渲染,v-for指令需求以item in items方式的例外语法,items是源数据组,item是因素迭代的别称

也足以运用of代替in作为分割符

<li v-for="item of items"></li>

在v-for块中,大家具备对父级成效域完全的拜访权限,还支持可选的第二参数为近期项的索引值

<div id="box">
    <p v-for="(item,index) in items">{{item}}{{index}}</p>
</div>

new Vue({
  data:{
    items:["tom","xm"]
  }
}).$mount("#box")

大家也得以运用v-for通过贰个目的来迭代

<div id="box">
    <p v-for="value in items">{{value}}</p>
</div>

new Vue({
  data:{
    items:{
      name:"tom",
      age:18
    }
  }
}).$mount("#box")

vue对于指标的迭代暗中认可交易会示对象的键值对的值,页能够经过提供第2个参数来获取对象的键名

<p v-for="(value,ket) in items">{{value}}{{key}}</p>

也能够流传第八个参数来获取索引值

<p v-for="(value,key,index) in items">{{value}}{{key}}{{index}}</p>

此处的遍历顺序根据JS中Object.keys()的依次

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

关键词: 分分快三计划 Vue 工作笔记