Vue笔记（一）

一、Vue

（一）Vue是什么

（二）创建一个Vue实例

el指定挂载点

data提供数据

2.创建一个Vue实例

（1）准备容器（Vue所管理的范围）（如div）

(2)引包（官网）分为开发版本生产版本

(3)创建Vue实例，new Vue()

(4)指定配置项->渲染数据：el指定挂载点 data提供数据

eg.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建Vue实例，初步渲染
         1.准备容器     
    -->
         <div id="app">
            <!-- 这里将会编写一些用于渲染的逻辑代码 -->
            <h2>{
  
  {msg}}</h2>
            <a href="">{
  
  {count}}</a>
         </div>
 
 
         <!-- 2.引包，引入开发版本包 -->
         <script src="../js/vue.js"></script>
         <script>
            // 一旦引入VueJS核心包，在全局环境就有了Vue构造函数
            const app=new Vue({
                // 通过el配置选择器，指定Vue管理的是哪个盒子
                el:'#app',
                // 通过data提供被渲染的数据
                data:{
                    msg:'Hello world',
                    count:123
                }
            })
         </script>
</body>
</html>

(三)插值表达式

1.{ {}}没有解析能力

表达式，可以被求的代码值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值表达式</title>
</head>
<body>
    <!-- 
    插值表达式{
  
  {}}
    插值表达式是一种Vue的模板语法
        1.作用:利用表达式进行插值，渲染到页面中
            表达式:是可以被求值的代码，JS引擎会将其计算出一个结果
        2.语法:{
  
  { 表达式 }}
            <p>{
  
  { title }}</p>
            <p>{
  
  { nickname.toUpperCase() }}</p>
            <p>{
  
  { age >= 18 ? '成年' : '未成年' }}</p>
            <p>{
  
  { obj.name }}</p>
        3.注意点: 
            (1)使用的数据必须存在(data) 
            (2)支持的是表达式，而非语句，比如:if for... 
            错误：<p>{
  
  { if }}</p>
            (3)不能在标签属性中使用{
  
  {}}插值
            错误：<p title="{
  
  { username }}">我是p标签</p>
    -->
    <div id="app">
        <p>{
  
  { nickname }}</p>
        <p>{
  
  { nickname.toUpperCase() }}</p>
        <p>{
  
  { nickname + '你好' }}</p>
        <p>{
  
  { age >= 18 ? '成年' : '未成年' }}</p>
        <p>{
  
  { friend.name }}</p>
        <p>{
  
  { friend.desc }}</p>
    </div>
 
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    desc: '热爱学习 Vue'
                }
            }
        })
    </script>
</body>
</html>

（四）Vue响应式特性

1.data数据： ☛☛☛响应式数据 ☛☛☛数据变化了，视图自动更新

①访问："实例，属性名"，如：app,msg

②修改："实例，属性名"，如：app,count+f

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {
  
  {msg}}
        {
  
  {count}}
 
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                //响应式数据  数据变化了，视图自动更新
                msg:'你好，黑马',
                count:100
            }
        })
    </script>
</body>
</html>

二、指令

（一）v-html

1.Vue指令

Vue会根据不同的【指令】，针对标签实现不同的【功能】

指令:带有 v- 前缀的特殊标签属性

Vue指令: v- 前缀的标签属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令初识和v-html</title>
</head>
<body>
    <!-- 
            <div v-html="str"></div>
                v-html:
                作用:设置元素的innerHTML
                语法: v-html = "表达式"
    -->
    <div id="app">
        <div v-html="msg"></div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: `
                    <a href="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
                        黑马程序员    
                    </a>
                `
            }
        })
    </script>
</body>
</html>

（二）v-show和v-if

v-show

1.作用：控制元素显示隐藏

2.语法：v-show=" 表达式 " 表达式值 true显示，false隐藏

3.原理：切换display：none 控制显示隐藏

4.场景：频繁切换显示和隐藏的场景

v-if

1.作用：控制元素显示隐藏（条件渲染）

2.语法：v-if=" 表达式 " 表达式值 true显示，false隐藏

3.原理：基于条件判断，是否创建或移除节点

