Vue基础知识梳理

Posted JackySei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础知识梳理相关的知识，希望对你有一定的参考价值。

part1

简单指令的学习

<!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>
    <script src="https://how2j.cn/study/vue.min.js"></script>
</head>
<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    
    <div id="app">
        <p v-cloak>{{msg}}</p>
        <!-- v-text没有闪烁问题，但却覆盖元素中内容 -->
        <h4 v-text="msg"></h4>
        <div v-html="msg2"></div>
        <input type="button" value="一个按钮" v-bind:title="mytitle + '123'">
        <!-- v-bind:简写-> : v-click:简写-> @ -->
        <input type="button" value="一个按钮" :title="mytitle + '123'" id="btn" @click="show">
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"123",
                msg2:"<h1>123456</h1>",
                mytitle:"这是自定义的title",
            },
            methods: {
                show: function(){
                    alert(123);
                }
            },
        });
    </script>
</body>
</html>

运用简单指令实现一个走马灯效果

<!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>
    <script src="https://how2j.cn/study/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="run" @click="run">
        <input type="button" value="stop" @click="stop">
        <p>{{textmsg}}</p>

    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            textmsg:"这是走马灯内容",
            IntervalID:null,
        },
        methods: {
            run:function(){
                if(this.IntervalID!=null) return;
                this.IntervalID=setInterval(()=>{
                console.log(this.textmsg)
                var start=this.textmsg.substring(0,1)
                var end=this.textmsg.substring(1)
                this.textmsg=end+start;
                },500)
            },
            stop:function(){
                clearInterval(this.IntervalID);
                this.IntervalID=null;
            }
        },

    });
</script>
</html>

常见指令修饰符

<!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>
    <script src="https://how2j.cn/study/vue.min.js"></script>
</head>
<style>
    .inner{
        width: 100%;
        height: 500px;
        background-color: aquamarine;
    }
</style>
<body>
    
    <!-- <div id="app" class="inner" @click.capture="divhandler"> -->
    <div id="app" class="inner" @click.self="divhandler">
        <!-- <input type="button" value="戳他1" @click.stop="btnhandler"> -->
        <input type="button" value="戳他2" @click="btnhandler">
        <a href="https://www.baidu.com" @click.prevent="baidu">baidu</a>
        <a href="https://www.baidu.com" @click.prevent.once="baidu">baidu</a>
 
        <!-- self只阻止了自己的冒泡，而stop阻止了上面所有的冒泡 -->
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"123",
                msg2:"<h1>123456</h1>",
                mytitle:"这是自定义的title",
            },
            methods: {
                btnhandler(){
                    console.log("btn点击")
                },
                divhandler(){
                    console.log("div点击")
                },
                baidu(){
                    console.log("baidu")
                }
            },
        });
    </script>
</body>
</html>

v-model进行双向绑定

<!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>
</head>
<body>
  <div id="app">
      <h4>{{msg}}</h4>
      <!-- v-bind只能实现单向绑定 v-model可以实现双向绑定 只运用在表单中s -->
      <input type="text" v-model="msg">
  </div>
  <script src="./vue.min.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
          msg:"星空不问赶路人，时光不负有心人"
      },
      methods:{

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

双向绑定，模拟计算器demo

<!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>
</head>
<body>
  <div id="app">
      <input type="text" v-model="n1">
      <select v-model="ope">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
      </select>
      <input type="text" v-model="n2">
      <input type="button"  value="=" @click="eq">
      <input type="text" v-model="result" value="">
  </div>
  <script src="./vue.min.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
          n1: 0,
          n2: 0,
          result: 0,
          ope: '+',
      },
      methods:{
          eq:function(){
            //   尽量不要使用eval（）这里只是为了方便,可以使用switch.
              this.result=eval(this.n1+this.ope+this.n2);
          }
      }
     });
  </script>
</body>
</html>

在这里插入图片描述

给标签绑定class样式的几种方式

<!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>
</head>
<style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic;
    }
    .active{
        letter-spacing: 0.5em;
    }

</style>
<body>
  <div id="app">
      <h1 class="red thin">只是一个简单的h1</h1>
      <!-- 第一种使用方式 传递数组 v-bind -->
      <h1 :class="['red','thin']">只是一个简单的h1</h1>
      <!--  使用三元表达式-->
      <h1 :class="['red','thin',flag?'active':'']">只是一个简单的h1</h1>
      <!--  使用对象的方式，提高代码可读性-->
      <h1 :class="['red','thin',{'active':flag}]">只是一个简单的h1</h1>
      <!-- 直接使用对象 -->
      <h1 :class="classObj">只是一个简单的h1</h1>
  </div>
  <script src="./vue.min.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
          flag:true,
          classObj:{thin:true,active:false}
      },
      methods:{
      }
     });
  </script>
</body>
</html>

给标签绑定style的几种方式

<!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>
  <script src="./vue.min.js"></script>
</head>  
<body>
  <div id="app">
      <h1 :style="styleObj1">这是一个h1</h1>
      <h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>
      <h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
  </div>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
          styleObj1:{color:'red','font-weight':200},
          styleObj2:{'font-style':'italic'}
      },
      methods:{
      }
     });
  </script>
</body>
</html>

v-for指令的使用方式

<!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>
</head>
<body>
  <div id="app">
      <!-- 循环普通数组 -->
      <p v-for="(item,i) in list1">{{item}}---{{i}}</p>
      <!-- 循环对象数组 -->
      <p v-for="item in list2">{{item.id}}---{{item.name}}</p>
      <!-- 遍历对象 -->
      <p v-for="(val,key,i) in user">{{key}}---{{val}}---{{i}}</p>
      <!-- 迭代数字 -->
      <p v-for="count in 10">这是第{{count}}次循环</p>


      <div>
          <label for="">
              ID:<input type="text" v-model="id">
          </label>
          <label for="">
              Name:<input type="text" v-model='name'>
          </label>
          <input type="button" value="添加" @click="add">
      </div>
      <!-- key属性的使用 -->
      <!-- 用key指定唯一字符串/数字 确保一一对应 -->
      <p v-for="item in list3" :key="item.id">
          <input type="checkbox">
          {{item.name}}
        </p>
  </div>
  <script src="./vue.min.js"></script>
  以上是关于Vue基础知识梳理的主要内容，如果未能解决你的问题，请参考以下文章
 

 vue 路由知识点梳理及应用场景整理


 Vue Router 知识点梳理


 Vue.js 2.0 快速上手精华梳理


 [vscode]--HTML代码片段（基础版，reactvuejquery）


 前端芝士树Vue.js面试题整理 / 知识点梳理


 VSCode自定义代码片段1——vue主模板