vue基础

最新推荐文章于 2024-06-19 15:46:35 发布

流川枫不风流

最新推荐文章于 2024-06-19 15:46:35 发布

阅读量70

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/YasWestmere/article/details/128104336

版权

\

1.vue是MVVM设计模式的框架

MVVM设计模式：一种软件架构模式，决定了写代码的方式。
- M：model数据模型(ajax获取到的数据)
- V：view视图（页面）
- VM：ViewModel 视图模型(vue实例)
MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM
- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）
1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

2.基本结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        {{ message }}
        <br>
        {{ name }}
        <br>
        {{ age }}
    </div>

    <script>
        /* 3.初始化vue实例 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)app是调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            el: '#app',
            //data: 要渲染的数据
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
            data: {
                message: 'Hello Vue!',
                name:'坤哥',
                age:32,
            }
        })
    </script>
</body>

</html>

03-Vue的挂载点介绍

el挂载点官方文档传送门：API — Vue.js
1.挂载点el作用：告诉vue实例，你要将data中的数据渲染到哪一个视图
2.注意点
- (1)挂载点可以使用 id选择器（vue推荐使用）类选择器标签选择器
  - 开发中基本上都是id选择器，保证HTML标签唯一性
  - 如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中
- (2)如果选择器选中了多个元素，只会选择第一个元素
- (3)挂载点不能设置为html和body标签（程序报错）

4.vue插值表达式

   <!-- 1.导包 -->
    <script src="./vue.js"></script>
  </head>

  <body>
    <!-- 2.HTML结构 -->
    <div id="app">
       <p>姓名:{{name}}</p>
       <p>年龄:{{age + 1}}</p>
       <p>年龄:{{age >= 18 ? '成年':'未成年'}}</p>
       <p>爱好:{{hobby}}</p>
       <p>爱好:{{hobby[0]}}</p>
       <p>爱好:{{hobby.join('&')}}</p>
       <p>学生:{{student.name}}</p>

    </div>
   
    <script>
      /* 3.初始化配置 */

      let app = new Vue({
        
        el:'#app',
        //data: 数据
        // 1 末班语法(插值语法,本质是字符串替换)  : {{data属性}}
        // 2 支持二元 ,三元运算
        // 3 支持 数组  对象语法
        data: {
          name:'张三',
          age: 18,
          hobby: ['吃','喝','玩'],
          student:{
            name:'哈斯'
          }
        }
      })
    </script>

5.text指令

 <!-- 导包 -->
    <script src="./vue.js"></script>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <p v-text="name">{{age}}</p>
      <p > 鲁迅:{{name}}</p>
    </div>
    <!-- 
        1.学习目标 ：  v-text 指令
        2.学习路线
            a.作用： 设置元素的文本 innerText
            b.与插值表达式区别
                全部更新 : v-text指令, 设置元素innerText .会替换所有的文本
                局部更新 : 插值只会替换{{}} 的文本
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        el:'#app',
        data: {
           name : '鲁迅梭哈',
           age:18

        }
      })
    </script>

6.v-html指令

 <!-- 导包 -->
    <script src="./vue.js"></script>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <p v-text="msg">你好</p>
      <p v-html="msg">你好</p>

    </div>
    <!-- 
        1.学习目标 ：  v-html 指令
        2.学习路线
            作用： 设置元素的innerHTM
            v-html 可以解析标签
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        el:'#app',
        data: {
          msg:'<h1>法硕连读</h1>'
        }
      })
    </script>

7.v-on指令

   <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <button>点我</button>
      <div class="box" v-on:click="doClick" v-on:mouseenter="doEnter"></div>
      <hr />
      <div class="box" @click="doClick" @mouseenter="doEnter"></div>
    </div>
    <!-- 
        1.学习目标 ：  v-on 指令
        2.学习路线
            a.作用： 
            b.语法： 
                标准语法： v-on:事件名 ="事件方法"

                简洁语法：  @事件名 = "事件方法"  
            c.注意点
                事件名就是原生事件名去掉on
                事件方法定义在vue实例的methods对象中
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {},
        //method:注册事件的方法名
        methods: {
          doClick(){
            console.log('点击我');
          },
          doEnter(){
            console.log('鼠标移入');
          },
        }
      })
    </script>

