快速入门vue，含实战案例，“建议收藏”，用到省的百度了#yyds干货盘点#

Posted 2021-12-22 前端老实人

 初识Vue

<div id="app">
    <!-- mustache语法中，不仅可以直接写变量，也可以写简单的表达式 -->
    <h2>message+name</h2>
    <h2>mesage+ +neme</h2>
    <h3>message</h3>
    name
  </div>

<script>
    //let(变量)/const(常量)
    //编程范式：声明式编程
    const app = new Vue(
      el: "#app",//用于挂载要管理的元素
      data: //定义数据
        message: 你好,
        name: "zaima"
      
    )
        //js的编程范式是命令式编程，要一步一步明确指定
  </script>

遍历数组

<div id="app">
    <ul>
      <li v-for="item in movies">item</li>
    </ul>
  </div>

<script>
    const app = new Vue(
      el: "#app",
      data: 
        message: 你好,
        movies: [海王, 星际穿越, 少年派, 盗梦空间]
      
    )
  </script>

v-bind

基本使用

<!-- 不加v-bind就无法动态获取vue里的东西 -->
  <div id="app">
    <!-- v-bind的简写是: -->
    <a rel="nofollow" :href="aHref"></a>
    <img v-bind:src="对应图片地址" >
  </div>

<script>
    // hook钩子
    const app = new Vue(
      el: #app,
      data: 
        message: 你好吖,
        aHref: "www.baidu.com"
      
    )
  </script>

v-bind动态绑定class（对象语法）

<div id="app">    //哪个类名为true就添加哪个类
    <!-- <h2 v-bind:class="类名1:true,类名2:布尔值">message</h2> -->
    <!-- 下面类名可以同时添加 -->
    <!-- <h2 class="title" v-bind:class="active:isActive,line:isLine">message</h2> -->
    <!-- 里面也可以加函数 -->
    <h2 class="title" v-bind:class="getClasses()">message</h2>
  </div>

<script>
    // hook钩子
    const app = new Vue(
      el: #app,
      data: 
        message: 你好吖,
        isActive: true,
        isLine: true
      ,
      // 里面放事件，函数都放进来
      methods: 
        btnClick: function () 
          this.isActive = !this.isActive
        ,
        // 调用data里的方法都要加this
        getClasses:function()
          return active:this.isActive,line:this.isLine
        
      
    )
  </script>

v-bind动态绑定style（对象语法）

<div id="app">
    <!-- <h2 v-bind:style="key(属性名):value(属性值)">message</h2> -->
    <!-- 属性值变量不用加单引号，固定值加单引号，不加单引号会当变量解析 -->
                //fontSize = font-size 在vue里前面有-要大写字母
    <h2 :style="fontSize:finalSize + px,backgroundColor: finalColor">message</h2>
    <h2 :style="getStyles()">message</h2>
  </div>
  <script>
   const app = new Vue(
      el: #app,
      data: 
        message:你好吖,
        finalSize:50,
        finalColor:red
      ,
      methods:
        getStyles:function()
          return fontSize:this.finalSize + px,backgroundColor: this.finalColor
        
      
    )
</script>

computed 计算属性

基本使用

<div id="app">
   <h2>总价格：totalPrice</h2>
  </div>
  <script>
   const app = new Vue(
      el: #app,
      data: 
        books:[
        id:110,name:"编程艺术",proce:119,
        id:111,name:"代码大全",proce:119,
        id:112,name:"深入理解计算机原理",proce:119,
        id:113,name:"现代操作系统",proce:119,
        ]
      ,// computed计算属性
      computed:
        // 计算总价格
        totalPrice:function()
          let result=0;
          for(let i=0; i<this.books.length; i++)
            result += this.books[i].proce
          
          return result
        
      
    )
  </script>

v-on事件的监听

v-on的参数问题

