Some examples of vue foundation recommended collection

data: data

Used to store data, the data here can be used globally
When the data changes, the relevant DOM elements will be automatically updated

methods: method

Used to store various methods,
this is the current vue object
instruction: it is a set of attributes provided by vue, all of which start with v-

methodsBasic instructions

v-text : innertext
Demo case:

<!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 : Equivalent to innerhtml, the original display does not parse the value inside the double curly braces

v-if : delete the DOM element to hide

v-else , v-else-if

Test Case

<!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 : use css method to display and hide (display: nono/block)
v-for: loop

Format:

v-for="value in/of array"
v-for="(value, ordinal) in/of array"
Indicates iterating over numbers (v-for="value in number"

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 : event binding

Equivalent to native : onclick, vue is v-on: click
Simplified/shorthand : @
For example : an element on the visible page is clicked, focused, out of focus, etc. Operations
:

<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>

After clicking num++

insert image description here

v-bind : attribute binding
- Attribute name = "JS code"

v-model : two-way data binding

Direction 1 : traditionally transfer the data in data to DOM elements
Direction 2 : It must be a form form element to interact with the user. When the user modifies the DOM element, the data item can be updated synchronously

Test Case

<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 : Display the code as it is, especially { {}}, that is, display it as it is without performing vue operations

Test Case

<!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 : One-time, after the first rendering, subsequent data changes will not refresh the DOM element
demonstration case

<!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 : unique identifier

Cooperate with v-for to improve the re-rendering efficiency after array changes
It’s better to write vscode, although if you don’t write the code, you won’t report an error, the master vscode will mark it

Demo case:

	<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 : Bind a variable to a DOM element and store it in $ refs

Demo case:

<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 life cycle

beforeCreate
- before creating the component
created
- start creating
beforMount
- Start hanging on the page, users can monitor
Mounted
beforUpdate
- Start Update
update
activated
deactivated
- end of destruction
befordeactive
- end of destruction
destroed
errorCaptured

life cycle case

Since there are too many life cycle attributes, I will use the most commonly used ones as examples here

<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: computed properties

Features: It does not need () to be automatically triggered when using.
Note: It is not suitable for event-triggered functions, because event-triggered functions must be manually triggered

practise

1. Make a to-do list
insert image description here

Achieved effect

insert image description here

code frame

<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>

Answer

<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>