8.vue事件修饰符

 <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
      .father {
        width: 300px;
        height: 300px;
        background-color: #f00;
      }

      .son {
        width: 100px;
        height: 100px;
        background-color: #0f0;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <div class="father" @click="doFather">
        我是father
        <div class="son" @click.stop ="doSon">我是son</div>
      </div>

      <form action="http://www.itheima.com">
        <button @click.prevent ="doClick">点我啊</button>
      </form>

      <!-- 输入框 ： enter键 -->
      <!-- <input type="text" @keyup.13="doUp"> -->
      <!-- 用enter,易读 -->
      <input type="text" @keydown.enter ="doEnter" />
    </div>
    <!-- 
        1.学习目标 ：  事件修饰符
        2.学习路线
            a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
            b.语法： @事件名.修饰符 = "方法名"
        3.常用修饰符
            .prevent  : 阻止默认跳转(主要是form和a标签)
            .enter    : 输入框enter键
            .stop     : 阻止冒泡
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {},
        //method:注册事件的方法名
        methods: {
          doFather(){
            console.log('父盒子');
          },
          doSon(){
            console.log('子盒子');
          },
          doClick() {
            console.log('点击我');
          },
          doEnter(){
            console.log('enter');
          }
        }
      })
    </script>

9.vue事件方法

   <!-- HTML结构 -->
    <div id="app">
      <button @click ="doClick">点我啊</button>
      <br />
      我的年龄：{{age}}
      <button @click = "age++">点击我</button>
    </div>

    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
          name:'ilun',
          age: 31
        },
        methods: {
          doClick() {
            /*
            1.DOM语法中,事件处理函数this指向 : 事件源
            2.vue的事件方法this指向 : vue实力对象
            3/vue会把data和methods中的成员平铺到vue实例中
              方法中获取data数据 :this.属性名
              行内事件 : 省略this
            
            */
            console.log(this);
            console.log(this.age);
            this.age++
          }
        }
      })
    </script>

10.vue事件参数

<!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <div class="box"></div>
      <br />
      <span></span>
      <button @click = "doDelete(news.id)">删除</button>
      <!-- <button @click ='doEdit(e)'>编辑</button>  --> 
      <button @click ='doEdit'>编辑</button>
      <button @click ='doEdit(news.id,$event)'>编辑</button>
    </div>

    <script>
           /*
             vue 事件的几种写法
             1.行内事件:        @事件名 = "js代码"
             2.没有参数事件:    @事件名 = "事件方法"
                等价于这种写法  @事件名 = "事件方法($event)"
             3.有参数:           @事件名 = "事件方法(实参,$event)"
           */

      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
          news: {
            title: '哈哈',
            id:123
          }
        },
        methods: {
          doDelete(id){
            // 传入的是实参
            console.log(id);
          },
          doEdit(id,e){
            console.log(id,e);
          }

        }
      })
    </script>

11.vue样式绑定

<!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
      div > div {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        margin-top: 20px;
      }

      .red-box {
        background-color: red;
      }

      .blue-box {
        background-color: blue;
      }

      .greenBorder {
        border: 10px solid green;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <button @click="doClick">切换样式</button>
      
      <div :class="{greenBorder:flag,'blue-box':flag}"></div>
      <hr />
      <!-- <div :style="{width:'200px',height:'200px','background-color':'yellow'}"></div> -->
      <div :style="{width:w, height:w,'background-color':bgc}"></div>
      
    </div>

    <script>
      /*
      v-bind样式绑定 : v-bind 设置元素class和style属性
        :class ="{类名1:布尔值 ,类名2布尔值}"
        :style = "{样式名:样式值,样式名:样式值}"
        注意点: 如果属性名有- 可以使用引号包起来
      
      */
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
           flag:true,
            w:'200px',
            bgc:'yellow'
        },
        methods: {
          doClick(){
            console.log('点击我');
          }
        }
      })
    </script>

12.计数

  <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
      .input-num {
        width: 180px;
        height: 40px;
        border: 1px solid gray;
        display: flex;
        border-radius: 5px;
        overflow: hidden;
      }

      .input-num button {
        width: 50px;
        height: 100%;
        font-size: 25px;
        color: gray;
        cursor: pointer;
      }

      .input-num span {
        height: 100%;
        border: 1px solid gray;
        flex: 1;
        text-align: center;
        line-height: 40px;
      }

      .input-num button.disabled {
        cursor: not-allowed;
        color: #ccc;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <!-- 计数器 -->
      <div class="input-num">
        <button @click="num > 0 ? num--:num">
          -
        </button>
        <span>{{num}}</span>
        <button  @click="num < 10 ? num++:num">
          +
        </button>
      </div>
    </div>

    <script>
      /*
        vue思路 :核心是数据
        1这个案例需要什么数据 :num
        2 使用指令或插值 来处理数据
          渲染: 插值
          增: 点击+号 v-on
          减: 点击-号 v-on
      */

      
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
          num:0
        }
      })
    </script>

13.v-for

<!-- 导包 -->
    <script src="./vue.js"></script>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <li v-for="(item,index) in list">
        <span>下标:{{index}}</span>
        <span>姓名:{{item.name}}</span>
        <span>年龄:{{item.age}}</span>
      </li>
    </div>
    <!-- 
        1.学习目标：  v-for 指令
        2.学习路线
            (1)作用：遍历数组，并重复生成对应长度的相同标签
            (2)语法： v-for="item in 数组名"
                遍历下标：   v-for="(item, index) in items"
                
            (3)细节： 这个指令写在哪一个元素身上，就重复生成哪一个元素
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
          list:[
            {name:'张三',age:18},
            {name:'李四',age:28},
            {name:'王五',age:38},
          ]
        },
        methods: {}
      })
    </script>

