vue基础01

最新推荐文章于 2023-08-31 18:05:01 发布

Ordbiao

最新推荐文章于 2023-08-31 18:05:01 发布

阅读量638

点赞数 4

分类专栏： vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/tooHar/article/details/117962817

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

笔记目录

小概
1. vue的使用
2. vue差值表达式
3. vue指令
4 vue中的this关键字
5. vue事件传参
6. v-for列表渲染
7. v-model双向数据绑定
8. 案例
总结

小概

本章的学习内容：vue的使用流程（结构认识），vue挂载点el使用，插值表达式，v-指令（v-text, v-html,v-on,v-bind，v-model）,vue事件修饰符，计算器案例，图片切换案例，记事本案例。

1. vue的使用

1.导入vue（导包）
2.写HTML结构
3.vue初始化

  <!-- 1.导包 -->
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 2.写html结构 -->
    <div id="app">
      {{ message }}
      <p>{{ name }}</p>
    </div>

    <script>
      /* 3.vue初始化
      (1)Vue是导入vue.js之后得到的一个全局构造函数
      (2)app是调用Vue构造函数生成的vue实例对象
      */
      let app = new Vue({
        /* 
        1. el : element vue挂载点
            作用： 告诉vue，把数据渲染到哪一个元素上
        */
        el: '#app',
        /* 
        2.data: 数据
            作用： 需要渲染的数据
        */
        data: {
          message: 'hello vue.js',
          name:'想你的夜'
        }
      })
    </script>
  </body>

vue框架先引入js文件，然后写html结构（也就是你需要渲染挂载的HTML结构），再vue初始化。vue的初始化就是通过调用Vue构造函数生成一个叫app的实例对象，这个Vue()构造函数就是我们导入vue.js文件之后得到的一个全局构造函数，它需要传入一个对象，
参数el：vue挂载点（告诉vue，把数据渲染到那个元素上）可以是id选择器，类选择器，标签选择器，但是不能挂载在html 和body上，推荐id选择器(唯一性)，如果是别的选择器匹配到多个地方则vue只会渲染第一个。
参数data：{}，定义/存放数据，
methods：{}，我们需要使用到方法的地方
…

    <script>
      /* 3.vue初始化
      (1)Vue是导入vue.js之后得到的一个全局构造函数
      (2)app是调用Vue构造函数生成的vue实例对象
      */
      let app = new Vue({
        /* 1. el : element vue挂载点
            作用： 告诉vue，把数据渲染到哪一个元素上
            (1)可以使用id选择器(vue推荐) 类选择器  标签选择器
            (2)如果选择器可以匹配多个元素，vue只会渲染第一个元素
            (3)如果希望渲染多个元素，则可以把多个元素包在一个父元素中
            (4)el不能挂载body与html，否则会报错
        */
        el: '#app',
        /* 
        2.data: 数据
            作用： 需要渲染的数据
            注意点：
                
        */
        data: {
          name: 'dd'
        }
      })

2. vue差值表达式

语法：{{差值}}
差值是data对象中的数据，大括号内支持二三元运算，对象数组取值，不支持if for语法。

    <!-- 2.写html结构 -->
    <div id="app">
      <div class="container">
        <p>{{ name }}</p>
        <p>{{ age + 1 }}</p>
        <p>{{ age >= 30 ? '油腻男' : '小鲜肉'}}</p>
        <p>{{ gfs[0] }}</p>
        <br>
        <p>{{ student.name }}</p>
        <p>{{ student.age }}</p>
      </div>
    </div>
    <script>
      let app = new Vue({
        el: '#app',
        /* 
        2.data: 数据
            作用： 数据驱动（vue会自动把data中的数据渲染到页面，而无需DOM操作）
            注意点：差值表达式  {{ 差值 }}
                1.支持二元运算
                2.支持三元运算
                3.支持数组/对象 取值
                4.不支持分支与循环语法（会有其他语法支持）
        */
        data: {
          name: 'ikun',
          age:29,
          gfs: ['我','不是','舔狗'],
          student:{
              name:'思聪',
              age:18
          }
        }
      })
    </script>

3. vue指令

vue 指令本质就是行内自定义属性，给标签额外新增功能

3.1 v-text指令

作用：设置元素的innerText
语法：指令名=指令值"
v-text与差值语法的区别：

