A, 뷰 프레임

공식 웹 사이트

vue框架：渐进式JavaScript框架
    vue一个环境：可以只控制页面中一个标签、可以控制一组标签、可以控制整个页面、可以控制整个项目
    vue可以根据实际需求，选择控制前端项目的区域范围

왜 공부 VUE

"""
1、html、css、js直接开发项目，项目杂乱，不方便管理，要才有前端框架进行开发，规范项目
2、Angular、React、Vue三个前端框架，吸取前两个框架的所有优点，摒弃缺点，一手文档是中文
3、Vue框架优点：
    轻量级
    数据驱动
    数据的双向绑定
    虚拟DOM（嵌套页面架构的缓存）
    组件化开发
    由全球社区维护
    
    单页面应用、MVVM设计模式
"""

두, 뷰 명령

가져 오기 뷰
```
<script src="vue/vue.js"></script>
```

2.1 마운트 포인트

EL이 마운트 포인트 객체 파라미터들의 예는 단지 CSS3 선택기 구문 라벨 제어 대상 페이지의 범위를 결정 VUE 페이지 바인딩, 전달

결과가 일치하는 첫 번째 페이지 만 검색 할 마운트 포인트, 그것은 일반적으로 단지 지점 ID 선택기를 탑재한다
마운트 포인트로서 HTML 태그 본체 아닌 (AS 어셈블리 설명)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入-挂载点</title>

</head>
<body>
    <div id="app">

    </div>
</body>
<script src="vue/vue.js"></script>
<script>
    // el为挂载点，才有css3选择器语法与页面标签进行绑定，决定该vue对象控制的页面范围
    //
    // 2.html与body标签不可以作为挂载点（组件中解释）
    new Vue({
        el: '#app',
    })
</script>
</html>

2.2 변수 VUE

VUE 인스턴스 뷰 액세스 인스턴스 멤버 (변수). \ (회원 이름, EG :. '앱 \) El`
보간 표현은 {{ }}기본적인 작업을 완료 할 수 있습니다
보간 식 변수 인스턴스 회원 데이터를 제공하도록

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue变量</title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
    </div>
    <div id="main">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
    </div>
</body>
<script src="vue/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            msg:"app_message",
            info:"app_info",
        }
    });
    var main = new Vue({
        el:"#main",
        data:{
            msg:"main_message",
            info:"main_info",
        }
    });
    console.log(app.info);  // 简写
    console.log(main.info);

    // 创建vue实例（new Vue）传进去的字典(对象)的key，称之为vue实例成员(变量)
    // 访问实例成员，用 vue实例.$成员名, eg：app.$el
    console.log(app.$el);
    console.log(app.$data);

    console.log(app.$data.info); // 等同于上面的简写，这是详细写法
</script>
</html>

2.3 VUE 이벤트

명령 라벨이 이벤트에 바인딩 할 수에 V-이벤트 함수 인스턴스 부재의 방법에 의해 제공된다
VUE이 예에서는 개체의 전체 VUE 객체 인스턴스를 나타낸다

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue事件</title>
    <style>
        body {
            /*页面内容不允许被选中*/
            user-select: none;
        }
        .p1:hover {
            cursor: pointer;
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <p class="p1" v-on:click="fn">这是一个段落，被点击了{{ count }}下</p>

        <p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >该便签被{{ action }}</p>

        <div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
    </div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            count:0,
            action:"渲染",
        },
        methods:{
            fn:function () {
                console.log(this);  // this代表当前该vue实例对象
                this.count++
            },
            overAction:function () {
                this.action = "悬浮"
            },
            outAction:function () {
                this.action = "离开"
            }

        }
    })
</script>
</html>

2.4 오브젝트 JS

객체 JS의 리콜

어떤 사전은 긴 개체 유형 등으로, 객체는 JS에서 사전으로 사용할 수 없습니다
키 본질은, 실제로 문자열을 생략 인용하고, 속성 이름 때문에 (사실, 1 나타날 수) 유형 문자열입니다

    let sex = '男';
    let dic = {
        'name': 'xc',
        1: 100,
        true: 12345,
        age: 18,
        // sex: 'sex',
        sex,    // 简写形式
    };

