IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue2.x-day01 -> 正文阅读

[JavaScript知识库]Vue2.x-day01

文章目录

day01

01.第一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <p v-text="msg"></p>
    <hr>
    <p>姓名：{{username}}</p>
    <p>性别：{{sex}}</p>
    <hr>
    <div v-text="info"></div>
    <div>{{info}}</div>
    <hr>
    <div v-html="info"></div>
</div>


<script src="js/vue.js"></script>
<script type="text/javascript">
    const vm=new Vue({
        //el时固定写法，表示当前vm实例要控制页面上的哪个区域，接收值是一个选择器
        el:'#box',
        //data对象就是要渲染到页面上的数据
        data:{
            msg:'hello vue',
            username:'张三',
            sex:'女',
            info:'<h4 style="color: red;font-weight: bold">hello vue.js</h4>'
        }
    })
</script>
</body>
</html>

02.内容渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="box">
  <p v-text="msg"></p>
  <hr>
  <p>姓名：{{username}}</p>
  <p>性别：{{sex}}</p>
  <hr>
  <div v-text="info"></div>
  <div>{{info}}</div>
  <hr>
  <div v-html="info"></div>
</div>


<script src="js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    //el时固定写法，表示当前vm实例要控制页面上的哪个区域，接收值是一个选择器
    el:'#box',
    //data对象就是要渲染到页面上的数据
    data:{
      msg:'hello vue',
      username:'张三',
      sex:'女',
      info:'<h4 style="color: red;font-weight: bold">hello vue.js</h4>'
    }
  })

</script>
</body>
</html>

03.属性绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-bind:placeholder="tips">
    <hr>
    <!--vue规定v-bind可以简写为':'-->
    <img v-bind:src="photo"  style="width: 100px">
</div>
<script src="js/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            tips:'请输入用户名',
            photo:'https://www.runoob.com/wp-content/uploads/2017/01/vue.png',
        }
    })
</script>
</body>
</html>

04.Javascript表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h1>1+2的结果是{{1+2}}</h1>
  {{number+1}}
  <hr>
  {{ok?'YES':'NO'}}
  <hr>
  {{msg}}的反转结果是：{{msg.split('').reverse().join('')}}
  <hr>
  <div :title="'box'+index">这是一个div</div>
  <hr>
</div>

<script src="js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      number:1,
      ok:1,
      msg:'hello vue',
      index:3
    }
  })
</script>
</body>
</html>

05.事件绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>count的值为{{count}}</h3>
    <!--语法格式为 v-on:事件名称="事件处理函数的名称"-->
    <!--v-bind指令可以简写为@-->
    <button @click="addCount(2)">+</button>
    <button @click="sub(1)">-</button>
</div>

<script src="js/vue.js"></script>
<script>
    const vm=new Vue({
        //vm控制哪个区域
        el:'#app',
        //数据源
        data:{
            count:0,
        },
        //定义事件的处理函数
        methods:{
            addCount (n) {
                this.count+=n
            },
            sub(n){
                this.count-=n
            }
    }
    })
</script>
</body>
</html>

06.事件对象$event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>count的值是：{{count}}</p>
<!--如果点击数为偶数，背景色变为红色-->
    <button @click="add()">+n</button>
    <!--vue提供了内置变量，$event，它就是原生DOM的事件对象，如果默认的事件对象e被覆盖了，则可以手动传递一个$event-->
    <button @click="add(1,$event)">+n</button>
</div>
<script src="js/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            add(n,e){
                this.count+=1
                //判断
                if(this.count%2==0){
                    e.target.style.backgroundColor='red'
                }else {
                    e.target.style.backgroundColor='green'
                }
            }
        }
    })
</script>
</body>
</html>

07.事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--@click.prevent绑定事件的同时阻止默认行为-->
  <a href="http://www.baidu.com" @click.prevent="show">百度</a>
  <hr>
  <div style="height:150px;background-color:orangered;padding-left: 100px;line-height: 150px;" @click="divHandler">
    <button @click="btnHandler">按钮</button>
  </div>
</div>
<script src="js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{},
    methods:{
      show(e){
        e.preventDefault()
        console.log('点击了a链接')
      },
      divHandler(){
          console.log('divHandler')
      },
      btnHandler(e){
        e.stopPropagation()
          console.log('btnHandler')
      }
    }

  })
</script>
</body>
</html>

08.按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--默认存在事件对象e-->
  <input  @keyup.esc="clearInput">
  <input  @keyup.enter="commitAjax">

</div>
<script src="js/vue.js"></script>
<script>
  const  vm=new Vue({
    el:'#app',
    data:{},
    methods:{
      /*可以通过e访问到事件的源*/
      clearInput(e){
        console.log('触发了clearInput函数')
        e.target.value=''
      },
      commitAjax(e){
        console.log('触发了Ajax函数')
        e.target.value="触发了Ajax函数"
      }
    }
  })
