Vue学习笔记01

最新推荐文章于 2022-10-21 15:11:30 发布

JackFruitxx

最新推荐文章于 2022-10-21 15:11:30 发布

阅读量68

点赞数

文章标签： vue javascript js html

本文链接：https://blog.csdn.net/qq_42651398/article/details/115045679

版权

Vue学习笔记01

Vue结构

</html>
<!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>
<!-- 被绑定的dom元素 -->
<div id="app">
    <h2>{{name}}</h2>
</div>
<!-- 引入Vue.js -->
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    // 绑定的DOM的使用范围
    el:'#app',
    // 数据 可用通过Mustache插值应用到dom元素中
    data:{
      name:'jackfruitxx'
    },
    // 计算属性
    computed:{},
    // 方法
    methods:{},
    //生命周期函数
    ...(){

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

插值操作

Mustache语法

使用{{变量名|表达式}}将值渲染到DOM元素中
当data中的值发生改变时,会重新渲染
存在插值闪烁问题

  <div id="app">
    <h2>{{message}}</h2>
    <!-- mustache语法中，不仅可以直接写变量，也可以写简单的表达式 -->
    <h2>{{firstName +' '+ lastName}}</h2>
    <h2>{{firstName}}  {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>
  <div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:'你好啊',
      firstName:"kobe",
      lastName:"bryant",
      counter:100
    }
  })
</script>

插值闪烁问题:
网速较慢时,数据未完全加载时,页面会显示出原始的{{}},加载完成后菜显示正确的数据
解决插值闪烁的方法:
1. 使用 v-text
2. 使用 v-html
3. 使用 v-cloak

v-once指令

只渲染一遍,不会响应绑定的值的变化

<div id="app">
  <!-- v-once 只渲染一次 -->
  <h2 v-once>{{message}}</h2>
  <!-- 会响应data中的message的变化而变化 -->
  <h2 >{{message}}</h2>
<div>

v-html

当data中的属性是标签时,如果使用{{}}来进行插值操作,显示字符串
使用v-html,会将标签插入到绑定的标签中,成为绑定标签的子元素
无插值闪烁问题

<!-- url:<a href='http:www.baidu.com'>百度一下<a> -->
<!-- 显示:<a href='http:www.baidu.com'>百度一下<a> -->
<h2 v-html="url"></h2>
<!-- 显示:百度一下 -->
<!-- 结构:h2-a -->
<h2>{{url}}</h2>

v-text

将内容插入到绑定的标枪中
无插值闪烁问题
会覆盖标签中的原内容

<!-- message:hello -->
<!-- 存在插值闪烁,数据加载完成后显示内容为:hellohhh -->
<h2>{{message}}hhh</h2>
<!-- 不存在插值闪烁,数据加载完成后显示内容为：hello -->
<h2 v-text="message">hhhh</h2>

v-pre

会跳过当前元素的子元素的编译

<!-- message:hello -->
<!-- 显示hello -->
<h2>{{message}}</h2>
<!-- 显示{{message}} -->
<h2 v-pre>{{message}}</h2>

v-cloak

在vue实例编译完成后，该属性会被移出
可用用于解决插值闪烁问题

<style>
  [v-cloak] {
    display: none;
  }
</style>
<div id="app" v-cloak>
  <!-- 解决插值闪烁的问题 -->
    <h2>{{message}}</h2>
</div>

动态绑定属性 v-bind

基本使用

在需要动态绑定内容的属性前使用**v-bind:**修饰
被修饰的属性的值为data中的属性名

<!-- 在需要动态绑定的属性前用v-bind: -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aURL">{{message}}</a>

语法糖写法:

<!-- v-bind: 省略为: -->
<img :src="imgURL" alt="">
<a :href="aURL">{{message}}</a>

v-bind动态绑定class属性-对象语法

格式：{className1: boolean, className2: boolean, …}
boolean值为true的类将被添加
可用与不被v-bind修饰的类名混用，两者会合并，一般用法是固定的类写在不被修饰的class中

<style>
  .active{
    color: red;
  }
  .line{
    color: green;
  }
</style>

<h2 class="title" :class ="{active:isActive, line:isLine}">{{message}}</h2>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello",
      isActive:true,
      isLine:true,
    },
  })
</script>

也可以通过调用方法返回
效果一致

 <h2 class="title" :class ="getClasses()">{{message}}</h2>

 <script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello",
      isActive:true,
      isLine:true,
    },
    methods:{
      getClasses:function(){
        return {active:this.isActive, line:this.isLine}
      }
    }
  })
</script>

v-bind动态绑定class属性-数组语法

数组中的类名如果不是字符串类型，会被解析为变量，取变量的值
也可用通过方法调用返回值

<!-- 解析成变量 -->
<!-- 类名：aaaa bbbb -->
<h2 class="title"  :class="[active,line]">{{message}}</h2>
<!-- 解析成字符串 -->
<!-- 类名：active line -->
<h2 class="title"  :class="['active','line']">{{message}}</h2>
<!-- 方法形式 -->
<!-- 类名：aaaa bbbb -->
<h2 class="title"  :class="getClasses()">{{message}}</h2>