객체 클래스 선언을 만듭니다 클래스가 인스턴스화 해당하는 객체 호출에, 오브젝트 할 수 있습니다, 이것은 단지 누가 대표

    // 声明类创建对象，类可以实例化n个对象，哪个对象调用，this就代表谁
    function People(name, age) {
        this.name = name;
        this.age = age;
        this.eat = function () {
            console.log(this.name + '在吃饭');
            return 123
        }
    }
    var p1 = new People('xc', 17.5);
    console.log(p1.name);

직접 문은 현재 개체의 키}에 속하는 객체 {
{}이 방법은 일반적으로 약칭

    let stu1 = {
        name: '张三',
        age: 18,
        // eat: function () {
        //     console.log(this.name + '在吃饭');
        // }
        eat () {    // 简写形式
            console.log(this.name + '在吃饭');
        }
    };
    stu1.eat()

개요

1.{}中直接写一个变量：key与value是同名，value由该名变量提供值
2.es5下，所有的函数都可以作为类，类可以new声明对象，在函数中用 this.资源 为声明的对象提供资源
3.{}中出现的函数叫方法，方法可以简写 { fn: function(){} } => { fn(){} }

2.5 VUE 텍스트 지시

템플릿 구문의 뷰 {{}}라고도 보간 표현

보간 식 완전한 렌더링 변수 변수 기본 동작에 변수 메소드 호출은 복잡한 작업을 완료 할 수없는 (단계를 해결할 수없는 나타나지 않을 수있다)
V-텍스트 : 모든 내용이 텍스트 렌더링을
V-HTML : HTML 구문 텍스트 레이블을 구문 분석 할 수
``문 직접 HTML에서 확인 할 수 있지만, 이는 $ {변수}해야합니다

    <div id="app">
        <!-- 1、插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) -->
        <p>{{ msg }}</p>
        <p>{{ msg + "拼接内容" }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.slice(1,3) }}</p>
        <hr>
        <!--2、v-text：将所有内容做文本渲染 -->
        <p v-text="msg+'拼接内容'"></p>

        <!--3、v-html：可以解析html语法标签的文本 -->
        <p v-html="'<b>' + msg + '</b>'"></p>

        <!-- ``内的语句可以直接被html识别，但是其中的变量必须用${} -->
        <p v-html="`<b>${msg}</b>`"></p>
    </div>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            msg:"abcdefg"
        },
    })
</script>

2.6 VUE 필터

보간 가변 식 {{|}} 상기 필터 인스턴스 부재 필터에 의해 제공되는 필터
일련의 필터, 제 2 필터를 제 1 필터를 수행 한 결과이다
값은 필터를 통과 할 수있다

<body>
    <div id="app">
        <!-- 默认将msg作为参数传给filterFn -->
        <p>{{ msg | filterFn }}</p>

        <!--过滤器串联 -->
        <p>{{ num | f1 | f2 }}</p>

        <!--可以同时对多个变量进行过滤，变量用，分割，过滤器还可以额外传入参数辅助过滤-->
        <!--过滤器方法接收所有传入的参数，按传入的位置进行接收-->
        <p>{{ msg, num | f3(666, '好的') }}</p>
    </div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            msg:"你好啊",
            num :1
        },
        methods: {
            filterFn(v1, v2) {
                // console.log(v1);
                // console.log(v2);
                return `<b>${v1}</b>`;
            },
        },
        filters:{
            f1(v1){
                return v1*100;
            },
            f2(v1){
                return v1*100;
            },
            f3(v1,v2,v3,v4){
                console.log(v1);
                console.log(v2);
                console.log(v3);
                console.log(v4);
            },
        }
    })
</script>
</html>

2.7 VUE 이벤트 명령