v-text：设置元素的innerText，会覆盖原本内容（不解析标签）
差值语法：只替换差值语法部分，不影响大括号以外的数据

 <!-- HTML结构 -->
    <div id="app">
        <p v-text="msg"> 我是p标签 </p>  
        <p>我是p标签： {{ msg }}</p>
    </div>

    <script>
        /* 
        vue指令本质就是行内自定义属性，给标签额外新增功能
        1.学习目标：  v-text
        2.学习路线
            2.1 作用 ： 设置元素的innerText
            2.2 语法：  指令名="指令值"
            2.3 v-text与差值语法区别
                v-text : 设置元素的innerText，会覆盖原本的内容
                差值语法 ： 只替换差值语法的部分
        */

        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是大保健!',
            }
        })
    </script>

3.2 v-html指令

作用：设置元素的innerHTML
语法：v-html=“值” ，值如果包含标签，会解析标签

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

    <script>
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '<h2>v-html会解析h2标签哦</h2>',
            }
        })
    </script>

3.3 v-on指令

作用：给元素绑定事件
语法：

标准语法：v-on:事件名 = “事件处理函数”
语法糖写法：@事件名 = “事件处理函数”

注意点：

事件名需要去掉前面的on , click mouseenter
事件处理函数需要写在methods成员中

    <!-- HTML结构 -->
    <div id="app">
        <!-- 标准语法 -->
        <button v-on:click="doClick">点我啊</button>
        <!-- 简写语法 -->
        <div class="box" @click="doClick"></div>
        <div class="box" @mouseenter="doEnter" @mouseleave="doLeave"></div>
    </div>
    
            /* 创建vue实例 */
        var app = new Vue({
            //1.el:挂载点
            el: '#app',
            //2.data: 要渲染的数据
            data: {            },
            //3.methods : 事件处理方法
            methods: {
                //单击事件
                doClick(){// doClick:function(){}
                    alert('你点击我了')
                },
                //鼠标移入事件
                doEnter(){
                    console.log('鼠标移入我了');
                },
                //鼠标移出事件
                doLeave(){
                    console.log('鼠标移出');   
                }
            },
        })

3.4 vue事件修饰符

作用：限制事件的行为（例如阻止冒泡，阻止默认事件）
语法：@事件名.修饰符 = “事件处理函数”

阻止冒泡：.stop （原生 e.stopPropagation()）
阻止默认跳转：.prevent（原生 e.preventDefault()）
限制keyup那个按键触发：@keyup.键码（enter/13,）
事件只触发一次：@click.once

事件修饰符可以串联（v-on:click.stop.prevent）

  <!-- HTML结构 -->
    <div id="app">
        <!-- 父子盒子 -->
        <!-- 事件只触发一次 -->
        <div class="father" @click.once="fatherClick">
            我是father
            <!-- 阻止冒泡 -->
            <div class="son" @click.stop="sonClick">我是son</div>
        </div>
        <!-- form表单 -->
        <form action="http://www.itheima.com">
            <!-- 阻止默认跳转 -->
            <button @click.prevent="doClick">点我啊</button>
        </form>
        <!-- 输入框
        .enter : enter键 （阅读性高）
        .13 :  键盘码
        -->
        <input type="text" @keyup.13="doEnter">
    </div>
    
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {

            },
            //methods:事件处理函数
            methods: {
                //父元素点击
                fatherClick(){
                    console.log('父元素点击');
                    
                },
                //子元素点击
                sonClick(){
                    console.log('子元素点击');
                    
                },
                //表单按钮
                doClick(){
                    console.log('表单按钮');
                    
                },
                //输入框键盘
                doEnter(){
                    console.log('输入框键盘');
                    
                },
            },
        })
    </script>

3.5 v-bind指令

只有vue的语法才可以访问vue中的数据，原生属性无法访问vue中的数据
如果希望原生属性也可以访问vue中的数据，就可以使用v-bind指令
作用：设置原生属性的值
语法：

标准语法：v-bind:原生属性 = “指令值”
语法糖：:原生属性 = “指令值”

    <!-- HTML结构 -->
    <div id="app">
        <!-- 
            1.只有vue的语法才可以访问vue中的数据，原生属性无法访问vue中的数据
            2.如果希望原生属性 也可以访问vue中的数据，就可以使用v-bind指令
        -->
        <img v-bind:src="imageUrl" alt="" v-bind:title="imageTile">
        <!-- 简洁写法 -->
        <img :src="imageUrl" alt="" :title="imageTile">
        <a :href="url">点我</a>
    </div>
    
    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                imageUrl:'./images/logo.png',
                imageTile:'goodImg',
                url:'http://www.baidu.com'
            }
        })
    </script>

