第四阶段：Vue框架 day72 Vue--初始Vue(二)

目录

• 昨日内容复习
• 今日学习内容
• 今日作业
  • A作业（必做）
  • B作业（选做）

昨日内容复习

1、导入vue环境

在html页面中用script标签导入vue环境

2、创建挂载点

new Vue({ el: "#app" })挂载页面标签，建立关联后控制页面标签
挂载点才有css3选择器语法
挂载点就是vue与页面的关联
挂载点只检索第一个匹配结果

3、插值表达式1

插值表达式{{ }}可以完成基础运算
num | num + 10 | str.split() + "拼接"

4、插值表达式2

插值表达式中的变量有实例成员 data 来提供

{{ msg }}

let msg = '12345'
new Vue({
el: "#app",
data: {
msg,
}
})

5、事件绑定

v-on指令可以给标签绑定事件，事件函数由实例成员 methods 来提供
6、过滤器

插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供

{{ msg | f1(1), 10 | f2(100, 200) }}

let msg = '12345'
new Vue({
el: "#app",
data: {
msg,
},
methods: {
fn(){}
},
filters: {
f1(v1,v2){return v1+v2},
f2(v1,v2,v3,v4){return v1+v2+v3+v4}
}
})

7、面向对象

面向对象js： { 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
function Fn(v1, v2){
this.n1 = v1;
this.n2 = v2;
}
let f1 = new Fn(10, 20);
f1.n1

8、文本指令

文本指令：{{ }} | v-text="" | v-html=""
9、事件指令

事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn(\(event, 自定义参数)" @click="fn" | @click="fn()" | @click="fn(10， 20)" | @click="fn(\)event, 10)"

10、属性指令

属性指令：v-bind:属性名="" | :title="变量" | :style="字段变量" |
:class="变量" | :class="[变量1, 变量2]" | :class="{类1:真假, 类2:真假}"
:title="var1" | :style="dic1" | :class="var2" | :class="[var3, var4]" |
:class="{box: true|false}"

var2 = 'box' | var2 = 'box circle'

今日学习内容

1、表单指令

v-model完成表单指令，简单的控制value，单选框中的使用，单独复选框的使用以及复选框中的使用

2、斗篷指令

作用：斗篷指令解决页面闪烁

用法：

// 方法一
<style>
    [v-cloak] {
        display: none;
    }
</style>
// 方法二
    <div id="app" v-cloak>

3、条件指令

条件指令v-if与v-show区别，v-if家族成员以及上分支会成立会屏蔽下分支的工作机制

用法：

<!--条件指令：
    v-if="true|false"，为假时，在页面上不渲染，可以隐藏标签中的信息
    v-show="true|false"，为假时，在页面中用display:none渲染，虽然没展示，但是任在页面结构中
-->
<!-- v-if是一个家族
        v-if
        v-else-if
        v-else
        1、上分支成立，下分支会被屏蔽
        2、else分支只要在所有上分支都为假时显示，且不需要条件
-->
        <p v-if="v1 === '1'">if分支</p>
        <p v-else-if="v1 === '2'">elif分支1</p>
        <p v-else-if="v1 === '3'">elif分支2</p>
        <p v-else>else分支</p>

4、循环指令

循环指令v-for如何循环渲染字符串、数组、字典，以及需要嵌套循环渲染赋值结构

用法：

<!--循环指令：
    v-for=""
    语法：
    v-for="成员 in 容器"
-->
<!--1、字符串循环渲染: 可以只遍历值，也可以遍历值与索引-->
        <div>
            <p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
        </div>
        data: {
            people: {
                name: '兔子',
                color: '粉白',
                price: 6.66,
            }

5、分隔符成员

了解：delimiters实例成员解决插值表达式符号冲突

6、计算属性

计算属性(方法属性)在computed中声明，方法内部变量会被监听，值来源于方法返回值

    <div id="app">
        <input type="text" v-model="v1">
        +
        <input type="text" v-model="v2">
        =
        <button>{{ res }}</button>

    </div>

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 : '结果';
            }
        }
    })

7、属性的监听

监听watch可以设置数据的监听方法，在监听属性更新时，完成特定逻辑

用法：

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

new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: '',
        },
watch: {
    // 1、watch中给已有的属性设置监听方法
    // 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
    // 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
    full_name() {
        if (this.full_name.length === 2) {
            k_v_arr = this.full_name.split('');
            this.first_name = k_v_arr[0];
            this.last_name = k_v_arr[1];
        }
    }

8、Vue组件（重点）

组件的概念，组件就是vue实例(对象)

用法：

/**
 * 1、组件：由html、css、js三部分组成的独立单位，可以类似于变量，重复使用
 * 2、组件其实就是vue实例(对象)，一个组件就是一个vue实例(对象)
 * 3、new Vue()产生的也是实例(对象)，所以也是组件，我们称之为 根组件
 *      一个页面建议只出现一个根组件（项目开发模式下，一个项目建议只出现一个根组件）
 * 4、组件的html页面结构有 template 实例成员提供
 *      template提供的html结构是用来构虚拟DOM
 *      真实DOM最终会被虚拟DOM替换
 *      根组件一般不提供template，就由挂载点el来提供构建虚拟DOM的页面结构，根组件如果提供了template，还需要设置挂载点作为替换占位
 *      template模板有且只有一个根标签
 */
let c1 = '';
new Vue({
    el: '#app',
    data: {
        msg: '12345',
        c1: 'red'
    },
    template: `
    <div id="app">
        <p :style="{color: c1}">{{ msg }}</p>
        <p @click="clickAction">{{ msg }}</p>
    </div>
    `,
    methods: {
        clickAction() {
            console.log(this.msg)
        }
    }
})

9、Vue子组件（重点）

创建、注册、使用子组件的三部曲

用法：

// 1、定义组件
// 2、注册组件
// 3、使用组件

// 如何定义子组件：组件就是一个普通对象，内部采用vue语法结构，被vue注册解释后，就会成为vue组件
let myTag = {
    template: `
    <div>
        <h3>子组件</h3>
        <p>我是自定义的子组件</p>
    </div>
    `,
};

// 了解：全局组件，不要注册就可以直接使用
Vue.component('tag', {
    template: `
    <div>
        <h3>全局组件</h3>
        <p>我是自定义的全局组件</p>
    </div>
    `,
});


new Vue({
    el: '#app',
    components: {
        // 'my-tag': myTag,
        // myTag: myTag,
        myTag,
    }
})

今日作业

A作业（必做）

"""
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、先有一下成绩单数据
scores = [
   { name: 'Bob', math: 97, chinese: 89, english: 67 },
   { name: 'Tom', math: 67, chinese: 52, english: 98 },
   { name: 'Jerry', math: 72, chinese: 87, english: 89 },
   { name: 'Ben', math: 92, chinese: 87, english: 59 },
   { name: 'Chan', math: 47, chinese: 85, english: 92 },
]
用table表格标签渲染以上数据，表格第一列是学生总分排序，最后一列是学生总分；

3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
"""

B作业（选做）

"""
1、还是采用上方相同的数据，添加筛选规则：
   i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
   ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
   举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
"""