이벤트 명령 : V-에 : 이벤트 이름 = "이벤트 기능"
속기 : 이벤트 이름 @ = "이벤트 기능"
인수 대신 이벤트 기능 추가 ()를 결합하는 전달합니다. () 추가하지 전송 파라미터를 대표하지 마십시오, 기본값은 이벤트 객체를 전달합니다
추가 이벤트 함수 매개 변수 전달 ()되면, 시스템은 수동으로 $ 이벤트에서 전달되는 이벤트 객체의 요구에 매개 변수를 전달하지 않습니다

    <div id="app">
        <!--事件指令：v-on:事件名="事件函数"  -->
        <!--简写：@事件名="事件函数"  -->
        <p v-on:click="f1">被点击了{{ count }}下</p>
        <hr>
        <p @click="f2">{{ p2 }}</p>
        <!--绑定的事件函数可以添加()，添加括号就代表要传递参数-->
        <ul>
            <li @click="f3(100)">{{ arr[0] }}</li>
            <li @click="f3(200)">{{ arr[1] }}</li>
            <li @click="f3(300)">{{ arr[2] }}</li>
        </ul>
        <!--绑定的事件函数如果没有传递参数，默认传入 事件对象 -->
        <div class="box" @click="f4">我是事件对象</div>
        <hr>
        <!--事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event -->
        <div class="box" @click="f5(10, $event)">我是参数加事件对象</div>
    </div>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            count:0,
            p2:"第二个p",
            arr:[1,2,3]
        },
        methods:{
            // 简写
            f1(){
                this.count++
            },
            f2() {
                console.log(this.p2)
            },
            f3(num) {
                console.log(num);
            },
            f4(ev) {
                console.log(ev);
            },
            f5(num,ev) {
                console.log(num,ev);
            }
        }
    })
</script>

2.8 VUE 속성 명령

특성 명령 : V-바인딩 : 속성 이름 = "변수"
:: 속기 속성 명 = "변수"
속성 지시 조작 스타일 속성 {} 변수의 복수는 복수의 속성의 세부 사항을 제어 할 수있다
속성 클래스 속성 명령 작업 :
- 두 쓸 수있는 VUE에 의해 제어, 하나를 코딩
- 제어 {} 클래스 이름, 키, 클래스 이름에 대응하는 키 입력 불리언 값으로서 클래스 이름은 함수 판단
- 제어 클래스 이름 []은 복수의

<head>
    <meta charset="UTF-8">
    <title>vue属性指令</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box1 {
            width: 150px;
            height: 150px;
            background-color: darkturquoise;
            transition: .3s;
        }
        .box2 {
            width: 300px;
            height: 100px;
            background-color: darkgoldenrod;
            transition: .3s;
        }

        .circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1.下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的-->
        <!--2.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量" -->
        <div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>

        <!--3.属性指令操作 style 属性-->
        <!-- 通常：变量值为字典 -->
        <div :style="mys1"></div>
        <!-- 了解：{中可以用多个变量控制多个属性细节} -->
        <div :style="{width: w ,height: '200px',backgroundColor: 'deeppink'}"></div>

        <!--重点：一般vue都是结合原生css来完成样式控制 -->

        <!--class可以写两份，一份写死，一份有vue控制-->
        <div class="box1" :class="c2"></div>

        <!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
        <div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>

        <!--[]控制多个类名-->
        <div :class="[c3, c4]"></div>
    </div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            title: '12345',
            xyz: 'opq',
            mys1: {
                width: '200px',
                height: '200px',
                // 'background-color': 'greenyellow'
                backgroundColor: 'pink',
            },
            w: '200px',
            c1: 'box1',
            c2: 'circle',
            cable: false,
            c3: 'box1',
            c4: 'circle'
        },
        methods: {
            changeCable(n) {
                this.cable = n;
            }
        }
    })
</script>
</html>

2.9 VUE 명령어 형식