v-bind样式绑定（v-bind指令实现样式绑定）
语法：v-bind:class="{ 类名：布尔值，类名：布尔值}"
注意：如果类名称含有-,则需要使用引号 ‘’ 包起来（对象取值语法不支持-，但是字符串语法支持-）

  <!-- HTML结构 -->
    <div id="app">
      <button @click="flag=!flag">切换样式</button>
      <div :class="{ greenBorder:flag,'red-box':flag }"></div>
      <div :style="{ 'background-color' : color}"></div>
    </div>

    <script>
      /* 1.学习目标： v-bind指令实现样式绑定
         2.语法：  v-bind:class="{ 类名:布尔值,类名:布尔值 }"
         3.注意点： 如果类名有- , 则需要使用引号''包起来
            原理：对象取值语法不支持-，但是字符串语法支持-
      */
      /* 创建vue实例 */
      var app = new Vue({
        //el:挂载点
        el: '#app',
        //data: 要渲染的数据
        data: {
            flag:false,
            color:'purple'
        }
      })
    </script>

4 vue中的this关键字

vue方法this指向谁？ —指向vue实例（app）
如何再vue方法中访问data中的数据：this.属性名

注意：vue会平铺data与methods成员到vue实例中 可以直接this.属性名，不需要this.data.属性名

如果在行内访问data成员，不需要使用this(行内本身就被app元素包含)

    <!-- HTML结构 -->
    <div id="app">
        <p>我的名字:{{ msg }}</p>
        <p>我的年龄: {{ age }}</p>
        <button @click="doClick">点我成长</button>
        <button @click="age++">点我</button>
    </div>

    <script>
        /* 1.学习目标： vue方法中的this关键字 
        */
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是坤坤!',
                age:30
            },
            //methods:事件处理函数
            methods: {
                doClick(){ //doClick:function(){}
                    //年龄+1
                    /* 
                    1. vue方法中的this指向： vue实例对象
                    2. vue会把methods与data成员平铺到vue实例
                        * 想要访问data中的成员， this.属性名
                    3.注意点： 如果在行内访问data中的成员，不需要this，直接访问
                    */
                    console.log( this );
                    console.log( this.age );
                    //数据驱动： 数据变化，vue会自动重新渲染，而无需dom操作
                    this.age++;       
                }
            },
        })
    </script>

vue方法中箭头函数是指向window的，实例对象app 的父级作用域是window（箭头函数不会绑定this,只会指向父级作用域的this）。

5. vue事件传参

如果不传参，默认参数就是：事件对象（e）
传递了参数，事件对象（e）会被覆盖掉
如果不希望覆盖事件对象，这可以使用$event

@click(参数，$event) $event就是事件对象

    <!-- HTML结构 -->
    <div id="app">
        <span>{{ news.title }}</span>
        <!-- 传参， 会覆盖默认的事件对象。 如果希望不覆盖，可以使用$event -->
        <button @click="editClick(news.id,$event)">编辑</button>
        <!-- 不传参，此时默认参数就是事件对象 -->
        <button @click="editClick">删除</button>
    </div>

    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                news:{
                    title:'我正在输液，输的什么液，想你的夜',
                    id:10
                }
            },
            methods: {
                editClick(id,e){
                    console.log(id);
                    console.log(e);
                    
                }
            },
        })
    </script>

6. v-for列表渲染

作用：列表渲染（渲染数组/对象）
语法： v-for="(item,index) in 列表名（遍历对象）"
注意点：希望哪一个元素渲染多个，就对哪个元素使用v-for

 <!-- HTML结构 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in list">
                <span>下标：{{ index }}</span>
                <span>元素：{{ item }}</span>
            </li>
        </ul>
    </div>

    <script>
        /* 
        1.学习目标： v-for
        2.学习路线：
            2.1 作用： 列表渲染（渲染数组/对象）
            2.2 语法： v-for="(item,index) in 列表名"
            2.3 注意点： 希望哪一个元素渲染多个，就对哪个元素使用v-for
        */

        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                list:[
                    "小明",
                    "小红",
                    "小花",
                    "小新",
                ],
            }
        })
    </script>

7. v-model双向数据绑定

作用：双向绑定（表单value值和vue的data属性建立双向绑定）

.修改了表单，data中的数据会自动变化
修改了data中的数据，表单的value值也会自动变化

语法：v-model=“属性名”
注意点：

v-model只能用于表单元素（作用在非标单元素上就是自定义指令）
v-model双向绑定的数据需要添加到data中

    <!-- HTML结构 -->
    <div id="app">
        <input type="text" placeholder="请输入内容" v-model.number.lazy.trim="msg">
        <br>
        <button @click="msg='我就是惊喜'">点我有惊喜</button>
        <p>我是msg内容：{{ msg }}</p>
    </div>

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

    <!-- HTML结构 -->
    <div id="app">
        <input type="text" placeholder="用户名" v-model="admin">
        <br>
        <input type="text" placeholder="密码" v-model="password">
        <br>
        <button @click="doLogin">登录</button>
    </div>

    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                admin:'',
                password:''
            },
            methods: {
                doLogin(){
                    console.log(this.admin,this.password);
                    if( this.admin != 'admin' || this.password != '123456'){
                        alert('用户名或密码错误');
                        //表单清空
                        this.admin = '';
                        this.password = '';
                    }
                    
                }
            },
        })