<div id="app">
    <!-- 1.事件调用的方法没有参数 -->
    <button @click="btn1Click()">按钮一</button>
    <button @click="btn1Click">按钮一</button>
    <!-- 2.事件在定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，
      这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法 
       如果方法不需要参数可以省略小括号-->
      <!-- <button @click="btn2Click(123)">按钮二</button>
      <button @click="btn2Click()">按钮二</button> -->
      <button @click="btn2Click">按钮二</button>
      <!-- 3.方法定义时，我们需要event对象，同时有需要其他参数 -->
      <!-- 在调用方式，如何手动获取到浏览器参数的event对象：$event -->
                               <!-- abc不加引号就当作变量 -->
      <button @click="btn3Click(abc,$event)">按钮三</button>
  </div>
  <script>
  const app = new Vue(
      el: #app,
      data: 
        message:你好吖,
        abc:123
      ,
      methods:
        btn1Click()
          console.log("btn1Click");
        ,
        btn2Click(event)
          console.log("------",event);
        ,
        btn3Click(abc,event)
          console.log(+++++,abc,event);
        
      
    )
</script>

v-on的修饰符

<div id="app">
    <!-- 1.stop修饰符,阻止了下面事件的冒泡 -->
    <div @click="divClick">
      <button @click.stop="btnClick">按钮</button>
    </div>
    <!-- 2.prevent修饰符,阻止了下面事件向百度提交 -->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
    <!-- 3.监听某个键盘的键帽,enter只执行keyUP(回车)一个键位 -->
    <input type="text" @keyup.enter="keyUp">
    <!-- 4.once修饰符,只能执行一次 -->
    <button @click.once="btn2Click">按钮2</button>
  </div>
  <script>
   var vm = new Vue(
      el: #app,
      data: 

      ,
      methods: 
        btnClick() 
          console.log("btnclick");
        ,
        divClick() 
          console.log("divclick");
        ,
        submitClick() 
          console.log("submitclick");
        ,
        keyUp() 
          console.log("keyup");
        ,
        btn2Click() 
          console.log("btn2click");
        
      
    );
</script>

条件判断

v-if和v-else的使用

<div id="app">
    <!-- v-if 当条件为false时,包含v-if指令的元素,根本不会出现在dom中 -->
    <!-- v-show 当条件为false时,只是包含v-show指令的元素看不到了,但是还存在网页代码中 -->
    <!-- 跟js的if语句相似，也可以用函数判断决定那个为true -->
    <h2 v-if="isShow">
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
    </h2>
    isShow为false时，显示我
  </div>
  <script>
  const app = new Vue(
      el: #app,
      data: 
        isShow:false,
      ,
      methods: 
    );
 </script>

用户登录切换案例

<div id="app">
    <span v-if="isUser">
      <!-- label里的username这个属性指向input里的id,这样点击label里的文字也可以获取焦点 -->
      <label for="username">用户账号</label>
      <!-- 如果不希望文本框的内容被复用就用key设置不同的值,这样文本框才会重新渲染 -->
      <input type="text" id="username" placeholder="用户账户" key="username">
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱" key="email">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
  </div>

  <script>
    const app = new Vue(
      el: #app,
      data: 
        isUser: true,
      ,
      methods: 
    );
  </script>

v-for循环遍历

基本使用

 <div id="app">
   <ul>
     <!-- <li v-for="item in info">item</li>把所有数组或所有对象的value（属性值） -->
     <!-- value获取值，key获取名字 info遍历的对象-->
     <li v-for="(value,key) in info">value-key</li>
     <!-- index获取下标 -->
     <li v-for="(value,key,index) in info">value-key-index</li>
    </ul>
  </div>

  <script>
    const app = new Vue(
      el: #app,
      data: 
        info:
          name:why,
          age:18,
          height:1.88
        
      ,
      methods: 
    );
  </script>

补充：数组中那些方法是响应式

