Vue --- basic instruction

Form command

Instructions:

v-model

Text Box

<input type="text" name="name" id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1" name="user">

v1:'123'     先定义一个默认值

Data will be two frame linkage, a value box will change with a value of two outer frame varies

Single box

<p>男：<input type="radio" name="sex" value="male" v-model="v2"></p>
<p>女：<input type="radio" name="sex" value="female" v-model="v2"></p>

v2:'female'  默认选择的是female，页面刷新之后就会默认选择自定义的属性，必须与value一起使用

checked    表示默认选中,参数

Checkbox

111：<input type="checkbox" name="hobbies" value="111" v-model="v3">
222：<input type="checkbox" name="hobbies" value="222" v-model="v3">
333：<input type="checkbox" name="hobbies" value="333" v-model="v3">

v3:['111','222']   会在页面上自动默认选中自己定义的框

id and name and value

id
number id is unique, an id only once.
Generally often in JavaScript.

value

1. value with buttons refer to the text on the buttons to be displayed such as "OK", "delete", etc.
2. Box for the value refers to the value of this box
3. Radio buttons and check boxes with the same value
4. The drop-down menu with a list of value is the value of each child
5. Hidden field with the value is displayed inside the box contents

The value of the background check box if you want the contents of that value to take when you are in form data pages to obtain data to obtain is the value of

name

1. name is the name of the control (s controls may take the same name), value is the value of the control;
2. Not the value of all the controls are displayed, such as checkbox, radio, hidden;
3. name and value of defined controls can get this control and its value on the server;
4. Did not see submit the name, does not mean that the browser ignores its name, before submitting it also defines the browser
5. name, the server can get the same name and its value;
6. Controls do not define name / value may be displayed only for convenience and distinguished server receives only define its name / value
7. Of course, only the button value and its value is located, but also to display.

Simply means that the operation of the form, vue is a framework written in the preceding paragraph, these instructions are a number of operations on the front end.

Conditional instructions

The condition is judged, if the conditions are set up on the implementation of the conditions is not satisfied, do not perform

v-show = "布尔变量"     会以display的行式显示

v-if = "布尔变量"            为false的时候， 直接就不显示，页面代码也不显示，用的最多（保证不渲染的数据泄露）

v-if

v-if
v-else-if
v-else

Cycle instruction

Use loop instruction by:

v-for = " c in info" 

v-for = " (k,v) in info"

v-for = "(v,k,i) in info"

Use Case

 <i v-for="c in info">{{ c }} </i>

<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>

<div v-for="e in stus">{{ e }}</div>

<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>

<div v-for="v in people">{{ v }}</div>

<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>

<div v-for="tea in teas">
    <span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div>      # 可以循环嵌套标签使用

For some methods for recycling of

unshift,   push   是首尾增

shift，pop    是首尾删

数组操作最全的方法：splice
splice(begin_index，count，...argsl,)

Separator (Learn)

Template syntax and grammar vue used in the normal front page rendering using the conflict, in order to distinguish, use the following method to distinguish

{{ msg }}    # 正常的div页面

[{ msg }]    # vue实例的页面中使用

filter

Effect of the filter is a filter value, the output value in accordance with the requirements of

1. Definitions filters in the filter method

2. A plurality of values ​​may be filtered, the filter can have additional auxiliary parameter passed

3. Filter the results can be filtered once again be

<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>

filters: {
      // 传入所有要过滤的条件，返回值就是过滤的结果
      f1 (num) {
          console.log(num);
          return num * 10;
          },
      f2 (a, b, c, d) {
           console.log(a, b, c, d);
           return a + b + c + d;
           },
       f3 (num) {
           return num * num;
           }
        }

Computed Property

1.computed computed attribute can be declared, a method attribute (attribute method is not necessarily repeated in data declarations)

2. The method attribute must render the page, will enable the binding method, binding method is the return value of the method attribute

3. The method of binding all the variables that appear in the monitor will be, any change in the value of re-triggering update will bind methods to update the value of the property method

4. The general problem to be solved: a variable dependent on a plurality of variables

<div id="app">
    <input type="number" min="0" max="100" v-model="n1">
    +
    <input type="number" min="0" max="100" v-model="n2">
    =
    <button>{{ result }}</button>
</div>

data: {
    n1: '',
    n2: '',
      },
computed: {
     result () {
         console.log('被调用了');
         n1 = +this.n1;
         n2 = +this.n2;
         return n1 + n2;
            }
        }

Listener Properties

n is the current value of attribute listening, o is a value which, every time the attribute value of the callback listener listens Method

to sum up:

1. The listener properties need to be declared in the data, the method does not require the listener return value

2. listener method name is the property name listener will listen for a callback method when the property value is updated

3. monitor callback method has two parameters, the current value, the last value

To solve the problem: a variable dependent on multiple variables

<div id="app">
   <p>姓名：<input type="text" v-model="full_name"></p>
   <p>姓：{{ first_name }}</p>
   <p>名：{{ last_name }}</p>
</div>

new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知',
        },
        watch: {
            full_name(n, o) {
                name_arr = n.split('');
                this.first_name = name_arr[0];
                this.last_name = name_arr[1];
            },
        }
    })

Bubble Sort

<script>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
<script>
    # 例1 将数组中的值进行排列
    let arr = [3, 2, 5, 4, 1];
    
    for (let i = 0; i < arr.length - 1; i++) {  // 外层循环控制趟数
        for (let j = 0; j < arr.length - 1 - i; j++) {  // 内存循环控制比较次数
            if (arr[j] > arr[j + 1]) {
                let temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);

    # 例2 按照分数来进行排列
    stus = [
        {
            name: 'Bob',
            grade: 98
        },
        {
            name: 'Tom',
            grade: 87
        },
        {
            name: 'Jerry',
            grade: 92
        },
    ];
    // 按照分数进行排名
    for (let i=0; i<stus.length-1; i++) {
        for (let j=0; j<stus.length-1-i; j++) {
            // 处理条件即可
            if (stus[j].grade > stus[j + 1].grade) {
                let temp = stus[j];
                stus[j] = stus[j + 1];
                stus[j + 1] = temp;
            }
        }
    }
    console.log(stus);

</script>