• Vue(二)——基本操作


    使用步骤

    1. 导入vue.js的script脚本文件
    2. 在页面中声明一个将被vue所控制的DOM区域
    3. 创建vm实例对象

    el

    vue控制父元素下面的子元素,el就是他们的父元素。

    指令

    v-text

    //把username对应的值渲染到p标签中
    <p v-text="username"></p>
    
    • 1
    • 2

    注意:v-text会覆盖标签里默认的内容

    {{}}插值表达式

    大多是用来当占位符,并且只能在内容节点中

    <p>姓名:{{name}}</p>
    
    • 1

    v-html

    v-text和插值表达式只能渲染纯文本内容,如果把包含HTML标签的字符串渲染为页面的HTML元素,用v-html指令

    <p v-html="discription"></p>
    
    • 1

    属性绑定指令 v-bind(:)

    <input v-bind:placeholder="tips">
    //tips是data里的一个属性值
    
    • 1
    • 2

    v-bind可以简写成

    事件绑定指令v-on(@)

    为DOM元素绑定事件监听,可以简写成@

    <button v-on:click="addCount">+1</button>
    
    • 1
    const vm = new Vue({
    	el:'#app',
    	data: {
    		count:0
    	},
    	methods:{
    		add() {
    			this.count+=1 //this===vm
    		}
    	},
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    传参:

    <button v-on:click="add(1)">+1</button>
    //----------------------------------------------
    methods:{
    	add(n) {
    	this.count+=n
    	}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    event事件对象

    vue内置对象$event,他就是原生DOM的事件对象 e

    <button @click="add($event,1)">+N</button>
    //------------------------------------------------
    methods: {
    	add(n,e) {
    		this.count += n
    		console.log(e)
    	}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    阻止默认行为和冒泡

    什么是冒泡行为
    给里面的绑定了点击事件,当里面的被触发之后会让外层的也触发,我们不想让外层的触发,就要阻止冒泡

    @click.prenvent 阻止默认行为
    @click.stop 阻止事件冒泡

    双向绑定指令v-model

    双向绑定指令针对表单
    用来在不操作DOM的情况下,快速获取表单的数据
    在这里插入图片描述
    data里面的值发生变化时,input标签里面的值也会变化,同时因为v-model,当input标签里的值变化时,data里面的值也变

    • 哪些可以用v-model指令
      在这里插入图片描述
    • v-model 的专用修饰符
      v-model.number="age" .number属性就把输入框里面的值转换成了数字类型
      .trim只会把首尾的空格去掉 中间的不会
      .lazy 就不会实时更新,失去焦点之后才会同步

    条件渲染指令v-if v-show

    <p v-if="networkState === 200">请求成功</p>
    <p v-show="networkState === 200">请求成功</p>
    
    • 1
    • 2

    区别:
    v-if为false时,是动态移除元素,v-show是动态添加了display=none,不移除标签
    如果频繁使用切换功能时,使用v-show
    如果默认不需要被展示,后期才又可能被展示,使用v-if
    (但实际开发中还是用v-if多)

    列表渲染 v-for

    用来基于一个数组来循环一个列表结构
    写在需要循环的li
    并且绑定一个key属性,必须是字符串或数字类型,一般我们就用:key="item.id"

    <ul>
    	<li v-for="(item,index) in list" :key="item.id">索引是{{index}},姓名是{{item.name}}</li>
    </ul>
    //----------------------------------------------
    data: {
    	list:[
    	{id:1,name:'zs'},
    	{id:2,name:'ls'},
    	]
    },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    key注意事项:

    1. key的值只能是字符串或数字类型
    2. 必须具有唯一性(即:key的值不能重复)
    3. 建议把数据项的id作为key的值
    4. 使用index作为key的值没有任何意义(因为index的值不具有唯一性)
    5. 使用v-for指令时一定要指定key的值
  • 相关阅读:
    node.js及npm的基本理解
    【ARM】Linux内核驱动之I2C线驱动,测试MPU6050
    内行才知道的大数据分析平台
    基于JavaSwing开发餐厅点餐系统(购物,购物车,订单) 课程设计 大作业源码 毕业设计
    JVM第十八讲:调试排错 - Java 问题排查之工具单
    时间复杂度和空间复杂度详解
    Echarts的配置修改
    腾讯云视频点播
    剑指offer 23. 反转链表
    1160 队列安排
  • 原文地址:https://blog.csdn.net/rjlmylover_zyw/article/details/125834555