양식 설명 : V-모델 = "변수"
가변 제어 값 V 결합 모델 폼 요소의 값
V 모델 값이 직접 결합 제어 변수 값이 일반적인 형태의 소자
단일 체크 버튼 : 부울 값
다중 체크 버튼 : 선택의 목록에서 값 입력 값
라디오 버튼 : 선택된 값의 값을 넣어

    <div id="app">
        <form action="">
            <!--属性指令：v-model="变量"，v-model绑定的变量控制的是表单元素的value值 -->

            <!--普通表单元素，用v-model直接绑定变量控制value值-->
            <p><input type="text" v-model="v1"></p>
            <textarea name="" id="" cols="30" rows="10" v-model="v1"></textarea>
            <p>{{ v1 }}</p>
            <hr>

             <!--单一复选框-->
            同意：
            <input type="checkbox" name="agree" v-model="v2">
            <hr>

             <!--多个复选框-->
            男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
            女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
            哇塞:<input type="checkbox" name="hobbies" value="wow" v-model="v3">
            <p>{{ v3 }}</p>
            <hr>

            <!--单选框-->
            中午吃啥：<br>
            肉肉:<input  name="food" type="radio" value="rourou" v-model="v4">
            饭饭:<input name="food" type="radio" value="fanfan" v-model="v4">
            <p>{{ v4 }}</p>
            <hr>
            <button type="submit">提交</button>
        </form>
    </div>
<script src="vue_lib/vue.js"></script>
<script>

    new Vue({
        el: '#app',
        data:{
            v1:"",
            v2: false,  // 布尔值，单个复选按钮
            v3: ["male","female"], // 列表中放选中的 value值，多个复选按钮
            v4: "", // ""放选中的 value值，单选按钮
        },
    })

</script>

2.10 VUE 망토 명령 (알고)

알아보기 : 케이프 명령 페이지 깜박 해결
사실 머리에, 구문 VUE 환경을로드하는 코드도 해결 될 수있다

<head>
    <meta charset="UTF-8">
    <title>vue斗篷指令</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <!--    这样也可以-->
    <script src="vue_lib/vue.js"></script> 
</head>
<body>
    <!-- 斗篷指令就是为了解决页面渲染闪烁的问题
            先导入vue环境其实就可以
    -->
    <div id="app" v-cloak>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            msg:12345
        },
    })
</script>
</html>

2.11 VUE 조건부 명령어

조건부 지침 : = 경우 V- "참 | 거짓이"거짓이 페이지에 렌더링되지 않습니다
조건부 설명 : V-쇼 = "참 | 거짓", 거짓 표시를 사용하여 페이지입니다 : 없음 렌더링하지
V-경우 가족 : V-경우, V-다른 -if, V-다른
분기 조건은 단 하나 개의 지점을 만날 수있는

    <div id="app">
        <!--条件指令：
            v-if="true|false"，为假时，在页面上不渲染
            v-show="true|false"，为假时，在页面中用display:none渲染，虽然没展示，但是任在页面结构中
        -->
        <p v-if="false">if指令</p>
        <p v-show="false">show指令</p>

        <!-- v-if是一个家族
        v-if
        v-else-if
        v-else
        1、上分支成立，下分支会被屏蔽
        2、else分支只要在所有上分支都为假时显示，且不需要条件
        -->
        <input type="text" v-model="msg">
        <p v-if="msg === 'xc'">你真帅</p>
        <p v-else-if="msg === 'baba'">傻逼</p>
        <p v-else-if="msg === 'cyx'">好看</p>
        <p v-else>傻逼，会不会打字</p>
        <hr>

    </div>
<script src="vue_lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            msg:""
        },
    })
</script>

VUE 조건부 명령어 케이스 (초점)

컬러 렌더링이 페이지를 클릭 달성하기 버튼을 클릭하고 버튼이 강조 표시됩니다. 페이지를 열고 다음 번 강조

