Vue.js进阶之路2

一、模板语法(mustache)

模板语法是什么?

<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>

以上代码中的{{ }}就是模板语法了

特点:

• 双大括号语法 {{}}
• 支持js语法
• alert console.log 不能用 (报错)
• if条件改成使用三元表达式
• 方法一定要写在methods里面， 不要直接写在模板语法中
• 模板语法中支持使用匿名函数可以直接写

二、列表渲染

什么是列表渲染?

在我们平常获得数据后向相同的结构里输送例如ul下的li,更具体一点就是商品列表中每个商品的详细数据,我们以前会用for循环或者forEach等遍历出来,然后借助模板字符串拼接就像下面那样

~~~等待补充啦~~~~

但在Vue.js里对这些进行了处理我们通常借助v-for指令来完成,那么v-for到底怎么用呢?

格式:

v-for = " xxx in data "
{{ }}

xxx:可以是任何东西,由自己随意取名

data:数据

如果需要的话可以用 索引 index(也不是固定的可以随意改变)

在来案例前先写出配置项(options):

  new Vue({
    el: '#app',
    data: {
      arr: ['a','b','c'],
      obj: {
        id: 1, 
        name: '张三',
        age: 50
      },
      json: [{
                name: 'llf',
                age: 80,
                sex: 'nan'
            }, {
                name: 'xjj',
                age: 90,
                sex: 'nv'
            }]
    }
  })

来看下面的案例

数组的列表渲染:

<ul>
      <li v-for = " item in arr ">
        {{ item }}
      </li>
</ul>

输出:

带有索引的数组(arr)的列表渲染:

<ul>
      <li v-for = " (item,index) in arr ">
        {{ item }}---{{ index }}
      </li>
</ul>

输出:

注意:v-for中参数item一定在索引index前

对象(obj)的列表渲染:

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

输出:

注意:对应输出的话,键值对中的值(value)属性一定在最前,键(key)在后面,记住这个索引(index)不是对象中的index,可以理解为自动生成的给他们编号用的

json的列表渲染:

<ul>
  <li v-for="(item,index) in json">
     {{item.name}}==={{item.sex}}==={{item.age}}====index:{{index}}
   </li>
</ul>

输出:

注意:index同上

嵌套循环的列表渲染:

<ul>
      <li v-for="item in json">
          <ul>
             <li v-for="value in item">
                    {{value}}
              </li>
           </ul>
       </li>
</ul>

输出:

循环输出一个数字:

 <ul>
    <li v-for="item in 6">
         {{item}}
    </li>
</ul>

输出:

循环输出一个字符串:

<ul>
     <li v-for="item in '我是你爸爸'">
        {{item}}
     </li>
</ul>

输出:

列表渲染总结:

1. v-for 最多可以有三个参数
2. 格式:v-for = "(index,item,key) in data"
3. v-for如果有循环嵌套， 那么value可以写成一样的命名， 但是我们建议大家写成不一样的命名， 理由： 比较语义化
4. v-for 可以循环 数字或是一个字符

格式中的名词解释:

• index: 索引
• item； data中的每一个
• key； 如果是对象， 表示对象的key

拓展:v-for = ' item in data'的底层实现

底层:

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

三、条件渲染

什么是条件渲染?

条件渲染就像我们平常js里用的if,else,else if啊这些之类。

但是在Vue.js中我们用v-if,v-else-if,v-else等指令来完成;下面先配置一个app配置项

new Vue({
        el: '#app',
        data: {
            f: false,
            text: '3'
        },
        method: {

        }
    })

if的单路分支:

<!-- 取决于f的布尔值,f为true则存在,f为false则不存在 -->
<p v-if="f">v-if</p>
<!-- v-show直接操作的是display属性 -->
 <p v-show="f">v-show</p>

上面的代码中是两个简单的单路分支,f是data里的一个数据,该数据为布尔值,值为false,在v-if下,翻译为,如果为false则该元素不存在

if的双路分支：

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

if的多路分支：

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

四、事件

原生js事件基础内容：

1. 属性绑定
        <div onClick = "alert"></div>
        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'
          }

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

有上得出:vue使用第一种事件添加的形式 ---》 v-on

格式:v-on:eventType = eventFnName

简写:@eventType = eventFnName

事件处理函数写在配置项中 methods中

书写步骤:先写方法， 再去绑定

场景模拟:

我们有一个方法， 这个方法中有两个参数， 第一个参数是自定义参数， 第二个参数是事件对象

问题：第二个参数 事件对象 = undefined\

原因： 当我们自定义参数后， 系统无法自动识别 ， 是不是事件对象

解决： 传入事件对象的实际参数： $event

<div id="app">
    <h3> 事件添加 </h3>
    <button v-on:click = "changeMsg">
      {{ msg }}
    </button>
    <button @click = "changeMsg">
      {{ msg }}
    </button>
    <hr>
    <h3> 事件传参 </h3>
    <button @click = "argHandler('hello 骏哥~~~')">
      eventArgument
    </button>
    <hr>
    <h3> 事件对象 </h3>
    <button @click = "eventHandler">
      event
    </button>
    <hr>
    <h3> 事件多个参数  </h3>
    <button @click = "evHandler('骏哥',$event)">
      args
    </button>
  </div>

new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    },
    methods: {
      /* 一个key 就是一个方法 */
      changeMsg(){
        this.msg = 'hello 我骏哥~~~'
      },
      argHandler(value){
        alert(value)
      },
      eventHandler(e){
        console.log(e)
      },
      evHandler(arg,e){
        console.log(arg)
        console.log(e)
      }
    }
 })

五、事件高级部分

事件修饰符

举例：事件冒泡
通过举例告诉大家， 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. 全局修改
2. 自定义事件(自定义事件类型)

全局:

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

自定义事件:

如何定义?

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

vm.$on(eventName,callback)

• 如何触发呢？

vm.$emit(eventName)
this.$emit(eventName)