</script>
</body>
</html>

09.双向绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   用户名{{username}} <br>
  <!--v-model是双向绑定-->
  <input type="text" v-model="username">
  <hr>
  <!--v-bind是单向绑定-->
  <input type="text" :value="username"><br>

  <select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">天津</option>
    <option value="4">重庆</option>
  </select>



</div>

<script src="js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      username:'zhangsan',
      city:''
    },
  })
</script>
</body>
</html>

10.v-model的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">=<span>{{n1+n2}}</span><br>
  <input type="text" v-model.number="n1">-<input type="text" v-model.number="n2">=<span>{{n1-n2}}</span><br>
  <input type="text" v-model.number="n1">*<input type="text" v-model.number="n2">=<span>{{n1*n2}}</span><br>
  <input type="text" v-model.number="n1">/<input type="text" v-model.number="n2">=<span>{{n1/n2}}</span><br>

  <!--v-model.trim会自动清除输入框两端空格-->
  <input type="text" v-model.trim="username">
  <button @click="showName()">获取用户名</button>
  <hr>
  <!--change时而非input时更新-->
  <input type="text" v-model.lazy="username">
</div>

<script src="js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      username:'zhangsan',
      n1:1,
      n2:2,
    },
    methods:{
      showName(){
        console.log(`用户名是："${this.username}"`)
      }
    }
  })
</script>
</body>
</html>

11.条件渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <button @click="toggleFlag">移除flag</button>
  <!--v-if 动态移除元素-->
  <p v-if="flag">这是被 v-if 控制的元素</p>
  <!--v-show 通过style="display: none;"隐藏元素-->
  <p v-show="flag">这是被 v-show 控制的元素</p>
</div>
<script src="js/vue.js"></script>
<script>
  const  vm=new Vue({
    el:'#app',
    data:{
      //如果flag为true，则显示被控制的元素，否则隐藏被控制的元素
      flag:true,
    },
    methods:{
        toggleFlag(e){
            this.flag=false
        }
    }
  })
</script>
</body>
</html>

12.v-if配套的指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--这是js代码-->
  <div v-if="type==='A'">优秀</div>
  <div v-else-if="type==='B'">良好</div>
  <div v-else-if="type==='C'">一般</div>
  <div v-else>差</div>
</div>
<script src="js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      type:'A'
    },
  })
</script>
</body>
</html>

13.v-for的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <ul>
        <!--v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为(item, index) in items-->
        <li v-for="(item,index) in list" :key="item.id" style="list-style: none">索引是:{{index}} id是：{{item.id}} 姓名是：{{item.name}}</li>
    </ul>

    <!--表格优化-->
    <table class="table table-bordered table-hover table-striped" >
        <thead>
            <th>索引</th>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
        </thead>
        <tbody>
        <!--官方建议:只要用到了v-for指令，那么一定要绑定一个 :key属性,而且尽量把id作为key的值-->
        <!--官方对key值类型是有要求的:字符串或者数字类型-->
            <tr v-for="(item,index) in list" :key="item.id" :title="item.name+index">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.tel}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    const  vm=new Vue({
        el:'#app',
        data:{
            list:[//列表数据
                {id:1,name:'张三',age:20,tel:15938882555},
                {id:2,name:'李四',age:20,tel:15938882555},
                {id:3,name:'王五',age:20,tel:15938882555},
                {id:4,name:'孙六',age:20,tel:15938882555},
             ]
        }

    })
</script>
</body>
</html>

14.强调v-for循环中key值的注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="name">
  <button @click="addNewUser">添加</button>

  <!--用户列表区域-->
  <ul>
    <li v-for="(user,index) in users" :key="users.id">
      <input type="checkbox"/>
      姓名:{{user.name}}
    </li>
  </ul>
</div>
<script src="js/vue.js"></script>
<script>
  const  vm =new Vue({
    el:'#app',
    data:{
      users:[
              {id:1,name:'张三'},
              {id:2,name:'李四'},
              {id:3,name:'王五'},
      ]
    },
    methods:{
      addNewUser(){
        this.users.unshift({id:this.nextId,name:this.name})
        this.name=''
      }
    }
  })
</script>
</body>
</html>

15.label的for属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <input type="checkbox" id="cb1">
  <label for="cb1">男</label>
  <hr>
  <input type="checkbox" id="cb2">
  <label for="cb2">女</label>
</div>
<script src="js/vue.js"></script>
<script>
  const vm =new Vue({
    el:'#app',
    data:{}
  })
</script>
</body>
</html>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线（Vue中运用 AntVG6）
Vue事件处理的基本使用
Vue后台项目的记录 （一）
前后端分离vue跨域，devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-27 12:44:50  更:2021-10-27 12:45:34 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/11 14:11:07-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码