<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'hello',
        active:'aaaa',
        line:'bbbb'
    },
    methods:{
        getClasses:function(){
            return [this.active,this.line];
        }
    }
  })
</script>

v-bind动态绑定style(对象语法)

<div id="app">
    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
    <!-- 属性值需要时字符串，否则会被当成变量 -->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <h2 :style="{fontSize:finalSize}">{{message}}</h2>
    <h2 :style="{fontSize:finalSize2 + 'px'}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'hello',
        finalSize:'100px',
        finalSize2:100
    }
  })
</script>

计算属性

基本用法：

在Vue实例中的computed对象中创建
本质为函数，有返回值
调用时直接写函数名
也可以用于计算一些复杂的值，如求和等

<div id="app">
    <h2>{{firstName}}  {{lastName}}</h2>
    <h2>{{fullName}}</h2>
</div>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        firstName:"kobe",
        lastName:"bryant",
    },
    //计算属性
    computed:{
        fullName:function(){
            return this.firstName +'  '+ this.lastName;
        }
    },
    methods:{
        getFullName:function(){
            return this.firstName + this.lastName;
        }
    }
  })
</script>

setter函数和getter函数

计算方法被调用时，默认调用getter函数
一般只需要实现get函数

computed:{
        // fullName:function(){
        //     return this.firstName +'  '+ this.lastName;
        // }
        fullName:{
            //一般只需要实现get方法
            set:function(){
                
            },
            get:function(){
                return this.firstName +'  '+ this.lastName;
            }
        }
    }

计算属性与方法的区别

计算属性有缓存，反复调用只会计算一遍，效率更高

事件监听

基本使用：

标准格式：v-on
语法糖：@

<div id="app">
    <h2>{{counter}}</h2>
    <!-- <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <!-- 语法糖 -->
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
</div>

参数传递

不进行传参时可以省略括号
方法定义时需要一个参数，但调用时省略了括号，会将event事件作为参数传入方法中
方法定义时需要一个参数，但调用未传参，会传入undefined
当参数是event事件时，可以通过’$event’获得事件

<div id="app">
    <!-- 事件调用的方法没有参数 -->
    <!-- 不传参时可用省略括号 -->
    <button @click = "btn1Click">按钮1</button> 
    <button @click = "btn1Click()">按钮2</button>
    <!-- 在事件定义时,写函数时省略了小括号,但是方法本身是需要一个参数的 -->
    <button @click = "btn2Click(123)">按钮3</button> 
    <!-- ------,123 -->
    <button @click = "btn2Click()">按钮4</button>
    <!-- ------,undefined -->
    <!-- Vue会将浏览器生成的evevnt事件作为参数传入到方法中 -->
    <button @click = "btn2Click">按钮5</button>
    <!-- ------,event -->
    <!-- 方法定义时,需要event对象,同时又需要其他参数 -->
    <!-- 在调用方法是,手动获得浏览器参数的event对象:$event -->
    <button @click = "btn3Click(123,$event)">按钮6</button>
    <!-- ------,123,event -->
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{},
    methods:{
        btn1Click(){
            console.log("btn1Click")
        },
        btn2Click(event){
            console.log("------",event)
        },
        btn3Click(abc,event){
            console.log("------",abc,event)
        }
    }
  })
</script>

修饰符

.stop:阻止事件冒泡
.prevent:阻止默认事件
.once:只监听一次
监听keyup或其他事件时，可以通过修饰符指定某个键位或某个特殊的操作，如：@keyup.enter

条件判断

v-if=“boolean”
v-else
v-if-else
v-show的区别:
v-show会给隐藏的标签添加一个行内属性：display:none，而v-if会直接从dom中删除

循环遍历

遍历数组

不使用索引值

<!-- 1.在遍历过程中不使用索引值 -->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

使用索引值：

 <!-- 2.在遍历的过程中获取索引值 -->
  <ul>
    <li v-for="(item,index) in names">{{index+1}},{{item}}</li>
  </ul>

遍历对象

info:{
  name:'jackFruitxx',
  age:18,
  height:1.88
}

按声明顺序遍历对象的属性

<ul>
  <li v-for="item in info">{{item}}</li>
</ul>
· jackFruitxx
· 18
· 1.88

获取key和value

<ul>
  <li v-for="(value,key) in info">{{key}}：{{value}}</li>
</ul>

获取key、value和index

<ul>
    <li v-for="(value,key,index) in info">{{index}}.{{key}}：{{value}}</li>
</ul>
· 0.name:jackFruitxx
· 1.age:18
· 2.height:1.88

JackFruitxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记01

菜鸡的自我修养-Vue学习笔记01Vue学习笔记01Vue结构插值操作动态绑定属性 v-bindVue学习笔记01Vue结构</html><!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