8.vue.js源代码，mustache语法，列表渲染-条件渲染，事件，单项和双向数据绑定

本文链接：https://blog.csdn.net/newstw/article/details/89363286

0. vue.js源代码

匿名函数 (function(){}) ()

1. 特点

安全性高
减少了函数命名冲突
第二个括号才是函数的真正运行，里面可以传入实际参数
第一个括号确定了匿名函数的作用范围，语法不会报错，里面放一个没有名字的函数，函数可以接收形式参数

2. 底层代码封装

匿名函数作用

1. 确定vue.js这个库的使用方法

直接将Vue当做全局的一个方法使用，因为将Vue挂在了 window
使用了amd来定义vue.js这个库为一个模块，这样我们才能模块化引入

2. 封装库如何定义

1. 模板语法

alert console.log 不能用
if条件改成使用三元表达式
方法一定要写在methods里面，不要直接写在模板语法中
模板语法中支持使用匿名函数可以直接写

<div id="app">
    <p> num: {{ num }}</p>
    <p> str: {{ str }}</p>
    <p> und: {{ und }}</p>
    <p> nul: {{ nul }}</p>
    <p> bool: {{ bool }}</p>
    <p> obj: {{ obj }}</p>
    <p> arr: {{ arr }}</p>
    <p> fun: {{ (function(){ return 1+1 })() }}</p>
    <p> fun: {{ sum() }}</p>
    <p>
      if:{{ bool?num:str }}
    </p>
  </div>
<script>
  new Vue({
    el: '#app',
    data: {
      num: 100,
      str: '来了',
      und: undefined,
      nul: null,
      bool: true,
      obj: {
        id: 1,
        name: 'yyb',
        age: 17
      },
      arr: [1,2,3,4],
    },
    methods: {
      sum(){
        return 1+1
      }
    }
  })

2. 列表渲染

v-for指令
v-for = " xxx in data "
{{ xxx }}
如果需要索引 index
v-for = "(item,index) in data "
{{ item }} — {{ index }}
对象：
v-for = “(index,item,key) in obj”

<div id="app">
        <h3> arr-item </h3>
        <ul>
            <li v-for=" item in arr ">
                {{ item }}
            </li>
        </ul>
        <h3> arr - index </h3>
        <ul>
            <li v-for=" (item,index) in arr ">
                {{ item }}---{{ index }}
            </li>
        </ul>
        <h3> obj </h3>
        <ul>
            <li v-for=" (index,item,key) in obj ">
                {{ index }}----{{ item }} -- {{ key }}
            </li>
        </ul>
        <h3>json</h3>
        <ul>
            <li v-for="(item,index) in json">
                {{ item.card }} --- {{ item.name }} --- {{ item.age }}
            </li>
        </ul>
        <h3> 嵌套循环 </h3>
        <ul>
            <li v-for="item in json">
                <ul>
                    <li v-for="item in item">
                        {{ item }}
                    </li>
                </ul>
            </li>
        </ul>
        <h3> 循环一个数字 </h3>
        <ul>
            <li v-for=" item in 10 ">
                {{ item }}
            </li>
        </ul>
        <h3> 循环一个字符 </h3>
        <ul>
            <li v-for=" item in 'yanyabing' ">
                {{ item }}
            </li>
        </ul>
    </div>

<script>
    new Vue({
        el: '#app',
        data: {
            arr: ['a', 'b', 'c'],
            obj: {
                id: 1,
                name: '王麻子',
                age: 50
            },
            json: [{
                card: 1,
                name: 'qty',
                age: 20
            }, {
                card: 2,
                name: 'dyf',
                age: 18
            }],

        }
    })

总结:

v-for 最多可以有三个参数
格式
v-for = “(index,item,key) in data”
名词解释：
index: 索引
item； data中的每一个
key；如果是对象，表示对象的key
v-for如果有循环嵌套，那么value可以写成一样的命名，但是我们建议大家写成不一样的命名，理由：比较语义化
v-for 可以循环数字或是一个字符
扩展：
v-for = ’ item in data’
底层：

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

条件渲染
两种：
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>

v-show

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

<body>
  <div id="app">
    <p v-if = " f ">
      if条件
    </p>
    <p v-show = " f ">
      if条件
    </p>
    <h3> if 的分支结构 </h3>
    <h4> if 双路分支 </h4>
    <p v-if = " f ">
      true
    </p>
    <p v-else>
      false
    </p>
    <hr>
    <h4> 多路分支 </h4>
    <p v-if = " text === 'A'"> A </p>
    <p v-else-if = " text === 'B'"> B </p>
    <p v-else> C </p>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      f: false,
      text: 'A'
    }
  })
