vue模板语法、列表渲染、条件渲染、事件、单项和双向数据绑定

Z时代
2024-01-10
分类：综合

vue

1.vue.js源代码

. vue.js源代码

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

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

底层代码封装
- 匿名函数作用
  1. 确定vue.js这个库的使用方法
    - 直接将Vue当做全局的一个方法使用，因为将Vue挂在了 window
    - 使用了amd来定义vue.js这个库为一个模块，这样我们才能模块化引入
  2. 封装库如何定义

2.模板语法

alert console.log 不能用

if条件改成使用三元表达式

<p>
if:{{ bool?num:str }}
</p>

方法一定要写在methods里面，不要直接写在模板语法中

模板语法中支持使用匿名函数可以直接写

<p> fun: {{ (function(){ return 1+1 })() }}</p>

3.列表渲染

v-for指令

v-for = " xxx in data "

如：

<div id="app">
<ul>
    <li v-for = " (item,index) in arr">
        {{ item }}---{{ index }}
    </li>
</ul>
</div>
new Vue({
    el: "#app",
    data: {
        arr: [1, 2, 3, 4],
    }
})

对象：

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

如：

<div id="app">
<ul>
    <li v-for = "(index,item,key) in obj">     
            {{ index }}----{{ item }} -- {{ key }}
    </li>
</ul>
</div>
new Vue({
    el: "#app",
    data: {
            obj: {
                id: 1,
                name: '王麻子',
                age: 50
            },
    }
})

嵌套函数

<ul>
    <li v-for = "item in json">
        <ul>
            <li v-for = "item in item">
                {{ item }}
            </li>
        </ul>
    </li>
</ul>
new Vue({
    el: "#app",
    data: {
json: [
    {
        card: 1,
        name: '齐天润',
        age: 20
    },
    {
        card: 2,
        name: '段云凤',
        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++ ){
    }
}

3.条件渲染

两种：

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>

4.事件

事件基础内容：

属性绑定

<div onClick = "alert"></div>
function alert(){
alert('hello vue.js')
}

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. 事件处理函数

1. 事件的添加

<button v-on:click = "changeMsg">
    {{ msg }}
</button>
new Vue({
    el: '#app',
    data: {
        msg: 'hello vue.js'
    },    
    methods: { 
       changeMsg(){
            this.msg = 'hello 我骏哥~~~'
        },
    }
})

2. 事件传参

<button @click = "argHandler('hello 骏哥~~~')">
        eventArgument
</button>
new Vue({
    el: '#app',
    data: {
        msg: 'hello vue.js'
    },    
    methods: {
        argHandler(value){
            alert(value)
        },
    }
})

3.事件对象

<button @click = "eventHandler">
    event
</button>
new Vue({
    el: '#app',
    data: {
        msg: 'hello vue.js'
    },    
    methods: {
        eventHandler(e){
        console.log(e)
        },
    }
})

4.事件多个参数

需求

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

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

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

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


<button @click = "evHandler('骏哥',$event)">
args
</button>
new Vue({
    el: '#app',
    data: {
        msg: 'hello vue.js'
    },    
    methods: {
        evHandler(arg,e){
            console.log(arg)
            console.log(e)
        }
    }
})

总结：

vue使用第一种事件添加的形式 —》 v-on

格式：

v-on:eventType = eventFnName

简写：

@eventType = eventFnName

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

书写步骤：

先写方法，再去绑定

5.事件高级

1. 事件修饰符

举例：事件冒泡

通过举例告诉大家， e.stopPropagation()这个代码的复用性差

所以vue这边有一个解决方案：使用事件修饰符(modify)

格式：

* v-on:eventType.modify = eventFnName

<p @click.stop = 'smallHandler'></p>

类型：

.stop : 阻止冒泡行为

.prevent ：阻止浏览器默认行为

.capture ：阻止捕获行为

.self ：自身触发

.once ：只执行一次

.passive ：行为结束后触发（scroll）

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

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.down

.left

.right
3. 自定义按键修饰符
1. 全局修改
* Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
* @keyup.自定义修饰符 = eventFnName
4. 自定义事件(自定义事件类型)
如何定义？
1. 使用new Vue() 的到的实例来定义
* vm. $o n (e v e n t N a m e, c a l l b a c k) 2. 如何触发呢？ * v m . on(eventName,callback)2. 如何触发呢？* vm.$ on(eventName,callback)2.如何触发呢？∗vm.emit(eventName)
* this.$emit(eventName)

6.单项数据绑定：

概念；
将数据和属性进行绑定，也就是原生身上的属性的值就是数据

格式
v-bind:attr = data
简写：
:attr = data
数据更改，视图就更新

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

双向数据绑定

数据改变，视图更新，

视图改变，数据更新

格式：
v-model:attr=data
简写：可以省略属性
v-model=data

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


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

以上是 vue模板语法、列表渲染、条件渲染、事件、单项和双向数据绑定的全部内容，来源链接： utcz.com/z/375317.html

vue模板语法、列表渲染、条件渲染、 事件、单项 和 双向数据绑定