vue基础的一些实例推荐收藏

data：数据

用于存储数据，这里的数据可以全局使用
当数据发生变化时，会自动更新相关DOM元素

methods：方法

用于存储各种方法
方法里面的this是当前vue对象
指令：就是vue提供的一套属性，都是v-开头

methods基本指令

v-text ：innertext
演示案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 原生js有innerhtml和innertext -->
    <!-- 一个是文档一个是带代码解析 -->
    <div v-text="msg"></div>
    <div v-html="msg">aaaaa</div>
    <!-- 会覆盖原有内容 -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
        
        
      el:"#app",
      data:{
        
        
        msg:"<div>我喜欢你</div>"
      },
      methods:{
        
        

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

v-html : 相当于innerhtml，原样显示不解析双花括号里面的值

v-if :删除DOM元素实现隐藏

v-else , v-else-if

测试案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box{
          
          
      background-color: aqua;
      width: 200px;
      height: 200px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="a=true">显示</button>
    <button @click="a=false">隐藏</button>
    <button @click="a=!a">切换</button>
    <div v-show="show" v-if="a" id="box"></div>
    <div>{
       
       {a}}</div>
    <!-- 指令v-if 如果条件为true就添加元素反之false就移除元素 -->
    <!-- 和v-show的区别就是一个是不插入元素，一个是利用css -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
          
          
      el:"#app",
      data:{
          
          
        show:true,
        a:false
      },
      methods:{
          
          

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

v-show: 使用css的方法来实现显示与隐藏（display：nono/block)
v-for：循环

格式：

v-for="值 in/of 数组“
v-for="（值，序号） in/of 数组“
指出遍历数字（v-for=”值 in 数字“

演示demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-for="value in names">{
         
         {value}}</button>
    <ul>
      <li v-for="(value,index) in names">{
         
         {index}},{
         
         {value}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
            
            
      el: '#app',
      data:{
            
            
        names:['a','b','c','d','e','f','g','h','i'],
        color:'red'
      },
      methods:{
            
            

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

v-on ：事件绑定

相当于原生：onclick， vue为v-on：click
简化/简写：@
例如：可视页面上的一个元素点击，聚焦，失焦等操作
操作：

<template>
  <div>
    <button @click="num++">num+1</button>
    <p>{
       
       {num}}</p>
  </div>
</template>

<script>
  export default {
          
          
    data() {
          
          
      return {
          
          
        num: 0
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

当点击num++后

在这里插入图片描述

v-bind ：属性绑定
- 属性名=”JS代码“

v-model ：双向数据绑定

方向1：传统把data里面的数据传递到DOM元素里
方向2：必须是form表单元素才能和用户交互，用户修改DOM元素，可以同步更新数据项目

测试案例

<template>
  <div>
    <!-- 双向数据绑定 -->
    <!-- 双标签内使用双花括号 -->
    <!-- :是属性名 -->
    <!-- from 表单元素的特点 lable form 按钮单选多选，都可以和用户交互 -->
    <input type="text" value="kw" @input="kwchanged" />
    <!-- @input实时监听 -->
    <input type="submit" value="Submit" @input="kwchanged" />

    <!-- v-mode示例 -->
    <br />
    <input type="text" v-model="kw" />
    <!-- 双向数据绑定，当写v-mode就会自动变化 -->
    <br />
    <!-- 当使用后凡是和绑定值有关的都会刷新 -->
    <input type="text" v-model="x" value="1111s" />
    <button>{
       
       { x }}</button>
    <p>{
       
       { x }}</p>

    <!-- v-mode案例 -->
    <hr />
    <br />
    <input type="text" v-model="username" placeholder="输入密码">
    <input type="text" v-model="password" placeholder="请输入密码">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
          
          
  methods: {
          
          
    kwchanged(e) {
          
          
      console.log(e.target.value);
      // target触发事件元素
      this.kw = e.target.value;
    },
    login(){
          
          
      console.log(this.username,this.password)
    }
  },
  data() {
          
          
    return {
          
          
      kw: "随便起",
      x: "1111111",
      username:"",
      password:""
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

v-pre ：原样显示代码，特指{ {}},也就是原样显示不执行vue操作

测试案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>
<body>
  <div id="app">
    <div>{
       
       {8+8}}</div>
    <!-- 双跨括号里面是js代码 -->
    <div v-pre>{
       
       {8+8}}</div>
    <!-- v-pre指令就是显示代码本身，作为普通字符串 -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
          
          
      el:'#app',
    })
  </script>
</body>
</html>

v-once ：一次性，首次渲染之后，后续数据变化不会刷新DOM元素
演示案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- once一次性 -->
</head>
<body>
  <div @click="num++" id="app">
    <button>num++</button>
    <p>{
       
       {num}}</p>
    <P v-once>初始值：{
       
       {num}}</P>
    <!-- 一次性渲染数据发生变化后后面不会变 -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
          
          
      el:"#app",
      data:{
          
          
        num:10
      },
      methods:{
          
          

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

key ：唯一标识

配合v-for 提升数组变更之后的重新下渲染效率
vscode最好写上虽然不写代码不会报错大师vscode是会标记出来的

演示案例：

	<template>
  <!-- 注意事项：template下只能由一个子元素 -->
  <!-- template和div是一样的，是vue提供的标签 -->
  <div>
    <!-- mian.js文件固定加载名字就是app.vue的文件 -->
    <div id="pages">
      <span v-for="n in 10" :key="n" :class="{active:current == n}" @click="current=n">{
       
       { n }}</span>
      <p>{
       
       {current}}</p>
      <!-- 循环数组生成的元素最好添加唯一标识 -->
      <!-- key的用法主要在数据可能会发生变化 -->
      <!-- 发生增删改查士，仙童表示的元素，会直接服用，从而不需要进行修改--提高性能 -->
      <ul style="width: 500px; height: 200px">
        <li v-for="(value, index) in names" :key="value">
          {
       
       { index }}-{
       
       { value }}
        </li>
      </ul>
      <!-- 使用shift方法来删除第一个元素 -->
      <button @click="names.shift()">删除元素</button>
      <!-- 唯一标识：先查询已有的DOM元素是否要与生成的元素的表示相同 -->
      <!-- 如果唯一标识相同会标错 -->
      <!-- 如果没有唯一标识可以勉强使用index：index只是一个遍历的序号 -->
      <!-- key是优化底层的处理逻辑，提高性能表面上看不出来的 -->
      <!-- key必须是一个唯一性的代表某个元素的标识 -->
    </div>
  </div>
</template>

<script>
export default {
          
          
  data() {
          
          
    return {
          
          
      names: ["小张", "王大麻子", "赵二狗", "三胖", "小新", "涛哥"],
      // vue的核心：数据驱动凡是数据会变化的都有数据在驱动
      current:1,
      // 当前页号

    };
  },
};
</script>

<style lang="scss">
* {
          
          
  margin: 0px;
  padding: 0px;
}
// 如果报错sass-loader就是没有插件
#pages {
          
          
  background-color: linen;
  padding: 20px;
  user-select: none;
  span {
          
          
    height: 50px;
    width: 50px;
    text-align: center;
    display: inline-block;
    line-height: 50px;
    background-color: white;
    color: #4e6ef2;
    border-radius: 4px;
    margin: 5px;
    transition: 0.7s;
    // &读取当前所在的父，即span
    &:hover {
          
          
      background-color: #4e6ef2;
      color: aliceblue;
    }
    // 点击就激活
    &.active {
          
          
      background-color: #4e6ef2;
      color: aliceblue;
    }
  }
}
</style>

ref：把一个变量和DOM元素绑定在一起存储在 $refs 里面

演示案例：

<template>
  <div>
    <input type="text" />
    <br>
    <input type="text" ref="inp"/>
    <!-- ref可以把一个变量绑在一个元素上 -->
    <br>
    <input type="text" />
    <br>
    <button @click="dofocus">获得焦点</button>
    <p ref="thep">hello world</p>
  </div>
</template>

<script>
export default {
          
          
  methods: {
          
          
    dofocus() {
          
          
      console.log("dofocus");
      // 点击后让第二个输入框获得焦点

      // 原生:先查查到之后再去获得焦点
      // const inp = document.querySelectorALL("input")[1];
      // inp.focus()
      console.log("$ref:",this.$refs);
      // 使用ref属性会把变量绑定在变量上存储在$refs属性中
      console.log(this)
      this.$refs.inp.focus()
      this.$refs.thep.style.color="red"
      this.$refs.inp.style.width="1000px"

    }
  },
};
</script>

<style lang="scss" scoped>
</style>

Vue生命周期

beforeCreate
- 在创建组件之前
created
- 开始创建
beforMount
- 开始挂在到页面，用户可监视
Mounted
beforUpdate
- 开始更新
update
activated
deactivated
- 销毁结束
befordeactive
- 销毁结束
destroed
errorCaptured

生命周期案例

由于生命周期属性太多了，我这里就用最常用的来举例

<template>
  <div>
    <!-- 指令的生命周期:相当于的从出生到最后GG的过程 -->
    <!-- 比如一个人:备孕>怀孕>待产>出生>学习>...>快GG了>GG -->
    <!-- 指令:创建>绑定在DOM元素上>寄生再DOM上>销毁 -->
    <!-- 举例 -->
    <input type="text" v-focus />
    <input type="text" v-focus />
    <input type="text" v-focus />
    <!-- 自定义指令:focus调用focus获取焦点 -->
  </div>
</template>

<script>
export default {
      
      
  directives: {
      
      
    // DOM的生命周期
    // 创建>设置属性>最后添加到页面属性
    // 比如创建一个按钮
    // 创建:const btn document.createElement("button")
    // 配置属性: btn.className = "danger" ; btn.innerText="xxx"
    // 位置一:btn.focus()
    // 添加到页面:box.appendChild(btn)
    // 位置二:btn.focus()
    // 
    // 若想让元素获得焦点,代码怎么写?

    focus:{
      
      
      // 自选生命周期.来触发函数
      // bind //还在发育:创建时(还没添加到页面)
      // inserted  //出生:添加到页面上的时候
      // update //发育:目标更新
      // componentsUpdated //成年:组件更新时
      // unbind //GG去世:移除的时候
      inserted(el){
      
      
        // insert //数据库的时候出现过:插入
        // 指令所在的元素,添加到页面上的时候
        el.focus()
      }
    }
    // focus(el, text) {
      
      
    //   console.dir(el);
    //   // 找 原型>原型>原型里面
    //   // 作用:让DOM元素获得焦点
    //   el.focus();
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>

computed:计算属性

特点：在使用时不需要（）能自动触发
注意的点：不适合事件触发的函数，因为事件触发的函数必然是手动触发的

练习

1.制作待办事项
在这里插入图片描述

实现的效果

在这里插入图片描述

代码框架

<template>

</template>

<script>
export default {
      
      

};
</script>

<style lang="scss" scoped>
.warning {
      
      
  background-color: aqua;
  width: 200px;
  line-height: 40px;
  text-align: center;
  color: white;
  border-radius: 4px;
}
li{
      
      
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(95, 145, 165);

}
</style>

答案

<template>
  <div>
    <div id="mian">
      <input type="text" placeholder="请输入待办事项" v-model="kw" @keyup.enter="todolist.push(kw);kw='';"/>
      <button  :disabled="kw==''" @click="todolist.push(kw);kw=''; ">确定</button>
      <ul>
        <h3>待办事项</h3>
        <li v-for="(todo,i) in todolist" :key="i">
          <span>{
   
   {todo}}</span>
          <button @click="dellist(i)">删除</button>
          <!-- 修饰符：按下之后的按键 -->
        </li>
      </ul>
      <div class="warning" v-if="todolist.length ==0">暂无待办事项</div>
    </div>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    dellist(i){
      
      
      this.todolist.splice(i,1)
    }
  },
  data() {
      
      
    return {
      
      
      todolist: ['吃饭','睡觉','大量两'],
      // 输入框的是双向绑定
      kw:"",
    };
  },
};
</script>

<style lang="scss" scoped>
.warning {
      
      
  background-color: aqua;
  width: 200px;
  line-height: 40px;
  text-align: center;
  color: white;
  border-radius: 4px;
}
li{
      
      
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(95, 145, 165);

}
</style>