Vue基础 - 技术栈

[1 基础语法](#1 基础语法)

v-text

v-html

v-on

[2 简单应用](#2 简单应用)

[2.1 计数器](#2.1 计数器)

[2.3 网页记事本](#2.3 网页记事本)

2.3.1所用知识

2.3.2代码及结果展示

1 基础语法

v-text

设置标签的内容（要替换部分字符用差值表达式{{}}）

v-html

可以存放纯文本，内容中有html结构会被解析为标签

v-on

为元素绑定事件，事件名不需要写on,可以简写指令为@

事件后跟上**.修饰符**可以对事件进行限制

v-show

根据真假切换元素的显示和隐藏，指令后面的内容会被解析为bool值

注：也可以直接在式子中用bool式（如 <h2 v-show="age>18" v-text="star" > </h2> ）

v-if

用法跟v-show一样，但是v-if修改的是dom元素（dom树中元素的移除/添加），对资源消耗较大

v-bind

设置元素的属性，可简写为 :属性

v-for

根据数据生成列表结构，数组常和v-for结合使用，语法一般为(i ,index) in 数据

v-model

获取和设置表单元素的值（双向数据绑定，同步更新值）

2 简单应用

2.1 计数器

2.1.1所用知识

（1）el(挂载点)，data(数据)，methods(方法)

（2）v-on指令作为绑定事件，简写为@

（3）通过this关键字获取data数据

2.1.2代码及结果展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello world</title>
  </head>
  <body>
    <div id="app">
      <button @click="sub">
        -
      <button>
      <span>{{num}}</span>
      <button @click="add">
        +
      <button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app=new Vue({
        el:"#app",
        data:{
          num:1
        },
        methods:{
          add:function(){
            if (this.num<10){
              this.num++
            }else
            alert("stop,no more")            
          },
          sub:function(){
            if (this.num>0){
              this.num--
            }else
            alert("stop,no smaller")
          }
        }

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

2.2图片切换

2.2.1所用知识

列表数据用数组保存

2.2.2代码及结果展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello chicken</title>
  </head>
  <body>
    <div id="mask">
      <h2 class="title">
        I K U N
      </h2>
      <img :src="imgArr[index]">
    
      <a href="javascript:void(0)" @click="prev" v-show="index>0" >
      <br>
      <input type="button" value="上一张">
      </a>
    
      <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length -1" >
        <input type="button" value="下一张">
      </a>
    </div> 

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
    <script>
      var app=new Vue({
        el:"#mask",
        data:{
          index:0,
          imgArr:["https://img0.baidu.com/it/u=910898461,3729592231&fm=253&fmt=auto&app=120&f=JPEG?w=1174&h=733",
                  "https://img0.baidu.com/it/u=334282167,2599872929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
                  "https://img1.baidu.com/it/u=182809259,608048952&fm=253&fmt=auto&app=120&f=JPEG?w=495&h=299",
                  "https://img0.baidu.com/it/u=3163905801,1801334695&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500",
                  "https://img0.baidu.com/it/u=2291712305,2704760041&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"],

        },
       methods:{
        prev:function(){
          this.index--
        },
        next:function(){
          this.index++
        }
        }
       }          
      )
    </script>
  </body>
</html>

2.3 网页记事本

2.3.1所用知识

1.v-for将数组和列表进行关联，向数组中添加内容实现元素的新增

2.索引结合事件传参实现删除

3.数组的长度通过v-test相关指令渲染到页面上

4.所绑定的数组消失，即为清空

5.列表没有数据时隐藏

2.3.2代码及结果展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello world</title>
  </head>
  <body>
    <h1>记事本</h1>
    <section id ="app">
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
      <li v-for="(item,index) in list" >
        <div>
          <span>
          {{index+1}}
          </span>
          <label>
            {{item}}
          </label>
          <input type="button" value="删除" @click="remove(index)"></input>          
        </div>        
      </li>
      <input type="button" value="清空" @click="moveOut" v-show="list.length!=0" >
      <h2 v-if="list.length!=0">{{list.length}}个事件</h2>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app=new Vue({
        el:"#app",
        data:{
          list:["吃饭","睡觉","打豆豆"],
          inputValue:"听歌",
        },
        methods:{
          add:function(){
            this.list.push(this.inputValue)
          },
          remove:function(index){
            console.log(index)
            this.list.splice(index,1)
          },
          moveOut:function(){
            this.list=[]
          }          
        }
        }              
      )
    </script>
  </body>
</html>