Vue.js中

Vue.js事件处理器

1.v-on指令

<div id="app">
  <button v-on:click="count++">点击</button>
   <p>这个按钮被点击了 {{ count }} 次。</p>
</div>
<script>
  new Vue(){
    el:"#app",
      data:{
        count:0
}
}
</script>

2.v-on接受自定义方法调用

<div id="app">
  <button v-on:click="green">Green</button>  
</div>

<script>
   var app=new Vue({
     el:"#app",
     data:{
  name="Vue.js"
},
     methods:{
       green:function(event){
         //this在方法里指当前Vue实例
  alert("hello"+this.name)
  if(event){
  alert(event.target.tagName)
}
}
}
})
   //可以用JavaScript直接调用方法
   app.greet()
</script>

3.内联JavaScript语句

<div id="app">
  <butto v-on:click="say('hi')">say hi</butto>
</div>

<script>
   new Vue({
     el:"#app",
     methods:{
       say:function(message){
  alert(message)
}
}
})
</script>

4.事件修饰符

Vue.js为v-on提供了事件修饰符来处理DOM事件细节。Vue.js通过由.表示的指令后缀来调用修饰符。最常用的如
.stop  .prevent .capture .self .once
<!--阻止单机事件冒泡-->
<a v-on:click.stop=""></a>
<!--提交事件不再重载页面-->
<form v-on:submit.prevent=""></form>
<!--修饰符可以串联-->
<a v-on:click.stop.prevent=""></a>
<!--只有修饰符-->
<form v-on:submit.prevent></form>
<!--添加事件侦听器使用事件捕获模式-->
<div v-on:click.capture=""></div>
<!--只当事件在该元素本身(而不是子元素)触发时触发回调-->
<div v-on:click.self=""></div>
<!--click事件只能点击一次-->
<a v-on:click.once=""></a>

5.按键修饰符

Vue允许为v-on在监听键盘事件时添加案件修饰符
<!--只有在KeyCode是1时调用vm.submit()-->
<input v-on:keyup.1="submit"></input>
Vue为最常用的按键提供了别名
<input v-on:keyup.enter=""></input>
<input @keyup.enter=""></input>

#Vue.js表单

v-model会根据控件类型自动选取正确的方法来更新元素

1.输入框

<div id="app">
  <input v-model="message">
  <p>消息是:{{ message }}</p>]
  <p>textarea元素</p>
  <p style="white-space:pre">{{ message2 }}</p>
  <textarea v-model="message2"><</textarea>
</div>
<script>
   new Vue({
     el:"#app",
     data:{
       message:"hi",
       message2:"hello"
}
})
</script>

2.复选框

复选框如果只有一个是逻辑中，如果是多个则绑定到同一数组中。
<div id="app">
  <input type="checkbox" id="checkbox" v-model="check">
  <p>{{check}}</p>
  <input type="checkbox" value="天猫" id="TM" v-model="checkname">天猫
  <input type="checkbox" value="京东" id="JD" v-model="checkname">京东
  <input type="checkbox" value="淘宝" id="TB" v-model="checkname">淘宝
  <p>{{checkname}}</p>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      check:false,
      checkname:[]
}
})
</script>

3.单选按钮

<div id="app">
  <input type="radio" id="male" value="男" v-model="sex">男
  <input type="radio" id="famale" value="女" v-model="sex">女
  {{ sex }}
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      sex:"男"
}
})
</script>

4.select列表

<div id="app">
  <select v-model="selected" id="select">
    <option value="">请选择</option>
    <option value="hhhhhh">hh</option>
    <option value="wwwwww">ww</option>
  </select>
  选择的是{{ selected }}
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      selected:""
}
})
</script>

5.修饰符

.lazy在默认情况下v-model在input事件中同步输入框中的数据，但是可以添加一个修饰符lazy，从而改变在change事件中同步。
<!--在"change"而不是"input"事件中更新-->
<input v-model.lazy=""></input>
.number如果想自动将用户的输入值转为number类型，可以添加一个修饰符number给v-model来处理输入值
<input v-model.number="age" type="number"></input>
.trim如果要自动过滤用户输入的首位空格，可以添加trim修饰符到v-model上过滤输入
<input v-model.trim=""></input>

