for循环一定要指定键么 vue_vue基础使用

最新推荐文章于 2021-02-01 03:44:47 发布

极客有车

最新推荐文章于 2021-02-01 03:44:47 发布

阅读量102

点赞数

文章标签： for循环一定要指定键么 vue

本文链接：https://blog.csdn.net/weixin_36187176/article/details/112224250

版权

vue基础使用

1、指令和插值

1.1插值表达式{{}}

<div id="app">
	<span>{{message}}</span>
</div>

<script>
	var app = new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        }
	})
</script>

注意

插值能写三元表达式，不能是js语句

1.2 v-test

使用 v-text可以往节点中插入属性值,效果和插值类似
代码示例

<div id="app">
	<span v-text="message"></span>
</div>

<script>
	var app = new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        }
	})
</script>

注意

v-text指令虽然和插值都能达到同样的显示效果，但使用场景还是有区别的，如以下场景：

<span>我要显示的内容：{{message}}</span>

上例中span标签内部除了要显示的message，还有额外的文本内容，这里如果使用v-text则会覆盖

<span v-text="message">我要显示的内容：</span>

1.3 v-html

作用

插值和 v-text指令都是将数据解析普通字符串，如果是特殊的html字符串，则使用v-html指令

代码示例

<div id="app">
	<div v-html="message"></div>
</div>

<script>
	var app = new Vue({
        el: "#app",
        data: {
        	// html字符串
            message: "<span>hello vue</span>"
        }
	})
</script>

注意

使用v-html之后，将会覆盖子元素

代码示例

<p v-html='myHtml'>
	<span>子元素：这里的内容将不会在页面展示</span>
	<span>有 xss 风险</span>
</p>

1.4 v-bind

作用

动态改变节点的属性，如id、class、src等等

<div id="app">
	<img v-bind:src="image"/>
	<img :src="image"/>  // v-bind 可以简写为:
</div>

<script>
	var app = new Vue({
        el: "#app",
        data: {
        	// 图片地址来自网络
            image: "https://www.baidu.com/img/baidu_jgylogo3.gif"
        }
	})
</script>

拓展

在v-bind绑定的属性中还可以使用字符串相加

如下，设置标签的背景颜色:

<div id="app">
	<!-- 绑定动态的style,color来自data -->
	<div :style=" 'background:' + color "> 红色的背景 </div>
</div>

<script>
	var app = new Vue({
        el: "#app",
        data: {
        	// 图片地址来自网络
            color: "red"
        }
	})
</script>

1.5v-for

作用

用于列表渲染，使用v-for指令的节点称为循环体。

根据v-for指定的数据渲染出多个循环体的节点, 数据类型通常为数组或对象类型。循环体可配合其他指令展示数据