리셉션 필요가 데이터베이스, 배경과 상호 작용을 필요로하지 않는다 프론트 데스크라는 데이터베이스를 사용하는 단지 전경에 데이터를 저장하는 데이터베이스가 필요합니다.
확인하기 위해서는 브라우저, F12, 응용 프로그램 탭을 열고있다sessionStorage localStorage
HTML5는이 함께 제공됩니다 :
- 탭을 닫을 때 sessionStorage 페이지 수명주기 및 레이블, 데이터베이스가 삭제 바인딩
- 로컬 스토리지는 영구적 인 데이터베이스 프런트 데스크입니다

<head>
    <meta charset="UTF-8">
    <title>vue条件指令案例(重点)</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
        }
        .r { background-color: red }
        .y { background-color: yellow }
        .b { background-color: blue }

        .action {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 实现记录上次点击按钮的功能
                需要用到前台数据库
                -->
        <p>
            <button @click="change('red')" :class="{r: c === 'red'}">红</button>
            <button @click="change('yellow')" :class="{y: c === 'yellow'}">黄</button>
            <button @click="change('blue')" :class="{b: c === 'blue'}">蓝</button>
        </p>
        <div class="wrap">
            <div class="box r" v-if="c === 'red'"></div>
            <div class="box y" v-else-if="c === 'yellow'"></div>
            <div class="box b" v-else></div>
        </div>
    </div>
</body>
<script src="vue_lib/vue.js"></script>
<script>
    // sessionStorage的生命周期与页面标签绑定，当标签页被关闭，数据库被清空
    // localStorage是前台永久数据库

    // localStorage.clear(); 清空
    new Vue({
        el: '#app',
        data:{
            c: localStorage.c ? localStorage.c : "red",
        },
        methods:{
            change(color){
                this.c = color;
                // 每一次改变c的值，将值同步到前台数据库
                localStorage.c = color;  // 存
            }
        }
    })
</script>

2.12 VUE 사이클 명령

루프 지침 : = "에서 컨테이너의 구성원"V-에 대한
제 부재의 값이어야

<body>
    <div id="app">
        <!--循环指令：
            v-for=""
            语法：
            v-for="成员 in 容器"
        -->
        <!--1、字符串循环渲染: 可以只遍历值，也可以遍历值与索引-->
        <p>
            <span v-for="v in title">{{ v }}</span>
            <span v-for="(v,i) in title">索引{{ i }}={{ v }} </span>
        </p>

        <p>
            <span v-for="(v,i) in title">
                <span v-if="i !=0"> | </span>
                {{ v }}
            </span>
        </p>

        <!--2、数组循环渲染: 可以只遍历值，也可以遍历值与索引-->
        <div>
            <p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
        </div>

        <!--3、对象循环渲染: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引-->
        <div>
            <!--只遍历值-->
            <p v-for="v in people">{{ v }}</p>
        </div>
        <div>
            <!--只遍历key和value-->
            <p v-for="(k, v) in people">{{ k }}:{{ v }}</p>
        </div>
        <div>
            <!--遍历key和value和索引-->
            <p v-for="(k, v, i) in people">第{{ i }}个:{{ k }}:{{ v }}</p>
        </div>

        <div>
            <div v-for="(stu, i) in stus">
                <hr v-if="i!=0">
                <p v-for="(v,k) in stu">{{ k }}:{{ v }}</p>
            </div>
        </div>
    </div>
</body>
<script src="vue_lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            title:"123123",
            arr : [5,56,7,8,1,123,],
            people: {
                name: '兔子',
                color: '粉白',
                price: 6.66,
            },
            stus: [
                {
                    name: "Bob",
                    age: 18
                },
                {
                    name: "Tom",
                    age: 17
                },
                {
                    name: "Jerry",
                    age: 19
                }
            ]
        }
    })
</script>

VUE 사이클 명령 케이스

메시지를 순환시킴으로써 달성

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <button @click="send_comment">留言</button>
        <ul>
            <li v-for="(v, i) in comments" @click="deleteMsg(i)">{{ v }}</li>
        </ul>

    </div>