<div id="app">
    <ul>
      <!-- 加key可以提高效率,一般加 :key="item -->
      <li v-for="item in letters">item</li>
    </ul>
    <button @click="btnClick">按钮</button>
  </div>

  <script>
    const app = new Vue(
      el: #app,
      data: 
        letters: [a, b, c, d]
      ,
      methods: 
        btnClick() 
          // 1.push方法，从最后添加多个元素
          // this.letters.push(aaa,bbb)
          // 4.unshift(),从数组最前面添加元素多个元素
          // this.letters.unshift(aaa)
          // 2.pop()，从最后删除
          // this.letters.pop();
          //  3.shift(),从第一个删除
          // this.letters.shift();
          // splice()作用：删除/插入/替换元素
          // 删除元素：第二个参数传入你要删除几个元素（如果不传，就删除后面所有）
          // 替换元素：第二个参数，表示我们要替换几个元素，后面是用来替换前面的元素
          // (可以说第二个值后面都是添加的值，加几个都可以)
          // this.letters.splice(1,2,m,n,l,o)
          // 插入元素：第二个写0，并跟上要插的元素
          // this.letters.splice(1,0,ha,he)
          // 5.sort()排序
          // 6.reverse()反转
          // this.letters.reverse()
          // 7.vue里的内部的函数
          // Vue.set(要修改的对象，索引值，修改后的值)
          // Vue.set(this.letters,0,bbb)

          // 2.通过索引值修改数组中的元素,页面不会自动刷新，因为不是响应式的方法,别用这种方式
          // this.letters[0]=bbb;
          // function sum(...num)
          //   ...可以添加多个元素
          // 
          // sum(1,2,3,4);
        
      
    );
  </script>

点击切换颜色 案例

<div id="app">
    <ul>       <!--class里的active为true才用这个类 ,      点击第几个下标-->
      <li v-for="(item,index) in movies"
       :class="active:currentIndex === index" @click="liClick(index)">item
      </li>
    </ul>
  </div>

  <script>
    const app = new Vue(
      el: #app,
      data: 
        movies: [海王, 海贼王, 海尔兄弟, 加勒比海盗],
        currentIndex: 0
      ,
      methods: 
        liClick(index) 
          // 让currentIndex等于点击的下标,这样第几个下标就变色了
          this.currentIndex = index
        
      
    );
  </script>

v-mode(双向绑定)

v-mode基本使用

 <div id="app">
    <!-- v-mode用于表单的双向绑定，文本框的值改变data里对应的值也改变 -->
    <label for="male">
      <!-- input里添加name属性值相同他们就只能选择一个选项，互斥 -->
      <!-- v-model的值相同也会互斥 -->
    <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
      </label>
      <h2>您选择的性别是：sex</h2>
  </div>

  <script>
    const app = new Vue(
      el: #app,
      data: 
        // 这里写啥就默认选中啥，传的是value值
        sex:男
      ,
      methods: 
    );
  </script>

v-mode结合checkbox

<div id="app">
    <!-- 1.checkbox单选框 ,v-model对应布尔类型-->
    <!-- <label for="agree"> -->
    <!-- 点击之后isAgree就true了,因为下面disabled取反了 -->
    <!-- <input type="checkbox" id="agree" v-model="isAgree">同意协议 -->
    <!-- </label> -->
    <!-- <h2>您的选则是：isAgree</h2> -->
    <!-- disabled的值为ture就禁止点鸡了 -->
    <!-- <button :disabled="!isAgree">下一步</button> -->

    <!-- 2.checkbox多选框,v-model对应数组类型 -->
    <!-- 选中之后获取value值 -->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h2>您的爱好是:hobbies</h2>
  </div>

  <script>
    const app = new Vue(
      el: #app,

      data: 
        isAgree: false,//单选框
        hobbies: []  //多选框
      ,
      methods: 

      
    );
  </script>

v-mode修饰符

<div id="app">
    <!-- 1.修饰符：lazy  这个修饰符鼠标焦点消失之后才传给vue值 -->
    <input type="text" v-model.lazy="message">
    <h2>message</h2>
    <!-- 2.修饰符：number  改成数字类型，原本是字符串类型    
      。 type="number"这个表示只能输入数字，但获取的是字符串的数字 -->
    <input type="number" v-model.number="age">
    <h2>age-typeof age</h2>
    <!-- 3.修饰符：trim     去除两侧空格-->
    <input type="text" v-model.trim="name">
    <h2>您输入的名字：name</h2>
  </div>

  <script>
    const app = new Vue(
      el: #app,
      data: 
        message:你好吖,
        age:0,
        name:
      ,
      methods: 
    );
  </script>

最后 

如果对您有帮助，希望能给个