vue简单事件命令

vue 源码：

立即执行函数：(function(){})()

1.特点：
&&安全性高
&&减少函数命名冲突。
&&第二个括号才是函数的真正运行， 里面可以传入实际参数
&&第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数
2.底层代码封装：
&&立即执行函数的作用
   1确定vue.js这个库的作用。
     直接将vue当做全局的一个方法使用，因为vue挂载到window上。
     使用AMD.来定义vue.js这个库为一个模块，这样我们才能引入。

模板语法：

1.alert(), console.log()不能使用

2.if改成三目运算符。

3.方法一定要写在methods中，不能直接写在模板语法中。

4.模板语法支持立即执行函数。

列表渲染：

1.使用v-for指令。

v-for = "xxx in data"

如果需要索引：

v-for= "(item, index) in data"

当遍历的是对象时，可以写成：

v-for = "(item, index, key) in obj"

总结：
1.v-for最多可以传三个参数。
2. 格式

v-for = "(item, index, key) in data"

3. v-for如果有循环嵌套， 那么value可以写成一样的命名， 但是我们建议大家写成不一样的命名， 理由： 比较语义化
4. v-for 可以循环 数字或是一个字符
5. 扩展：

v-for = "item in data";

底层原理如：

function  v-for( arg ){
          //做字符串处理
          var data = 'data'
          for( var i = 0 ; i < data.length; i++ ){
            
          }
        }

条件渲染：

1.v-if
   单路分支：

         <p v-if = " f ">
           true
         </p>

   双路分支：

       <p v-if = " f ">
            true
       </p>
       <p v-else>
            false
       </p>

   多路分支：

     <p v-if = " text === 'A'"> A </p>
     <p v-else-if = " text === 'B'"> B </p>
     <p v-else> C </p>

2.v-show

     <p v-show = " f ">
          if条件
     </p>

v-if 与 v-show比较：
1.v-if 操作的是DOM存在与否，v-show操作的DOM的display属性
2.性能：
  如果条件为假，v-show有较高的初始渲染开销，
  v-if有更高的切换开销。
项目中的建议：
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

事件：

1.事件基础内容：

事件组成部分：
1.DOM,
2. on 添加事件的形式，
3. 事件类型 click,
4. 事件处理函数。
举例：

事件传参：
<div id="app">
   <button @click = "argHandler('hello 骏哥~~~')">
      eventArgument
   </button>
 </div>
 <script>
 new Vue({
   el:"#app",
   methods:{
     argHandler(value){
     console.log(value)
     }
   }
})
 </script>

事件对象：
<div id="app">
   <button @click = "eventHandler">
      eventArgument
   </button>
 </div>
 <script>
 new Vue({
   el:"#app",
   methods:{
     eventHandler(e){
     console.log(e)
     }
   }
})
 </script>

事件多个参数：
<div id="app">
   <button @click = "evHandler('骏哥',$event)">
      eventArgument
   </button>
 </div>
 <script>
 new Vue({
   el:"#app",
   methods:{
     evHandler(arg, $event){
     console.log(arg);
     console.log($event);
     }
   }
})
 </script>

2.事件进阶部分：

   1.事件修饰符：
    格式：

 v-on:eventType.modify = eventFnName

类型：
.stop: 阻止事件冒泡行为。
.prevent ：阻止浏览器默认行为
.capture :阻止捕获行为
.self： 自身触发
.once : 只执行一次
.passive ： 行为结束后触发（scroll）

   2.按键修饰符（ 键盘事件 keyup keydown keypress）：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

   3.自定义修饰符:
1.全局修改：

 Vue.config.keyCodes.自定义修饰符 = 键盘码

使用：

@keyup.自定义修饰符 = eventFnName

2.自定义事件（自定义事件类型）

1. 使用new Vue() 的到的实例来定义

vm.$on(eventName,callback)

2. 如何触发呢

vm.$emit(eventName);

this.$emit(eventName)

单向和双向数据绑定：

1.单向数据绑定：
    1.概念：
      将数据和属性进行绑定， 也就是原生身上的属性的值就是数据
    2.格式：

 v-bind:attr = data

可以简写成：

 :attr = data

2.双向数据绑定：
    数据改变， 视图更新，
    视图改变， 数据更新

1.格式：

 v-model:attr=data

简写：可以省略属性

v-model=data

特别强调：
 v-model用于表单， v-model默认绑定了value属性

举例（09-v-bind实现v-model）：

    <div class="app">
		<input type="text" v-bind:value="msg" @input="change">
	</div>
    <script>
       new Vue({
        : '.app',
        data: {
        msg:"德玛西亚万岁"
        },
        methods: {
         change(e){
           this.msg = e.target.value;
         }
       }
     }
    </script>