vue.js基础语法

vue基础语法

模板语法

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

<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?str:num}}
</p>
</div>

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
                },
        }
})

列表渲染

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

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

如果需要 索引 index
v-for = "(item,index) in data " {{ item }} — {{ index }}

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

对象：
v-for = “(index,item,key) in obj”

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

json：

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

总结:

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

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

4. v-for 可以循环 数字或是一个字符

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


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

扩展：
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 vs 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. 事件处理函数

vue使用第一种事件添加的形式-- - 》v - on
格式：
v - on: eventType = eventFnName

<button v-on:click="changeMsg">
        {{ msg }}
</button>
//
changeMsg() {
        this.msg = 'hello 我骏哥~~~'
},

简写：
@eventType = eventFnName

<h3> 事件传参 </h3>
<button @click="argHandler('hello 骏哥~~~')">
        eventArgument
</button>

<h3> 事件对象 </h3>
<button @click="eventHandler">
        event
</button>
//
argHandler(value) {
        alert(value)
},
eventHandler(e) {
        console.log(e)
},

事件处理函数写在配置项中 methods中
书写步骤：
先写方法， 再去绑定
需求：
我们有一个方法， 这个方法中有两个参数， 第一个参数是自定义参数， 第二个参数是事件对象
问题： 第二个参数 事件对象 = undefined
原因： 当我们自定义参数后， 系统无法自动识别， 是不是事件对象
解决： 传入事件对象的实际参数： $event

<h3> 事件多个参数 </h3>
<button @click="evHandler('骏哥',$event)">
        args
</button>
//
evHandler(arg, e) {
        console.log(arg)
        console.log(e)
}

事件修饰符

---

举例：事件冒泡
通过举例告诉大家， e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案： 使用事件修饰符(modify)
格式：
v-on:eventType.modify = eventFnName

<button @click='destory'> 销毁 </button>

<div @click.self="bigHandler" v-if="f">
        <p @click.stop='smallHandler'></p>
</div>
//
bigHandler(e) {
        alert('bigger')
},
smallHandler(e) {
        alert('small')
        // e.stopPropagation()
}, destory() {
        this.f = !this.f
},

类型：

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

键盘修饰符（ 键盘事件 keyup keydown keypress）

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<input type="text" @keyup.p="submitHandler">
//
submitHandler() {
     alert('keyup')
},

自定义按键修饰符

1. 全局修改

Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
@keyup.自定义修饰符 = eventFnName

自定义事件(自定义事件类型)

如何定义？

1. 使用new Vue() 的到的实例来定义
   vm.$on(eventName,callback)
2. 如何触发呢？
   vm.$emit(eventName)this.$emit(eventName)

1.  vm.$on('my-event', function() {
          console.log('自定义事件')
   })
2.  <button @click="myEventHandler">
          my-event
    </button>
3.  myEventHandler() {
          this.$emit('my-event')
          console.log('events')
}

单项 双向数据绑定

1. 单项数据绑定：
   1. 概念；
      将数据和属性进行绑定， 也就是原生身上的属性的值就是数据
   2. 格式
      v-bind:attr = data
      简写：
      :attr = data
      数据更改 ， 视图就更新
2. 双向数据绑定
   数据改变， 视图更新，
   视图改变， 数据更新
   1. 格式：
      v-model:attr=data
      简写：可以省略属性
      v-model=data
   2. 特别强调：
      v-model用于表单， v-model默认绑定了value属性
      需求： 使用单项数据绑定实现双向数据绑定？

提示：

    <div id="app">
        <input type="text" v-bind:value="msg" @input="dobu">
        <input type="text" v-model="msgmodel">
    </div>  
//
    new Vue({
            data: {
                    msg: 'hello vue.js',
                    msgmodel: 'model'
            },
            methods: {
                    dobu(e) {
                    this.msg = e.target.value
            }
    }
    }).$mount('#app');