v-model双向数据绑定意义 :可以快速获取|设置表单的value

8. 案例

8.1计数器

最大值10，最小值0

    <!-- 导包 -->
    <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="subClick" :disabled="isSubDisabled" :class="{disabled:isSubDisabled}" >
                -
            </button>
            <span>{{ num }}</span>
            <button @click="addClick" :disabled="isAddDisabled" :class="{disabled:isAddDisabled}">
                +
            </button>
        </div>
    </div>

    <script>
        /*vue学好： 思维转变
        
        1.传统dom案例思路
            1.1 写html、css布局
            1.2 获取元素
            1.3 注册事件
            1.4 事件处理

        2.vue思路
            1.1 写html、css布局
            1.2 把数据放入data中，方法放入methods中
            1.3 使用差值或指令渲染数据       
        */
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                num:0,
                isAddDisabled:false,
                isSubDisabled:true
            },
            //methods：事件处理函数
            methods: {
                addClick(){
                    //this: vue实例
                    if(this.num == 10){
                        this.isAddDisabled = true;
                        this.num = 10;
                    }else{
                        this.num++;
                        this.isAddDisabled = false;
                    }

                    //允许减法
                    this.isSubDisabled = false;
                },
                subClick(){
                    if(this.num == 0){
                        this.isSubDisabled = true;
                        this.num = 0;
                    }else{
                        this.num--;
                        this.isSubDisabled = false;
                    };

                    //允许加法
                    this.isAddDisabled = false;
                }
            },
        })
    </script>

优化

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

    <script>
        /* 数据驱动 : 当data中数据变化，vue会自动重新渲染页面 */

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

8.2 图片切换

    <!-- HTML结构 -->
    <div id="app">
      <h2 class="title">图片切换</h2>
      <img alt="" :src="list[index]" />
      <br />

      <input type="button" value="上一张" @click="index==0?index=list.length-1:index--"/>
      <input type="button" value="下一张" @click="index==list.length-1?index=0:index++"/>
    </div>

    <script>
      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: '#app',
        //data: 要渲染的数据
        data: {
          //记录图片位置
          index: 0,
          //图片数组
          list: [
            './images/01.png',
            './images/02.png',
            './images/03.gif',
            './images/04.png',
            './images/05.png',
            './images/06.png'
          ]
        },
        methods: {}
      })
    </script>

8.3 记事本（localstorage本地存储数据）

    <!-- 导包 -->
    <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="msg"
        @keyup.enter="addClick"
      />
      <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="list.splice(index,1)">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>

    <script>
      /* 本地存储思路
        1.存 ： 页面关闭前 
        2.取：  页面加载时
        */
      window.onbeforeunload = function () {
          /* 注意点： localStorage只能存储string类型，如果是引用类型则自动调用toString()方法转成字符串
            解决方案：引用类型转成json格式字符串存储  JSON.stringify()
          */
          localStorage.setItem('note',JSON.stringify(app.list) );
      };

      //读取localStorage中的数据
      //如果没有数据需要赋值空数组， 因为没有数据list为null，null无法调用push()添加数据
      let list = JSON.parse( localStorage.getItem('note') ) || [];
      console.log(list);
      

      /* 创建vue实例 */
      let app = new Vue({
        //el:挂载点
        el: '#app',
        //data: 要渲染的数据
        data: {
          msg: '',
          list
        },
        methods: {
          //添加内容
          addClick () {
            console.log(this.msg)
            //改变了list，vue会自动更新数据
            this.list.push(this.msg)
            //文本清空
            this.msg = ''
          }
        }
      })
    </script>
  </body>

localstorage本地存储只能存string类型的数据（token本身就是string类型），如果要存储对象或数字，可以存JSON类型（先把对象数组JSON.stringify()转成JSON类型），取数据的时候在转成js类型（JSON.parse()）.

总结

vue是渐进式框架：只引入你项目需要使用的功能，VUE不强求你一次性接受并使用它的全部功能特性。jquery这种则是一次性引入所有的方法，这种就不属于渐进式。
vue的另一大亮点:数据驱动（数据变化，vue会自动重新渲染，而无需dom操作）
双向数据绑定的原理：Object.defineProperty
…