4.场景：要么显示，要么隐藏，不频繁切换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            border: 5px solid black;
            margin-bottom: 20px;
            text-align: center;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
        }
    </style>
</head>
<body>
   <div id="app">
    <div v-show="flag" class="box">v-show控制</div>
    <div v-if="flag" class="box">v-if控制</div>
   </div>
   <script src="../js/vue.js"></script>
   <script>
    const app=new Vue({
        el:'#app',
        data:{
            flag:false
        }
    })
   </script>
</body>
</html>

（三）v-else和v-else-if

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令_v-else和v-else-if</title>
</head>
<body>
    <!-- 
    Vue指令 v-else v-else-if
        1.作用:辅助 v-if 进行判断渲染
        2.语法:v-else v-else-if="表达式" 
        3.注意:需要紧挨着 v-if 一起使用
    -->
    <div id="app">
        <p v-if="gender === 1">性别：♂ 男</p>
        <p v-else>性别：♀ 女</p>
        <hr>
        <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
        <p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
        <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
        <p v-else>成绩评定D：惩罚一周不能玩手机</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                gender: 1,
                score: 80
            }
        })
    </script>
</body>
</html>

2.作用：辅助v-if 进行渲染判断

3.语法：v-else v-else-if=" 表达式 "

4.注意：需要紧挨着 v-if 一起使用

（四）v-on-内联语句

（五）v-on-methods处理函数

（六）v-on-调用传参

总结

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令_v-on语法</title>
</head>
<body>
    <script src="./vue.js"></script>
    <!-- 
    Vue指令 v-on 
        1.作用:注册事件 = 添加监听 + 提供处理逻辑
        2.语法: 
            1. v-on:事件名="内联语句"
            <button v-on:click="count++">按钮</button>
            2. v-on:事件名="methods中的函数名" 
            <button v-on:click="fn">按钮</button>
        3.简写:@事件名
        4.注意:methods函数内的this指向Vue实例
    -->
 
    <div id="app">
        <!-- 内联语句 -->
        <!-- v-on: 可以替换为 @ -->
        <button v-on:click="count--">-</button>
        <span>{
  
  { count }}</span>
        <button @click="count++">+</button>
 
        <br>
 
        <!-- 配置methods函数 -->
        <button @click="fn">切换显示隐藏</button>
        <h1 v-show="isShow">黑马程序员</h1>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 100,
                isShow: true
            },
            methods: {
                fn(){
                    // app.isShow = !app.isShow
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>

（七）v-for的key

（八）v-model

1.当有两个或多个单选框，只能选一个的时候，给单选框都加上统一的name属性

value: 给单选框加上 value 属性，用于提交给后台的数据

结合 Vue 使用☛☛☛ v-model

option 需要设置 value 值，提交给后台
select 的 value 值，关联了选中的 option 的 value 值

结合 Vue 使用☛☛☛ v-model

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令_v-model</title>
</head>
<body>
    <!-- 
    Vue指令 v-model 
      1.作用:给 表单元素 使用，双向数据绑定 → 可以快速 获取 或 设置 表单元素内容
          1数据变化→视图自动更新
          2视图变化→数据自动更新
      2.语法:v-model='变量'
    -->
    <div id="app">
        账户：<input type="text" v-model="username"><br><br>
        密码：<input type="password" v-model="password"><br><br>
        <button @click="login">登录</button>
        <button @click="reset">重置</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '魏巍',
                password: '123'
            },
            methods: {
                login () {
                    console.log(this.username, this.password)
                },
                reset () {
                    this.username = ''
                    this.password = ''
                }
            }
        })
    </script>
</body>
</html>

（九）v-bind

1.作用:动态的设置html的标签属性→ src url title ...

2.语法: v-bind:属性名="表达式"

3.注意:简写形式: :属性名='表达式'

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令_v-bind</title>
</head>
<body>
    <!-- 
    Vue指令 v-bind
        1.作用:动态的设置html的标签属性→ src url title ...
        2.语法: v-bind:属性名="表达式"
        3.注意:简写形式: :属性名='表达式'
    -->
    <div id="app">
        <!-- <img v-bind:src="imgUrl" v-bind:title="msg" alt=""> -->
        <!-- v-bind可省略掉 -->
        <img :src="imgUrl" :title="msg" alt="">
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrl: './imgs/稻.jpg',
                msg: '稻'
            }
        })
    </script>