</body>
<script src="vue_lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            msg:"",
            comments :[],
        },
        methods:{
            send_comment(){
                // 数组的增
                // push pop unshift shift splice
                if (this.msg){
                    this.comments.push(this.msg);   // 留言
                    this.msg = ""; // 留言后清空输入框

                }
            },
            deleteMsg(index){
                this.comments.splice(index,1);
            }
        }
    })
</script>
<script>

    // 数组操作万能方法，可以完成增删改
    let arr = [1, 2, 3];
    // 参数：开始索引，操作长度，操作的结果们
    arr.splice(2, 0, 100);  // 从索引为2的地方插入
    arr.splice(1, 1);   // 删除掉从索引1开始的一个元素
    console.log(arr);

</script>

셋째, 인스턴스 멤버

1, 엘 : 예

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

2 데이터 : 데이터

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

3 가지 방법 : 방법

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
    <p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
        }
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

(4) 계산 : 계산

계산 방법 정의 속성, 속성 데이터에 정의 된, 정의 (안 데이터)를 반복 할 필요가 없다
상기 방법은 결합 특성에있어서의 값으로부터 유도 된 값을 반환
속성 페이지에 렌더링해야하는 방법은 방법 바인딩이 활성화됩니다 (전화)
모니터링 할 방법에 나타나는 모든 변수는 방법은 한 번 바운드 발생 어떤 변수의 값을 업데이트하기 위해 호출됩니다, 다시 업데이트 속성 값에 어떤 방법
수동 속성 값을 설정하는 방법은, 결합 방법에 의해 설정되어야

<div id="app">
    <input type="text" v-model="v1">
    +
    <input type="text" v-model="v2">
    =
    <button>{{ res }}</button>
</div>
<script src="vue_lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            v1:"",
            v2:"",
            // res: '结果',
        },
        // 1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)
        // 2、方法属性的值来源于绑定的方法的返回值
        // 3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)
        // 4、方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，重新更新一下方法属性的值
        // 5、方法属性值不能手动设置，必须通过绑定的方法进行设置
        computed:{
            res(){
                console.log("该方法被调用了");
                return this.v1 && this.v2 ? +this.v1 + +this.v2:"结果";
            }
        }

    })
</script>

5 시계 : 모니터

설정 리스너 방법은 기존의 속성에 시계를
속성 값 업데이트 이벤트 리스너는 리스너 방법은 각각의 논리의 과정을 완료,라고
리스너 방법은 반환 값 (반환 값 적극적인 역할을 끝내는 유일한 방법)을 필요로하지 않습니다

<div id="app">
    <p>
        姓名：<input type="text" v-model="full_name">
    </p>
    <p>
        姓：<span>{{ first_name }}</span>
    </p>
    <p>
        名：<span>{{ last_name }}</span>
    </p>
</div>
<script src="vue_lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            full_name:"",
            first_name:"",
            last_name:"",
        },
        watch:{
            // 1、watch中给已有的属性设置监听方法
            // 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
            // 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
            full_name(){
                if(this.full_name.length>=2){
                    this.first_name = this.full_name[0];
                    this.last_name = this.full_name.slice(1,);
                }
            }
        }
    })
</script>

6 구분 : 구분

보간 식의 기호를 수정하는 데 사용됩니다

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['${', '}']
    })
</script>

뷰 프런트 엔드 학습

A, 뷰 프레임

왜 공부 VUE

두, 뷰 명령

2.1 마운트 포인트

2.2 변수 VUE

2.3 VUE 이벤트

2.4 오브젝트 JS

2.5 VUE 텍스트 지시

2.6 VUE 필터

2.7 VUE 이벤트 명령

2.8 VUE 속성 명령

2.9 VUE 명령어 형식

2.10 VUE 망토 명령 (알고)

2.11 VUE 조건부 명령어

VUE 조건부 명령어 케이스 (초점)

2.12 VUE 사이클 명령

VUE 사이클 명령 케이스

셋째, 인스턴스 멤버

1, 엘 : 예

2 데이터 : 데이터

3 가지 방법 : 방법

(4) 계산 : 계산

5 시계 : 모니터

6 구분 : 구분

추천