15.排他思想

 <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
      .active {
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <button
       v-for="(item,index) in list"
       :class="{active:index === currentIndex}"
       @click="currentIndex = index"
      >
      {{item}}
    </button>
    </div>

    <script>
      /* 排他思想 ： 多个元素只能选中一个（多选一）
        1.以前dom思维 ： DOM操作 
            (1)使用选择器找到当前选中的元素，移除类名
            (2)给自己添加类名
        2.vue思维 : 数据驱动(数据+指令)
            (1)给data添加一个变量currentIndex记录当前选中的下标
            (2)使用v-bind指令绑定样式

            vue思想 : 数据驱动(数据+指令)
            1 声明一个下标 currentIndex 记录选中的下标
            2 v-bind指令渲染样式
               :class="{类名: index === currentIndex}"
            3  点击元素修改currentindex
            @click ="currentIndex = index
            "
        */
        

      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
           currentIndex:0,
          list:[
            '西班牙',
            '巴西',
            '葡萄牙',
            '法国'
          ]
         
        },
        //methods: 事件处理函数
        methods: {}
      })

16.双向数据绑定

<!-- 导包 -->
    <script src="./vue.js"></script>
  </head>

  <body>
    <!-- HTML结构 -->
    <form id="app">
      登陆框： <input type="text" v-model="passname">
      <br />
      密码框： <input type="text" v-model="password">
      <br />
      <button @click="doLogin">登录</button>
    </form>
    <!-- 
        1.学习目标：了解双向数据绑定的意义
            可以让我们快速 (得到 | 设置) 表单元素的值
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
          passname:'',
          password:''
        },
        methods: {
          doLogin(){
            //获取表单文本 :表单的值变化 ,data数据自动变化
            console.log(this.passname,this.password);
            // 2  判断密码是否正确
            if( this.password != '123456'){
              alert('密码错误')
               // 若不正确,清空表单
              this.password = ''
            }

          }
          
        }
      }) 
    </script>

17.v-mode修饰符

 <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        span{
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <input type="text" v-model.lazy="name">
        <h2>您输入的名字是:{{name}}</h2>
        <input type="text" v-model.number="age" >
        <h2>您输入的年龄是:{{age + 1}}</h2>
        <input type="text" v-model.trim="sex">
        <h2>您输入的年龄是{{sex}}</h2>
    </div>
    <!-- 
        1.学习目标 ： v-model 指令
        2.学习路线 
           v-model 修饰符
           .lazy :只在输入框 失去焦点 或enter键才会绑定数据(降低数据更新频率)
           .number : 把输入框字符串  转 数字类型 (能转就转,不能转就不转)
           .trim  :  去除字符串首位空格
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name:'',
                age:'',
                sex:''
                
            },
            methods: {
                
            },
        })
    </script>

18.综合案例

 <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
      h2 {
        text-align: center;
      }

      body {
        text-align: center;
      }

      input {
        width: 300px;
        height: 30px;
        border-radius: 5px;
        font-size: 22px;
        padding-left: 10px;
        outline: none;
        border: 1px solid #000;
      }

      .items {
        list-style: none;
        padding: 0;
        width: 300px;
        margin: 0 auto;
        text-align: left;
      }

      table,
      th,
      td,
      tr {
        width: 600px;
        margin: 50px auto;
        border: 1px solid black;
        border-collapse: collapse;
        padding: 5px;
        transition: all 0.5s linear;
      }

      tr.over {
        background-color: cyan;
      }
    </style>
  </head>

  <body>
    <!-- HTML结构 -->
    <div id="app">
      <h2>小黑记事本</h2>
      <input type="text" placeholder="请输入内容" 
     
      v-model="content"
       @keydown.enter="doEnter"
    >
      <table>
        <thead>
          <th>索引</th>
          <th>内容</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr  v-for="(item,index) in list">
            <td >{{index+1}}</td>
            <td>{{item}}</td>
            <td><button @click="doDelete(index)">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--思路分析(交互)
        1.输入框输入enter键，将数据添加到列表
        2.双击列表li元素删除
        Vue编程思维
            * (1)写页面结构 HTML+CSS
            * (2)分析页面需要显示什么数据，将其保存在vue实例的data对象中
            * (3)在页面视图中使用插值语法或者指令显示data中的数据
     -->
    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: "#app",
        //data: 要渲染的数据
        data: {
          list: [],
          content:'',
          
        },
        methods: {
          doEnter(){
            console.log(this.content);
            this.list.push(this.content)
            this.content=''
          },
          doDelete(){
            this.list.pop(this.content)
          }
        }
      })
    </script>