</body>
</html>

（十）v-for

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令_v-for</title>
</head>
<body>
    <!-- 
    Vue指令 v-for 
        1.作用:基于数据循环，多次渲染整个元素 → 数组、对象、数字...
        2.遍历数组语法: 
            v-for="(item, index) in 数组" 
            item 每一项，index 下标
            省略 index: v-for="item in 数组"
    -->
    <div id="app">
        <h3>小黑水果店</h3>
        <ul>
            <li v-for="(item, index) in list">
                {
  
  { item }} - {
  
  { index }}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: ['西瓜','苹果','鸭梨','榴莲']
            }
        })
    </script>
</body>
</html>

总结

三、案例

（一）波仔的学习之旅

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_波仔的学习之旅</title>
    <style>
        img {
            width: 400px;
            height: 225px;
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-show="index > 0" @click="index--">上一页</button>
        <div>
            <img :src="list[index]" alt="">
        </div>
        <button v-show="index < list.length - 1" @click="index++">下一页</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                index: 3,
                list: [
                    './imgs/稻.jpg',
                    './imgs/烟花.jpg',
                    './imgs/niko.jpg',
                    './imgs/oneshot.jpg',
                    './imgs/Phigros.jpg',
                    './imgs/Stardew Valley.jpg'
                ]
            }
        })
    </script>
</body>
</html>

（二）小黑的书架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_小黑的书架</title>
</head>
<body>
    <div id="app">
        <h3>小黑的书架</h3>
        <ul>
            <li v-for="(item, index) in booksList" :key="item.id">
                <span>{
  
  { item.name }}</span>
                <span>{
  
  { item.author }}</span>
                <!-- 注册点击事件 通过id删除数组中的对应项 -->
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                booksList: [
                    {id: 1, name: '《红楼梦》', author: '曹雪芹'},
                    {id: 2, name: '《西游记》', author: '吴承恩'},
                    {id: 3, name: '《水浒传》', author: '施耐庵'},
                    {id: 4, name: '《三国演义》', author: '罗贯中'}
                ]
            },
            methods: {
                del (id){
                    // 通过id删除数组中的对应项 => filter（不会改变原数组）
                    // filter:根据条件，保留满足条件的对应项，得到一个新数组
                    this.booksList = this.booksList.filter(item => item.id !== id)
                }
            }
        })
    </script>
</body>
</html>

（三）小黑记事本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_小黑记事本</title>
</head>
<body>
    <section id="app">
    <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="todoName" placeholder="请输入任务" class="new-todo">
        <button @click="add" class="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item, index) in list" :key="item.id">
                <div class="view">
                    <span class="index">{
  
  { index + 1 }}.</span> <label>{
  
  { item.name }}</label>
                    <button @click="del(item.id)" class="destroy"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length > 0">
        <!-- 统计 -->
        <span class="todo-count">合 计：<strong> {
  
  { list.length }} </strong></span>
        <!-- 清空 -->
        <button @click="clear" class="clear-completed">
            清空任务
        </button>
    </footer>
</section>
 
    <!-- 底部 -->
    <script src="./vue.js"></script>
    <script>
        // 添加功能
 
        const app = new Vue({
            el: '#app',
            data: {
                todoName: '',
                list: [
                    { id: 1, name: '跑步一公里' },
                    { id: 2, name: '跳绳200次' },
                    { id: 3, name: '游泳100米' }
                ]
            },
            methods: {
                del (id) {
                    this.list = this.list.filter(item => item.id !== id)
                },
                add () {
                    if (this.todoName.trim() === '') {
                        alert('请输入任务名称')
                        return
                    }
                    this.list.unshift({
                        id: +new Date(),
                        name: this.todoName
                    })
                    this.todoName = ''
                },
                clear () {
                    this.list = []
                }
            }
        })
    </script>
</body>
</html>