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

昨日内容复习

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两条数据
"""
posted @ 2019-11-12 19:39  foreversun92  阅读(152)  评论(0编辑  收藏  举报