</script>

v-if vs v-show

1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性

2. 性能

如果条件为假，v-show有较高的初始渲染开销
v-if 有更高的切换开销
项目中建议：
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4. 事件

1）事件基础内容：

属性绑定

function alert(){ alert('hello vue.js') } 2. js操作 // 1. 获取数据 var data = 'hello vue.js' // 2. 获取DOM var app = document.querySelector('#app') // 3. 渲染数据 app.innerHTML = data // 4. 添加事件 app.onclick = function(){ app.style.background = 'red' } 事件的组成部分： 1. DOM 2. on 添加事件的形式 3. 事件类型 click 4. 事件处理函数有上面的总结： vue使用第一种事件添加的形式 ---》 v-on 格式： v-on:eventType = eventFnName 简写： @eventType = eventFnName 事件处理函数写在配置项中 methods中书写步骤：先写方法，再去绑定需求：我们有一个方法，这个方法中有两个参数，第一个参数是自定义参数，第二个参数是事件对象问题：第二个参数事件对象 = undefined\ 原因：当我们自定义参数后，系统无法自动识别，是不是事件对象解决：传入事件对象的实际参数： $event 列： ```javascript

事件添加

事件修饰符
举例：事件冒泡
通过举例告诉大家， e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案：使用事件修饰符(modify)
格式：
v-on:eventType.modify = eventFnName
类型：
.stop : 阻止冒泡行为
.prevent ：阻止浏览器默认行为
.capture ：阻止捕获行为
.self ：自身触发
.once ：只执行一次
.passive ：行为结束后触发（scroll）
按键修饰符（键盘事件 keyup keydown keypress）
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符
1. 全局修改
  Vue.config.keyCodes.自定义修饰符 = 键盘码
  使用：
  @keyup.自定义修饰符 = eventFnName
2. 自定义事件(自定义事件类型)
  如何定义？
  1. 使用new Vue() 的到的实例来定义
    vm.$on(eventName,callback)
  2. 如何触发呢？
    vm. $e m i t (e v e n t N a m e) t h i s .$ emit(eventName)
    事件中留有一个知识点：
    原生事件调用

例：

<div id="app">
    <button @click = 'destory'> 销毁 </button>
    <div 
      @click.self = "bigHandler"
      v-if = "f"
    >
      <p @click.stop = 'smallHandler'></p>
    </div>
    <!-- <input type="text" @keyup.space = "submitHandler"> -->
    <input type="text" @keyup.p = "submitHandler">

    <h3>自定义事件</h3>
    <button @click = "myEventHandler">
      my-event
    </button>
  </div>
</body>
<script>
  Vue.config.keyCodes.P = 80
  var vm = new Vue({
    data: {
      f:true
    },
    methods: {
      bigHandler(e){
        alert('bigger')
      },
      smallHandler(e){
       alert('small')
      //  e.stopPropagation()
      },
      submitHandler(){
        alert('keyup')
      },
      destory(){
        this.f = !this.f
      },
      myEventHandler(){
        this.$emit('my-event')
        console.log('events')
      }
    }
  }).$mount('#app')
  vm.$on('my-event',function(){
    console.log('自定义事件')
  })
  // vm.$emit('my-event')
</script>

5. 单项和双向数据绑定

单项数据绑定：

概念；
将数据和属性进行绑定，也就是原生身上的属性的值就是数据
格式
v-bind:attr = data
简写：
:attr = data
数据更改，视图就更新

例：

<body>
  <div id="app">
    <input type="text" v-bind:value="msg">
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    }
  })
</script>

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

格式：
v-model:attr=data
简写：可以省略属性
v-model=data
特别强调：
v-model用于表单， v-model默认绑定了value属性

例：

<body>
  <div id="app">
    <input type="text" v-model="msg">
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    }
  })
</script>

需求：使用单项数据绑定实现双向数据绑定？
提示：v-bind实现v-model

<body>
<div id="app">
<input type="text" v-bind:value = "msg" @input = "inputHandler">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello 大哥'
},
methods: {
inputHandler(e){
// console.log( e )
this.msg = e.target.value
}
}
})
</script>

6. class && style

7. 计算属性

总结：

数据修改了，视图就会更新，这个现象就叫做，数据驱动视图渲染
Vue是由两大内容构成
指令
组件
指令
vue中使用v-xxx来表示一个指令，这个指令写在标签的属性中
属性中不写 mustache语法，内部中要写的
如果 new Vue(options)如果没有el选项，那么我们可以手动进行模板装载，
new Vue().$mount(’#app’)