Vue.js组件

1.组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以独立可重复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。

2.全局组件

注册全局组件语法格式为Vue.component(tagName,options)tagName为组件名，options为配置选项。注册后可以使用<tagName></tagName>调用组件。
<div id="#app">
  <run></run>
</div>
<script>
  Vue.component("run",{
    template:"<h1>自定义组件</h1>"
})
  new Vue({
    el:"#app"
})
</script>

3.局部组件

<div id="app">
  <running></running>
</div>
<script>
   var run={
     template:"<h1>自定义组件</h1>"
}
   new Vue({
     el:"#app",
     components:{
       "running":run
}
})
</script>

#4.Prop

prop是父组件用来传递数据的一个自定义属性。父组件的数据需要通过props把数据传递给子组件，子组件需要显示地用prop选项声明"prop"

<div id="app">
  <run message="hello"></run>
</div>

<script>
   Vue.component("run",{
     props:["message"],
     template:"<h1>{{message}}</h1>"
})
   new Vue({
     el:"#app"
})
</script>

5.动态prop

类似于v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

<div id="app">
  <input v-model="parent">
  <run v-bind:message="parent"></run>
</div>
<script>
  //注册组件
  Vue.component("run",{
    //声明props
    props:["message"],
    template:"<h1>{{message}}</h1>"
})
  //创建根实例
  new Vue({
    el:"#app",
    data:{
      parent:"父组件"
}
})
</script>

注意：prop是单向绑定的。当父组件的属性变化时，将传导给子组件，但是不会反过来。

6.组件与v-for实例

<div id="app">
 <ol>
   <todo-item
     v-for="item in groceryList"
     v-bind:todo="item"
     v-bind:key="item.id"></todo-item>
  </ol>
</div>

<sccipt>
   Vue.component("todo-item",{
     props:['todo'],
     template:"<li>{{ todo.text }}</li>"
  })
  
   new Vue({
    el:"#app",
    data:{
      groceryList:[
        {id:0,text:"123"},
        {id:1,text:"456"},
        {id:2,text:"789"}
     ]
   }
})
</sccipt>

7.prop验证

组件可以为props指定验证要求。为了定制prop的验证方式，可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。

Vue.component("my_component",{
   props:{
      //基础的类型检查(null和undefined会通过任何类型验证)
     propA:Number,
       //多个可能的类型
     propB:[String,Number],
       //必填的字符串
     propC:{
       type:String,
       required:true
},
       //带有默认值的数字
       propD:{
         type:Number,
         default:100
},
         //带有默认值的对象
         propE:{
            tyepe:Object,
              //对象或数组默认值必须从一个工厂函数获取
              default:function(){
               return{message:"hello"}
        }
  },
           //自定义验证函数
           propF:{
               validator:function(value){
           //这个值必须匹配下列字符串中的一个
                 return["success","warning","danger"].indexOf(value)!==-1
}
}
}
})

当prop验证失败时，Vue将会产生一个控制台的警告。

8.自定义事件

父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去就要使用自定义事件。可以用v-on绑定自定义事件，每个Vue实例都实现了事件接口(Event interface)。

使用$on(eventName)监听事件

使用$emit(eventName)触发事件

父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件

<div id="app">
  <p>{{total}}</p>
  <button-count v-on:increment="incrementTotal"></button-count>
  <button-count v-on:increment="incrementTotal"></button-count>
</div>
<script>
 Vue.component("button-count",{
   template:"<button v-on:click='buttonHandler'>{{count}}</button>",
   data:function(){
      return{
    count:0
    }
}, 
   methods:{
     buttonHandler:function(){
         this.count+=1
         this.$emit("incrememt")
}
},
})
 new Vue({
   el:"#app",
   data:{
     total:0
   },
   methods:{
     incrementTotal:function(){
  this.total+=1
}
}
})
</script>

如果想要在某个组件的根元素上监听一个原生事件.可以使用.native修饰v-on

<my-component v-on:click.native="doTheThing"></my-component>

注意:如果调用多个同一个组件,data应是一个函数,而不是一个对象,这样的好处就是每个实例维护一份被返回对象的独立拷贝,如果data是一个对象会影响到其他实例。