v-for`循环一共有三种结构

v-for="item in goods"

代码示例

<div id="app">
	<ul>
		<!-- li就是循环体 -->
		<li v-for="item in goods">
			{{item}}
		</li>
	</ul>
</div>

<script>
	var app = new Vue({
        el: "#app",
        data: {
        	// 商品数据类型为数组
            goods: [ "iphone xs", "iphone 8", "iphone 6" ]
        }
	})
</script>

v-for="item in goods"结构指定了循环goods数据, item是循环体的变量代表当前项,in是循环体的关键字。

v-for="item in goods"

代码示例

<div id="app">
	<ul>
		<!-- li就是循环体 -->
		<li v-for="item in goods" :key="item">
			{{item}}
		</li>
	</ul>
</div>

<script>
	var app = new Vue({
        el: "#app",
        data: {
        	// 商品数据类型为数组
            goods: [ "iphone xs", "iphone 8", "iphone 6" ]
        }
	})
</script>

v-for="item in goods"结构指定了循环goods数据, item是循环体的变量代表当前项,in是循环体的关键字。

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

代码示例

<div id="app">
	<ul>
		<!-- li就是循环体 -->
		<li v-for="(item, index) in goods">
			{{index}} {{item}}
		</li>
	</ul>
</div>

// 省略js代码

循环结构中可以使用括号()指定多个变量，第二变量index是数组当前的索引

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

代码示例

<div id="app">
	<ul>
		<!-- li就是循环体 -->
		<li v-for="(item, key, index) in goods" :key='key'>
			<!-- item当前项是对象 -->
			{{index}} {{key}} {{item.price}}
		</li>
	</ul>
</div>
<script>
	var app = new Vue({
        el: "#app",
        data: {
        	// 商品数据类型为对象
            goods: {
                iphonex: {price: 10000},
                iphone8: {price: 8000},
                iphone6: {price: 6000}
            }
        }
	})
</script>

此循环结构用于循环对象数据类型，结构中的key代表的对象的属性

1.6 v-if和v-show

作用

v-if和v-show指令都是通过判断表达式的值来控制页面是否渲染该元素，表达式为true则显示，为false则隐藏，两个指令在隐藏元素所采用的方式有区别

v-if 代码示例

<div id="app">
	<div>是否显示按钮: {{ isShow ? "显示" : "不显示" }}</div>
	<button v-if="isShow">确定</button>
</div>
<script>
	var app = new Vue({
        el: "#app",
        data: {
        	isShow: true
        }
	})
</script>

上例中的数据isShow值是true，所以页面会显示按钮，如果为false则dom结构中不会渲染该元素。

而使用了v-show则dom结构会渲染，只是隐藏方式采用设置css的属性display:none

<button v-show="isShow">确定</button>

注意

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

拓展

不建议在v-for中使用v-if，因为v-for具有比v-if更高的优先级，会渲染多个if出来，频繁的使用v-if会涉及到节点的不断销毁和渲染，影响性能。

2、计算和监听属性

2.1 计算属性 computed

作用

vue除了可以在data中定义数据变量，还可以在computed属性中定义，不一样的是computed中定义的属性值是通过函数返回的

代码示例

<div id="app">
	{{result}}
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        first: 1,
        last: 2
    },
    computed: {
    	// 相当于data中多了一个result属性，只是有computed计算所得
        result: function(){
            return +this.first + +this.last;
        }
    }
})
</script>

注意

1.computed有缓存，data不变不会重新计算

2.computed会监控函数内部的其他变量，当其中某一个变量值发生改变时会重新计算返回新的变量值

3.v-model（双向数据绑定）如果绑定computed里的计算属性，一定要有get和set，否则会报错

<template>
    <div>
        <p>num {{num}}</p>
        <p>double1 {{double1}}</p>
        <input v-model="double2"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 20
        }
    },
    computed: {
        double1() {
            return this.num * 2
            
        },
        double2: {
            get() {
                return this.num * 2
            },
            set(val) {
                this.num = val/2
            }
        }
    }
}
</script>

2.2 监听属性watch

作用

watch属性可以监听某个变量的变化，当该变量发生变化时会执行对应的处理

代码示例

<div id="app">
    <input v-model="first"/> + <input v-model="last"/> 結果: {{ result }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            first: 0,
            last: 0,
            result: 0
        },
        watch: {
            first: function(val){
                this.result = +val + +this.last;
            },
            last: function(val){
                this.result = this.first + +valt;
            },
        }
    })
</script>

2.3 watch深度监听对象

作用

深度监听是针对对象内部的对象发生改变时使用。

这里处理方式和普通监听不一样，普通监听通过函数来处理，深度监听使用对象方式，对象下两个属性 deep,handler

watch: {
    [需要监听的数据]: {
        // 声明了使用深度监听
        deep: true, 
        // 处理函数，val是当前数据， oldVal是数据修改前的值
        handler: function(val, oldVal){ 
        }
    }
}

代码示例

<div id="app">
	{{b.b2.b3}}
</div>
<script>
    var app=new Vue({
        data:{
            a:1,
            b:{
                b2:{
                    b3: 5
                }
            }
        },
        watch:{
            //普通的watch监听
            a: function(val, oldVal){
                console.log("a: "+val, oldVal);
            },
            //深度监听，可监听到对象的变化
            b:{
                deep:true,
                handler: function (val, oldVal) {
                    console.log("b.c: "+val.c, oldVal.c);
                },
            }
        }
    })
	
	// 通过实例对象直接修改
    app.a=2
    app.b.b2.b3 = 2
</script>

注意

computed和watch方法都可以监听变量的变化来作出对应的操作

监听单个变量变化时，并且不需要创建新的变量，可以使用watch
监听多个变量变化时使用使用computed

3、class和style

呃，这两个没啥好说的，注意采用驼峰式写法就好，直接上代码

<template>
    <div>
        <p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
        <p :class="isActive?'black':'yellow'">三目运算符 </p>
        <p :class="[isActive ? 'black' : 'yellow']">数组中三目运算符 </p>
        <p :class="[black, yellow]">使用 class （数组）</p>
        <p :style="styleData">使用 style</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isBlack: true,
            isYellow: true,

            isActive:true,

            black: 'black',
            yellow: 'yellow',

            styleData: {
                fontSize: '40px', // 转换为驼峰式
                color: 'red',
                backgroundColor: '#ccc' // 转换为驼峰式
            }
        }
    }
}
</script>

<style scoped>
    .black {
        background-color: #999;
    }
    .yellow {
        color: yellow;
    }
</style>

4、事件

4.1 v-on

作用

可以用 v-on: 指令监听 DOM 事件。

如点击事件v-on:click="handleClick",值handleClick是点击事件处理函数，在vue实例的methods属性中实现该处理函数

代码示例

<div id="app">
    <button v-on:click="handleClick">确定</button>
</div>
<script>
    var app = new Vue({
    	el: '#app',
      	methods: {
        	handleClick: function (){
            	alert("点击了确定按钮")
        	}
      	}
    })
</script>

缩写

事件绑定v-on:可以缩写成@符号，两者作用相等

<button @click="handleClick">确定</button>

4.2 获取事件对象/事件传递参数

作用

通过事件对象可以获取到当前事件的所有信息，如触发事件的dom节点信息

代码示例

<template>
    <div>
        <p>{{num}}</p>
        <button @click="increment1">+1</button>
        <button @click="increment2(2, $event)">+2</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 0
        }
    },
    methods: {
        increment1(event) {
            // eslint-disable-next-line
            console.log('event', event, event.__proto__.constructor) // 是原生的 event 对象
            // eslint-disable-next-line
            console.log(event.target)
            // eslint-disable-next-line
            console.log(event.currentTarget) // 注意，事件是被注册到当前元素的，和 React 不一样
            this.num++

            // 1. event 是原生的
            // 2. 事件被挂载到当前元素
            // 和 DOM 事件一样
        },
        increment2(val, event) {
            // eslint-disable-next-line
            console.log(event.target)
            this.num = this.num + val
        },
        loadHandler() {
            // do some thing
        }
    },
    mounted() {
        window.addEventListener('load', this.loadHandler)
    },
    beforeDestroy() {
        //【注意】用 vue 绑定的事件，组建销毁时会自动被解绑
        // 自己绑定的事件，需要自己销毁！！！
        window.removeEventListener('load', this.loadHandler)
    }
}
</script>

参数**$event**是模板的关键字, 可传入事件对象给处理函数，再通过事件对象的event.target.value属性获取输入框的值

4.3 事件修饰符

4.3.1 stop 防止事件冒泡

冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外子节点-》父节点的点击事件

<template>
    <div>
     <div class="outer" @click="outer">
      <div class="middle" @click="middle">
       <button @click="inner">点击我(^_^)</button>
      </div>
     </div>
     <p>{{ message }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: '测试冒泡事件' 
        }
    },
    methods: {
        inner(){
            this.message = 'inner： 这是最里面的Button'
        },
        middle(){
            this.message = 'middle: 这是中间的Div'
        },
        outer(){
            this.message = 'outer: 这是外面的Div'
        },
    },
}
</script>

防止冒泡事件的写法是：在点击上加上.stop相当于在每个方法中调用了等同于event.stopPropagation()，点击子节点不会捕获到父节点的事件

<template>
    <div>
     <div class="outer" @click.stop="outer">
      <div class="middle" @click.stop="middle">
       <button @click.stop="inner">点击我(^_^)</button>
      </div>
     </div>
     <p>{{ message }}</p>
    </div>
</template>

4.3.2 prevent取消默认事件

prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。比如我们页面的<a href="#">标签，当用户点击时，通常在浏览器的网址列出#：

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

4.3.3 capture 捕获事件

捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内父节点-》子节点的点击事件

<template>
    <div>
     <div class="outer" @click.capture="outer">
      <div class="middle" @click.capture="middle">
       <button @click.capture="inner">点击我(^_^)</button>
      </div>
     </div>
     <p>{{ message }}</p>
    </div>
</template>

图有侵权，请联系删除！！

4.3.4 `self` 只会触发自己范围内的事件，不会包含子元素。

<template>
    <div>
    	<div class="outer" @click.self="outer">
    		<div class="middle" @click.self="middle">
    			<button @click.self="inner">点击我(^_^)</button>
    		</div>
    	</div>
    	<p>{{ message }}</p>
    </div>
</template>

4.3.5 `once 只执行一次点击`

4.4 键盘修饰符

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

4.5 鼠标修饰符

.left：鼠标左键
.middle：鼠标中间滚轮
.right：鼠标右键

4.6 按键修饰符

.ctrl：即使 Alt 或 Shift 被一同按下也会触发
.ctrl.exact：有且只有Ctrl被按下才触发
.exact：没有任何系统修饰符被按下的时候猜触发

5、表单

<template>
    <div>
        <p>输入框: {{name}}</p>
        <input type="text" v-model.trim="name"/>  //截取前后空格
        <input type="text" v-model.lazy="name"/>  //输完之后才有变化
        <input type="text" v-model.number="age"/> //转化成数字

        <p>多行文本: {{desc}}</p>
        <textarea v-model="desc"></textarea>
        <!-- 注意，<textarea>{{desc}}</textarea> 是不允许的！！！ -->

        <p>复选框 {{checked}}</p>
        <input type="checkbox" v-model="checked"/>

        <p>多个复选框 {{checkedNames}}</p>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>

        <p>单选 {{gender}}</p>
        <input type="radio" id="male" value="male" v-model="gender"/>
        <label for="male">男</label>
        <input type="radio" id="female" value="female" v-model="gender"/>
        <label for="female">女</label>

        <p>下拉列表选择 {{selected}}</p>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>

        <p>下拉列表选择（多选） {{selectedList}}</p>
        <select v-model="selectedList" multiple>
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '双越',
            age: 18,
            desc: '自我介绍',

            checked: true,
            checkedNames: [],

            gender: 'male',

            selected: '',
            selectedList: []
        }
    }
}
</script>

至此，vue的基础使用整理完毕，有落掉的知识，评论留言下，大家相互学习，下一章节，将围绕组件整理，感谢支持！

极客有车

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
for循环一定要指定键么 vue_vue基础使用

vue基础使用1、指令和插值 1.1插值表达式{{}}<div id="app"> <span>{{message}}</span></div><script> var app = new Vue({ el: "#app", data: { message: "hello ...
复制链接

扫一扫

for循环一定要指定键么 vue_vue基础使用

vue基础使用

1、指令和插值

1.1插值表达式{{}}

1.2 v-test

1.3 v-html

1.4 v-bind

1.5v-for

1.6 v-if和v-show

2、计算和监听属性

2.1 计算属性 computed

2.2 监听属性watch

2.3 watch深度监听对象

3、class和style

4、事件

4.1 v-on

4.2 获取事件对象/事件传递参数

4.3 事件修饰符

4.3.1 stop 防止事件冒泡

4.3.2 prevent取消默认事件

4.3.3 capture 捕获事件

4.3.4 self 只会触发自己范围内的事件，不会包含子元素。

4.3.5 once 只执行一次点击

4.4 键盘修饰符

4.5 鼠标修饰符

4.6 按键修饰符

5、表单

4.3.4 `self` 只会触发自己范围内的事件，不会包含子元素。

4.3.5 `once 只执行一次点击`