爱读书的小松

[记录学习]自学尚硅谷张天禹Vue2+3框架_vue_basic

首先感谢尚硅谷和张天禹老师的教学分享！Respect！

学习来源：B站
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1&vd_source=07c8a1a7d89af39fe20c3a6894f5ff6a
资料来源：百度网盘
链接：https://pan.baidu.com/s/1Y7mTMXzlBXqKve8KWSPwtg?pwd=7bna
提取码：7bna

文章目录

- 首先感谢尚硅谷和张天禹老师的教学分享！Respect！
- vue_basic
- - 1. 初识Vue
  - 2. 模板语法
  - 3. 数据绑定
  - 4. el与data的两种写法
  - 5. Vue中的MVVM
  - 6. 数据代理
  - - 6.1 回顾Object.defineProperty方法
    - 6.2 何为数据代理
    - 6.3 Vue中的数据代理
  - 7. 事件处理
  - - 7.1 事件的基本使用
    - 7.2 事件修饰符
    - 7.3 键盘事件
  - 8. 计算属性
  - - 8.1 姓名案例_插值语法实现
    - 8.2 姓名案例_methods实现
    - 8.3 姓名案例_计算属性实现
    - 8.4 姓名案例_计算属性简写
  - 9. 监事属性
  - - 9.1 天气案例
    - 9.2 天气案例_监视属性
    - 9.3 天气案例_深度监视
    - 9.4 天气案例_监视属性_简写
    - 9.5 姓名案例_watch实现
  - 10. 绑定样式
  - 11. 条件渲染
  - 12. 列表渲染
  - - 12.1 基本列表
    - 12.2 key的原理
    - 12.3 列表过滤
    - 12.4 列表排序
    - 12.5 更新时的一个问题
    - 12.6 Vue监测数据改变的原理_对象
    - 12.7 模拟一个数据监测
    - 12.8 Vue.set的使用
    - 12.9 Vue监测数据改变的原理_数组
    - 12.10 总结Vue数据监测
  - 13. 收集表单数据
  - 14. 过滤器
  - 15. 内置指令
  - - 15.1 v-text指令
    - 15.2 v-html指令
    - 15.3 v-cloak指令
    - 15.4 v-once指令
    - 15.5 v-pre指令
  - 16. 自定义指令
  - - 16.1 自定义指令
    - 16.2 回顾一个DOM操作
  - 17. 生命周期
  - - 17.1 引出生命周期
    - 17.2 分析生命周期
    - 17.3 总结生命周期
  - 18. 非单文件组件
  - - 18.1 基本使用
    - 18.2 几个注意点
    - 18.3 组件的嵌套
    - 18.4 VueComponent
    - 18.5 一个重要的内置关系
  - 19. 单文件组件

vue_basic

1. 初识Vue

初识Vue：

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). demo(1)

(4). x === y ? ‘a’ : ‘b’

2.js代码(语句)

(1). if(){}

(2). for(){}

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vuetitle>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>Hello, {{name.toUpperCase()}}, {{address}}h1>
        div>

        <script type="text/javascript">
            // 创建Vue实例
            new Vue({
                // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                el:'#root',
                // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                data:{
                    name : '尚硅谷atguigu', 
                    address : '北京'
                }
            })
        script>
    body>
html>

2. 模板语法

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。

举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，

且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>插值语法h1>
            <h3>你好，{{name}}！h3>
            <hr />
            <h1>指令语法h1>
            <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1a>
            <a :href="school.url" :x="hello">点我去{{school.name}}学习2a>
        div>

        <script type="text/javascript">
            // 创建Vue实例
            new Vue({
                el:'#root',
                data:{
                    name : 'zhangsan', 
                    school : {
                        name : '尚硅谷',
                        url : 'http://www.atguigu.com'
                    }
                    // x不加冒号时双引号内只是一个普通的字符串，加了冒号就成了表达式
                    // 若表达式不存在，网页端元素就查不到该属性，控制台会报错
                    // hello : 666 
                }
            })
        script>
    body>
html>

3. 数据绑定

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            
            <h2>普通写法h2>
            
            单向数据绑定：<input type="text" v-bind:value="name" /><br />
            
            双向数据绑定：<input type="text" v-model:value="name" /><br />
            
            
            <h2>简写h2>
            
            单向数据绑定：<input type="text" :value="name" /><br />
            
            双向数据绑定：<input type="text" v-model="name" />

            
			
        div>

        <script type="text/javascript">
            // 创建Vue实例
            new Vue({
                el:'#root',
                data:{
                    name : '尚硅谷'
                }
            })
        script>
    body>
html>

4. el与data的两种写法

data与el的2种写法

1.el有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

2.data有2种写法

(1).对象式

(2).函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el与data的两种写法title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>你好，{{name}}！h1>
        div>

        <script type="text/javascript">
            // el的两种写法
            // const vm = new Vue({
            //     // 第一种写法
            //     // el:'#root', 
            //     data:{
            //         name : 'atguigu'
            //     }
            // })
            // vm就是Vue的实例对象
            // console.log(vm)
            // // 第二种写法
            // vm.$mount('#root')
            
            // data的两种写法
            // 创建Vue实例
            new Vue({
                el:'#root',
                // data的第一种写法：对象式
                // data:{
                //     name : '尚硅谷'
                // }

                // data的第二种写法：函数式
                data(){
                    // 这里的this就是Vue的实例对象
                    console.log(this)
                    return {
                        name : '尚硅谷'
                    }
                }
            })
        script>
    body>
html>

5. Vue中的MVVM

MVVM模型

1. M：模型(Model) ：data中的数据

2. V：视图(View) ：模板代码

3. VM：视图模型(ViewModel)：Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm身上。

2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue中的MVVMtitle>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>学校名称：{{name}}h1>
			<h1>学校地址：{{address}}h1>
            <h1>测试一下1：{{1+1}}h1>
			<h1>测试一下2：{{$options}}h1>
			<h1>测试一下3：{{$emit}}h1>
			<h1>测试一下4：{{_c}}h1>
        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    name : '尚硅谷',
                    address : '北京'
                }
            })
            console.log(vm)
        script>
    body>
html>

6. 数据代理

6.1 回顾Object.defineProperty方法

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>回顾Object.defineproperty方法title>
    head>
    <body>
        <script type="text/javascript">
            let number = 18
            let person = {
                name : '张三',
                sex : '男'
            }

            Object.defineProperty(person, 'age', {
                // value : 18, 
                // 控制属性是否可以枚举，默认值是false
                // enumerable : true, 
                // 控制属性是否可以被修改，默认值是false
                // writable : true, 
                // 控制属性是否可以被删除，默认值是false
                // configurable : true

                // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
                get(){
                    console.log('有人读取age属性了！')
                    return number
                }, 
                
                // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
                set(value){
                    console.log('有人修改age属性了！')
                    number = value
                }
            })
            // 测试age能否被枚举到
            // console.log(Object.keys(person))
            // 控制台输出person
            console.log(person)
        script>
    body>
html>

6.2 何为数据代理

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>何为数据代理title>
    head>
    <body>
        
        <script type="text/javascript">
            let obj = {x : 100}
            let obj2 = {y : 200}

            Object.defineProperty(obj2, 'x', {
                get(){
                    return obj.x
                }, 
                set(value){
                    obj.x = value
                }
            })
        script>
        
    body>
html>

6.3 Vue中的数据代理

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue中的数据代理title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>学校名称：{{name}}h2>
            <h2>学校地址：{{address}}h2>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    name : 'atguigu', 
                    address : 'beijing'
                }
            })
        script>
    body>
html>

7. 事件处理

7.1 事件的基本使用

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>事件的基本使用title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>欢迎来到{{name}}学习！h2>
            
            <button v-on:click="showInfo">点我提示信息button>
            
            <button @click="showInfo1">点我提示信息1（不传参）button>
            <button @click="showInfo2($event, 66)">点我提示信息2（传参）button>
        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    name : 'atguigu',
                },
                methods:{
                    showInfo(){
                        alert('hello!')
                    },
                    showInfo1(event){
                        console.log(event.target.innerText)
                        console.log(this)
                        alert("Hello, Guy!")
                    }, 
                    showInfo2(event, number){
                        // 交换参数顺序后event丢失
                        console.log(event.target.innerText)
                        console.log(this)
                        console.log(number)
                        alert("Hello, Guy!")
                    }
                }
            })
        script>
    body>
html>

7.2 事件修饰符

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>事件修饰符title>
        
        <script type="text/javascript" src="../js/vue.js">script>
        <style>
            *{
                margin-top: 20px;
            }
            .demo1{
                height: 50px;
                background-color: skyblue;
            }
            .box1{
                padding: 5px;
                background-color: skyblue;
            }
            .box2{
                padding: 5px;
                background-color: orange;
            }
            .list{
                width: 200px;
                height: 200px;
                background-color: peru;
                overflow: auto;
            }
            li{
                height: 100px;
            }
        style>
    head>
    <body>
        
        <div id="root">
            <h2>欢迎来到{{name}}学习！h2>
            
            <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息a>

            
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息button>
                
            
            div>

            
            <button @click.once="showInfo">点我提示信息button>

            
            
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                div>
            div>

            
            <div class="demo1" @click.self="showInfo">
                <button @click="showInfo">点我提示信息button>
            div>

            
            
            
            
            <ul @wheel.passive="demo" class="list">
				<li>1li>
				<li>2li>
				<li>3li>
				<li>4li>
			ul>

        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    name : 'atguigu',
                },
                methods:{
                    showInfo(event){
                        alert("Hello!")
                        // console.log(event.target)
                    }, 
                    showMsg(msg){
                        console.log(msg);
                    }, 
                    demo(){
                        for (let i = 0; i < 100000; i++) {
                            console.log('#');
                        }
                        console.log('so tired!');
                    }
                }
            })
        script>
    body>
html>

7.3 键盘事件

1.Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>键盘事件title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>欢迎来到{{name}}学习！h2>
            
            <input type="text" placeholder="请按下回车提示输入" @keydown.huiche="showInfo"/>
        div>

        <script type="text/javascript">
            // 自定义别名案件
            Vue.config.keyCodes.huiche = 13

            new Vue({
                el:'#root',
                data:{
                    name : 'atguigu',
                },
                methods:{
                    showInfo(event){
                        console.log(event.target.value);
                    }
                }
            })
        script>
    body>
html>

8. 计算属性

8.1 姓名案例_插值语法实现

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>姓名案例_插值语法实现title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            姓：<input type="text" v-model="firstName"><br/>
            名：<input type="text" v-model="lastName"><br/>
            全名：<span>{{firstName}}-{{lastName}}span>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    firstName : '张',
                    lastName : '三',
                }
            })
        script>
    body>
html>

8.2 姓名案例_methods实现

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>姓名案例_methods实现title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            姓：<input type="text" v-model="firstName"><br/>
            名：<input type="text" v-model="lastName"><br/>
            
            全名：<span>{{fullName()}}span>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    firstName : '张',
                    lastName : '三',
                }, 
                methods:{
                    fullName(){
                        console.log('@---fullName');
                        return this.firstName + '-' + this.lastName
                    }
                }
            })
        script>
    body>
html>

8.3 姓名案例_计算属性实现

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>姓名案例_计算属性实现title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            姓：<input type="text" v-model="firstName"><br/>
            名：<input type="text" v-model="lastName"><br/>
            
            
            
            全名：<input type="text" v-model="fullName"/>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    firstName : '张',
                    lastName : '三',
                }, 
                computed:{
                    fullName:{
                        // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                        // get什么时候调用？1.初次读取fullName时；2.所依赖的数据发生变化时。
                        get(){
                            console.log('get被调用了');
                            // this即Vue实例对象
                            // console.log(this);
                            return this.firstName + '-' + this.lastName
                        }, 
                        // set什么时候调用？当fullName被修改时
                        set(value){
                            console.log('set', value);
                            const arr = value.split('-')
                            this.firstName = arr[0]
                            this.lastName = arr[1]
                        }
                    }
                }
            })
        script>
    body>
html>

8.4 姓名案例_计算属性简写

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>姓名案例_计算属性实现title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            姓：<input type="text" v-model="firstName"><br/>
            名：<input type="text" v-model="lastName"><br/>
            
            
            全名：<span>{{fullName}}span>
            
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    firstName : '张',
                    lastName : '三',
                }, 
                computed:{
                    // 简写
                    fullName(){
                        console.log('get被调用了');
                        return this.firstName + '-' + this.lastName
                    }
                    // 完整写法
                    // fullName:{
                    //     // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    //     // get什么时候调用？1.初次读取fullName时；2.所依赖的数据发生变化时。
                    //     get(){
                    //         console.log('get被调用了');
                    //         // this即Vue实例对象
                    //         // console.log(this);
                    //         return this.firstName + '-' + this.lastName
                    //     }, 
                    //     // set什么时候调用？当fullName被修改时
                    //     set(value){
                    //         console.log('set', value);
                    //         const arr = value.split('-')
                    //         this.firstName = arr[0]
                    //         this.lastName = arr[1]
                    //     }
                    // }
                }
            })
        script>
    body>
html>

9. 监事属性

9.1 天气案例

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>天气案例title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>今天天气很{{info}}h2>
            
            
            <button @click="changeWeather">切换天气button>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    isHot:true,
                },
                methods:{
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热' : '凉爽'
                    }
                }
            })
        script>
    body>
html>

9.2 天气案例_监视属性

监视属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>天气案例 监事属性title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>今天天气很{{info}}h2>
            <button @click="changeWeather">切换天气button>
        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                },
                methods:{
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热' : '凉爽'
                    }
                },
                // watch的第一种写法：new Vue时传入watch配置
                // watch:{
                //     isHot:{
                //         // 初始化时让handler调用一下
                //         immediate:true,
                //         // handler什么时候调用？当isHot发生改变时
                //         handler(newValue, oldValue){
                //             console.log('isHot被修改了', newValue, oldValue);
                //         }
                //     }
                // }
            })

            // watch的第二种写法：通过vm.$watch监视
            vm.$watch('isHot', {
                // 初始化时让handler调用一下
                immediate:true,
                // handler什么时候调用？当isHot发生改变时
                handler(newValue, oldValue){
                    console.log('isHot被修改了', newValue, oldValue);
                }
            })
        script>
    body>
html>

9.3 天气案例_深度监视

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>天气案例_深度监视title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>今天天气很{{info}}h2>
            <button @click="changeWeather">切换天气button>
            <hr/>
            <h3>a的值是：{{numbers.a}}h3>
            <button @click="numbers.a++">点我让a+1button>
            <h3>a的值是：{{numbers.b}}h3>
            <button @click="numbers.b++">点我让b+1button>
            <button @click="numbers = {a:666, b:888}">彻底替换掉numbersbutton>
        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                    numbers:{
                        a:1,
                        b:1,
                        c:{
                            d:{
                                e:100
                            }
                        }
                    }
                },
                methods:{
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热' : '凉爽'
                    }
                },
                // watch的第一种写法：new Vue时传入watch配置
                watch:{
                    isHot:{
                        // 初始化时让handler调用一下
                        immediate:true,
                        // handler什么时候调用？当isHot发生改变时
                        handler(newValue, oldValue){
                            console.log('isHot被修改了', newValue, oldValue);
                        }
                    },
                    // 监视多级结构中某个属性的变化
                    // 'numbers.a':{
                    //     handler(){
                    //         console.log('a被改变了')
                    //     }
                    // }
                    // 监视多级结构中所有属性的变化
                    numbers:{
                        // 增加deep配置深度监视，否则修改某个属性不会触发监视
                        deep:true,
                        handler(){
                            console.log('numbers改变了');
                        }
                    }
                }
            })
        script>
    body>
html>

9.4 天气案例_监视属性_简写

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>天气案例_监事属性_简写title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>今天天气很{{info}}h2>
            <button @click="changeWeather">切换天气button>
        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                },
                methods:{
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热' : '凉爽'
                    }
                },
                // watch的第一种写法：new Vue时传入watch配置
                watch:{
                    // 简写
                    isHot(newValue, oldValue){
                        console.log('isHot被修改了', newValue, oldValue);
                    }
                    // 正常写法
                    // isHot:{
                    //     // 初始化时让handler调用一下
                    //     immediate:true,
                    //     // handler什么时候调用？当isHot发生改变时
                    //     handler(newValue, oldValue){
                    //         console.log('isHot被修改了', newValue, oldValue);
                    //     }
                    // }
                }
            })

            // watch的第二种写法：通过vm.$watch监视
            // 简写
            // vm.$watch('isHot', (newValue, oldValue)=>{
            //     console.log('isHot被修改了', newValue, oldValue);
            // })
            // 正常写法
            // vm.$watch('isHot', {
            //     // 初始化时让handler调用一下
            //     immediate:true,
            //     // handler什么时候调用？当isHot发生改变时
            //     handler(newValue, oldValue){
            //         console.log('isHot被修改了', newValue, oldValue);
            //     }
            // })
        script>
    body>
html>

9.5 姓名案例_watch实现

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，

这样this的指向才是vm 或组件实例对象。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>姓名案例_watch实现title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            姓：<input type="text" v-model="firstName"><br/>
            名：<input type="text" v-model="lastName"><br/>
            全名：<span>{{fullName}}span>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    firstName : '张',
                    lastName : '三',
                    fullName : '张-三'
                }, 
                watch:{
                    firstName(newValue){
                        // this是Vue的实例对象
                        console.log(this);
                        setTimeout(() => {
                            // this是Vue的实例对象
                            // 箭头函数会把this向外抛
                            console.log(this);
                            this.fullName = newValue + '-' + this.lastName
                        }, 1000);
                    }, 
                    lastName(newValue){
                        this.fullName = this.firstName + '-' + newValue
                    }
                }
            })
        script>
    body>
html>

10. 绑定样式

绑定样式：

1. class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>绑定样式title>
        
        <script type="text/javascript" src="../js/vue.js">script>
        <style>
            .basic{
                width: 400px;
                height: 100px;
                border: 1px solid black;
            }
            .happy{
                border: 4px solid red;
                background-color: rgba(255, 255, 0, 0.644);
                background:linear-gradient(30deg, yellow, pink, orange, yellow)
            }
            .sad{
                border: 4px dashed rgb(2, 197, 2);
                background-color: gray;
            }
            .normal{
                background-color: skyblue;
            }
            .atguigu1{
                background-color: yellowgreen;
            }
            .atguigu2{
                font-size: 30px;
                text-shadow: 2px 2px 10px red;
            }
            .atguigu3{
                border-radius: 20px;
            }
        style>
    head>
    <body>
        
        <div id="root">
            
            <div class="basic" :class="classStr" @click="changeMood">{{name}}div><br><br>

            
            <div class="basic" :class="classArr">{{name}}div><br><br>

            
            <div class="basic" :class="classObj">{{name}}div><br><br>

            
            <div class="basic" :style="styleObj2">{{name}}div><br><br>

            
            <div class="basic" :style="styleArr">{{name}}div><br><br>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷',
                    classStr:'normal',
                    classArr:['atguigu1', 'atguigu2', 'atguigu3'],
                    classObj:{
                        atguigu1:true,
                        atguigu2:false
                    }, 
                    styleObj:{
                        fontSize: '40px', 
                        color: 'red'
                    },
                    styleObj2:{
                        backgroundColor: 'orange'
                    },
                    styleArr: [
                        {
                            fontSize: '40px',
                            color: 'blue'
                        },
                        {
                            backgroundColor: 'gray'
                        }
                    ]
                },
                methods:{
                    changeMood(){
                        const arr = ['happy', 'sad', 'normal']
                        const index = Math.floor(Math.random()*3)
                        this.classStr = arr[index]
                        console.log(arr[index]);
                    }
                }
            })
        script>
    body>
html>

11. 条件渲染

条件渲染：

1.v-if

写法：

(1).v-if=“表达式”

(2).v-else-if=“表达式”

(3).v-else=“表达式”

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show=“表达式”

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>条件渲染title>
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>当前n的值为：{{n}}h2>
            <button @click="n++">点我n+1button>
            
            <h2 v-show="false">欢迎来到{{name}}h2>
            <h2 v-show="1 === 1">欢迎来到{{name}}h2>

            
            <h2 v-if="false">欢迎来到{{name}}h2>
            <h2 v-if="1 === 1">欢迎来到{{name}}h2>

            
            <div v-if="n === 1">Angulardiv>
            <div v-else-if="n === 2">Reactdiv>
            <div v-else-if="n === 3">Vuediv>
            <div v-else>哈哈div>

            
            <template v-if="n === 1">
                <h2>你好h2>
                <h2>尚硅谷h2>
                <h2>北京h2>
            template>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    name:'atguigu', 
                    n:0
                }
            })
        script>
    body>
html>

12. 列表渲染

12.1 基本列表

v-for指令:

1.用于展示列表数据

2.语法：v-for=“(item, index) in xxx” :key=“yyy”

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>基本列表title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            
            <h2>人员列表（遍历数组）h2>
            <ul>
                <li v-for="(p, index) of persons" :key="index">
                    {{p.id}}-{{p.name}}-{{p.age}}
                li>
            ul>

            
            <h2>汽车信息（遍历对象）h2>
            <ul>
                <li v-for="(value, k) of cars" :key="k">
                    {{k}}-{{value}}
                li>
            ul>

            
            <h2>测试遍历字符串（用得少）h2>
            <ul>
                <li v-for="(char, index) of str" :key="index">
                    {{index}}-{{char}}
                li>
            ul>

            
            <h2>测试遍历指定次数（用得少）h2>
            <ul>
                <li v-for="(number, index) of 5" :key="index">
                    {{index}}-{{number}}
                li>
            ul>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    persons:[
                        {id:'001', name:'张三', age:18}, 
                        {id:'002', name:'李四', age:19}, 
                        {id:'003', name:'王五', age:20},
                    ],
                    cars:{
                        name:'奥迪A8',
                        price:'70万',
                        color:'黑色'
                    },
                    str:'hello'
                }
            })
        script>
    body>
html>

12.2 key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

3. 用index作为key可能会引发的问题：

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

2. 如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?:

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

使用index作为key是没有问题的。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>key的原理title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            
            <h2>人员列表（遍历数组）h2>
            <button @click.once="add">添加一个老刘button>
            <ul>
                
                <li v-for="(p, index) of persons" :key="p.id">
                    {{index}}-{{p.id}}-{{p.name}}-{{p.age}}
                    <input type="text">
                li>
            ul>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    persons:[
                        {id:'001', name:'张三', age:18}, 
                        {id:'002', name:'李四', age:19}, 
                        {id:'003', name:'王五', age:20},
                    ]
                }, 
                methods:{
                    add(){
                        const p = {id:'004', name:'老刘', age:40}
                        this.persons.unshift(p)
                    }
                }
            })
        script>
    body>
html>

12.3 列表过滤

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表过滤title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>人员列表h2>
            <input type="text" placeholder="请输入名字" v-model="keyWord">
            <ul>
                <li v-for="(p, index) of filPersons" :key="index">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                li>
            ul>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    keyWord:'', 
                    persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
                    // watch实现
                    // filPersons:[]
                }, 
                // watch实现
                // watch:{
                //     keyWord:{
                //         immediate:true,
                //         handler(value){
                //             this.filPersons = this.persons.filter((p)=>{
                //                 return p.name.indexOf(value) !== -1
                //             })
                //         }
                //     }
                // }
                // computed实现
                computed:{
                    filPersons(){
                        return this.persons.filter((p)=>{
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                    }
                }
            })
        script>
    body>
html>

12.4 列表排序

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表排序title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>人员列表h2>
            <input type="text" placeholder="请输入名字" v-model="keyWord">
            <button @click="sortType = 2">年龄升序button>
            <button @click="sortType = 1">年龄降序button>
            <button @click="sortType = 0">原顺序button>
            <ul>
                <li v-for="(p, index) of filPersons" :key="p.id">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                    <input type="text">
                li>
            ul>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    keyWord:'',
                    // 0：原顺序；1：降序；2：升序 
                    sortType:0,
                    persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
                }, 
                computed:{
                    filPersons(){
                        const arr = this.persons.filter((p)=>{
                            return p.name.indexOf(this.keyWord) !== -1
                        })

                        // 判断是否需要排序
                        if (this.sortType) {
                            arr.sort((p1, p2)=>{
                                return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                            })
                        }
                        return arr
                    }
                }
            })
        script>
    body>
html>

12.5 更新时的一个问题

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>更新时的一个问题title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            
            <h2>人员列表（遍历数组）h2>
            <button @click.once="updateMei">更新马冬梅信息button>
            <ul>
                <li v-for="(p, index) of persons" :key="p.id">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                li>
            ul>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    persons:[
                        {id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
                    ]
                }, 
                methods:{
                    updateMei(){
                        // console.log(this);
                        // 奏效
                        // this.persons[0].name = '马老师'
                        // this.persons[0].age = 59
                        // this.persons[0].sex = '男'
                        // 不奏效，虽然从控制台可以读取修改，但是Vue不认
                        // this.persons[0] = {id:'001',name:'马老师',age:19,sex:'男'}
                        // 修改为以下方法，Vue就认了
                        this.persons.splice(0, 1, {id:'001',name:'马老师',age:19,sex:'男'})
                    }
                }
            })
        script>
    body>
html>

12.6 Vue监测数据改变的原理_对象

Vue会给data中的所有数据做数据代理

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue监测数据改变的原理title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>学校名称：{{name}}h2>
            <h2>学校地址：{{address}}h2>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    name:'atguigu',
                    address:'beijing',
                    student:{
                        name:'tom',
                        age:{
                            rAge:40,
                            sAge:29
                        },
                        friends:[
                            {name:'jerry', age:35}
                        ]
                    }
                }
            })
        script>
    body>
html>

12.7 模拟一个数据监测

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模拟一个数据监测title>
    head>
    <body>
        <script type="text/javascript">

            let data = {
                name:'atguigu',
                address:'beijing'
            }

            // 创建一个监视的数据对象，用于监视data中的属性的变化
            const obs = new Observer(data)

            console.log(obs);

            // 准备一个vm实例对象
            let vm = {}
            vm._data = data = obs

            function Observer(obj){
                // 汇总对象中所有的属性形成一个数组
                const keys = Object.keys(obj)
                // 遍历
                keys.forEach((k)=>{
                    Object.defineProperty(this, k, {
                        get(){
                            return obj[k]
                        },
                        set(value){
                            console.log(`${k}被改了，我要去解析模板，生成虚拟DOM...我要开始忙了`);
                            obj[k] = value
                        }
                    })
                })
            }
        script>
    body>
html>

12.8 Vue.set的使用

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue.set的使用title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>学校信息h1>
            <h2>学校名称：{{school.name}}h2>
            <h2>学校地址：{{school.address}}h2>
            <h2>校长是：{{school.leader}}h2>
            <hr>
            <h1>学生信息h1>
            <button @click="addSex">添加一个性别属性，默认值是男button>
            <h2>姓名：{{student.name}}h2>
            <h2 v-show="student.sex">性别：{{student.sex}}h2>
            <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}h2>
            <h2>朋友们h2>
            <ul>
                <li v-for="(f, index) in student.friends" :key="index">
                    {{f.name}}-{{f.age}}
                li>
            ul>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    school:{
                        name:'atguigu',
                        address:'beijing', 
                        leader:'awesome'
                    },                    
                    student:{
                        name:'tom',
                        age:{
                            rAge:40,
                            sAge:29
                        },
                        friends:[
                            {name:'jerry', age:35},
                            {name:'tony', age:36}
                        ]
                    }
                },
                methods:{
                    addSex(){
                        // 通过以下两种方式追加可供监听属性
                        // Vue.set(this.student, 'sex', '男')
                        this.$set(this.student, 'sex', '男');
                    }
                }
            })
        script>
    body>
html>

12.9 Vue监测数据改变的原理_数组

对象和数组的区别

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue监测数据改变的原理title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>学校信息h1>
            <h2>学校名称：{{school.name}}h2>
            <h2>学校地址：{{school.address}}h2>
            <h2>校长是：{{school.leader}}h2>
            <hr>
            <h1>学生信息h1>
            <button @click="addSex">添加一个性别属性，默认值是男button>
            <h2>姓名：{{student.name}}h2>
            <h2 v-show="student.sex">性别：{{student.sex}}h2>
            <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}h2>
            <h2>爱好h2>
            <ul>
                <li v-for="(h, index) in student.hobby" :key="index">
                    {{h}}
                li>
            ul>
            <h2>朋友们h2>
            <ul>
                <li v-for="(f, index) in student.friends" :key="index">
                    {{f.name}}-{{f.age}}
                li>
            ul>
        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    school:{
                        name:'atguigu',
                        address:'beijing', 
                        leader:'awesome'
                    },                    
                    student:{
                        name:'tom',
                        age:{
                            rAge:40,
                            sAge:29
                        },
                        hobby:['抽烟', '喝酒', '烫头'],
                        friends:[
                            {name:'jerry', age:35},
                            {name:'tony', age:36}
                        ]
                    }
                },
                methods:{
                    addSex(){
                        // 通过以下两种方式追加可供监听属性
                        // Vue.set(this.student, 'sex', '男')
                        this.$set(this.student, 'sex', '男');
                    }
                }
            })
        script>
    body>
html>

12.10 总结Vue数据监测

Vue监视数据的原理：

vue会监视data中所有层次的数据。

如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>总结数据监视title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>学生信息h1>
            <button @click="student.age++">年龄+1岁button><br>
            <button @click="addSex">添加一个性别属性，默认值是男button><br>
            <button @click="student.sex = '未知' ">修改性别button><br>
            <button @click="addFriend">在列表首位添加一个朋友button><br>
            <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三button><br>
            <button @click="addHobby">添加一个爱好button><br>
            <button @click="updateHobby">修改第一个爱好为：开车button><br>
            <button @click="removeSmoke">过滤掉爱好中的喝酒button><br>
            <h2>姓名：{{student.name}}h2>
            <h2>年龄：{{student.age}}h2>
            <h2 v-show="student.sex">性别：{{student.sex}}h2>
            <h2>爱好h2>
            <ul>
                <li v-for="(h, index) in student.hobby" :key="index">
                    {{h}}
                li>
            ul>
            <h2>朋友们h2>
            <ul>
                <li v-for="(f, index) in student.friends" :key="index">
                    {{f.name}}-{{f.age}}
                li>
            ul>
        div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    school:{
                        name:'atguigu',
                        address:'beijing', 
                        leader:'awesome'
                    },                    
                    student:{
                        name:'tom',
                        age:18,
                        hobby:['抽烟', '喝酒', '烫头'],
                        friends:[
                            {name:'jerry', age:35},
                            {name:'tony', age:36}
                        ]
                    }
                },
                methods:{
                    addSex(){
                        // 通过以下两种方式追加可供监听属性
                        // Vue.set(this.student, 'sex', '男')
                        this.$set(this.student, 'sex', '男');
                    },
                    addFriend(){
                        this.student.friends.unshift({name:'jack', age:70})
                    }, 
                    updateFirstFriendName(){
                        this.student.friends[0].name = '张三'
                    },
                    addHobby(){
                        this.student.hobby.push('学习')
                    },
                    updateHobby(){
                        // 三种添加可见听属性的方式
                        // this.student.hobby.splice(0, 1, '开车')
                        // Vue.set(this.student.hobby, 0, '开车')
                        this.$set(this.student.hobby, 0, '开车');
                    },
                    removeSmoke(){
                        this.student.hobby = this.student.hobby.filter((h)=>{
                            return h !== '喝酒'
                        })
                    }
                }
            })
        script>
    body>
html>

13. 收集表单数据

收集表单数据：

若：，则v-model收集的是value值，用户输入的就是value值。

若：，则v-model收集的是value值，且要给标签配置value值。

若：

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>收集表单数据title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <form @submit.prevent="demo">
                账号：<input type="text" v-model.trim="userInfo.account"><br>
                密码：<input type="password" v-model="userInfo.password"><br>
                年龄：<input type="number" v-model.number="userInfo.age"><br>
                性别：
                男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
                女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br>
                爱好：
                学习<input type="checkbox" v-model="userInfo.hobby" value="study">
                打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
                <br><br>
                所属校区
                <select v-model="userInfo.city">
                    <option value="">请选择校区option>
                    <option value="beijing">北京option>
                    <option value="shanghai">上海option>
                    <option value="shenzhen">深圳option>
                    <option value="wuhan">武汉option>
                select>
                <br><br>
                其他信息
                <textarea v-model.lazy="userInfo.other">textarea><br>
                <input type="checkbox" v-model="userInfo.agree">阅读并接受
                <a href="http://www.atguigu.com">《用户协议》a>
                <button>提交button>
            form>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    userInfo:{
                        account:'',
                        password:'',
                        age:18,
                        sex:'',
                        hobby:[],
                        city:'',
                        other:'',
                        agree:''
                    }
                },
                methods:{
                    demo(){
                        console.log(JSON.stringify(this.userInfo));
                    }
                }
            })
        script>
    body>
html>

14. 过滤器

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>过滤器title>
        
        <script type="text/javascript" src="../js/vue.js">script>
        <script type="text/javascript" src="../js/dayjs.min.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>格式化后的时间h2>
            
            <h3>现在是：{{fmtTime}}h3>
            
            <h3>现在是：{{getFmtTime()}}h3>
            
            <h3>现在是：{{time | timeFormater}}h3>
            
            <h3>现在是：{{time | timeFormater('YYYY_MM_DD')}}h3>
            <h3 :x="msg | mySlice">尚硅谷h3>
        div>
        
        <div id="root2">
            <h2>{{msg | mySlice}}h2>
        div>

        <script type="text/javascript">
            // 全局过滤器
            Vue.filter('mySlice', function(value){
                return value.slice(0, 4)
            })
            // root的Vue实例对象
            new Vue({
                el:'#root',
                data:{
                    time:1621561377603, //时间戳
				    msg:'你好，尚硅谷'
                },
                computed:{
                    fmtTime(){
                        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                    }
                },
                methods:{
                    getFmtTime(){
                        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')

                    }
                },
                // 局部过滤器
                filters:{
                    timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
                        console.log('@', value);
                        return dayjs(value).format(str)
                    }
                }
            })
            // root2的Vue实例对象
            new Vue({
                el:'#root2',
                data:{
                    msg:'hello, atguigu!'
                }
            })
        script>
    body>
html>

15. 内置指令

15.1 v-text指令

我们学过的指令：

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听, 可简写为@

v-if : 条件渲染（动态控制节点是否存存在）

v-else : 条件渲染（动态控制节点是否存存在）

v-show : 条件渲染 (动态控制节点是否展示)

v-text指令：

1.作用：向其所在的节点中渲染文本内容。

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-text_指令title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <div>hello, {{name}}div>
            <div v-text="name">div>
            <div v-text="str">div>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    name:'atguigu',
                    str:'你好啊！
'
                }
            })
        script>
    body>
html>

15.2 v-html指令

v-html指令：

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2).v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-html_指令title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <div>hello, {{name}}div>
            <div v-html="str">div>
            <div v-html="str2">div>
        div>
        
        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    name:'atguigu',
                    str:'你好啊！
',
                    str2:'兄弟我找到你想要的资源了，快来！'
                }
            })
        script>
    body>
html>

15.3 v-cloak指令

v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-cloak_指令title>
        
        
        <style>
            [v-cloak]{
                display: none;
            }
        style>
    head>
    <body>
        
        <div id="root">
            <h2 v-cloak>{{name}}h2>
        div>
        
        <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js">script>
    body>
    <script type="text/javascript">
        console.log(1);
        new Vue({
            el:'#root',
            data:{
                name:'atguigu'
            }
        })
    script>
html>

15.4 v-once指令

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-once_指令title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2 v-once>初始化的n值是：{{n}}h2>
            <h2>当前的n值是：{{n}}h2>
            <button @click="n++">点我n+1button>
        div>
    body>
    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                n:1
            }
        })
    script>
html>

15.5 v-pre指令

v-pre指令：

1.跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-pre_指令title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            
            <h2 v-pre>Vue其实很简单{{n}}h2>
            <h2>当前的n值是：{{n}}h2>
            <button @click="n++">点我n+1button>
        div>
    body>
    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                n:1
            }
        })
    script>
html>

16. 自定义指令

16.1 自定义指令

自定义指令总结：

一、定义语法：

(1).局部指令：

new Vue({ new Vue({

directives:{指令名:配置对象} 或 directives{指令名:回调函数}

}) })

(2).全局指令：

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：

(1).bind：指令与元素成功绑定时调用。

(2).inserted：指令所在元素被插入页面时调用。

(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>自定义指令title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2>{{name}}h2>
            <h2>当前的n值是：<span v-text="n">span>h2>
            
            <h2>放大10倍后的n值是：<span v-big="n">span>h2>
            <button @click="n++">点我n+1button>
            <hr>
            <input type="text" v-fbind:value="n">
        div>

        <script type="text/javascript">
            // 定义全局指令
            Vue.directive('fbind', {
                // 指令与元素成功绑定时（一上来）
                bind(element, binding){
                    element.value = binding.value
                },
                // 指令所在元素被插入页面时
                inserted (element, binding) {
                    element.focus()
                },
                // 指令所在的模板被重新解析时
                update (element, binding) {
                    element.value = binding.value                        
                },
            });
            new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷',
                    n:1
                },
                // 定义局部指令
                directives:{
                    // big函数何时会被调用？
                    // 1.指令与元素成功绑定时（一上来）
                    // 2.指令所在的模板被重新解析时。
                    // 'big-number'(element, binding){
                    //     console.log('big');
                    //     element.innerText = binding.value * 10
                    // },
                    big(element, binding){
                        // 此处的this是window
                        console.log('big', this);
                        element.innerText = binding.value * 10
                    },
                    fbind:{
                        // 指令与元素成功绑定时（一上来）
                        bind(element, binding){
                            element.value = binding.value
                        },
                        // 指令所在元素被插入页面时
                        inserted (element, binding) {
                            element.focus()
                        },
                        // 指令所在的模板被重新解析时
                        update (element, binding) {
                            element.value = binding.value                        
                        },
                    }
                }
            })
        script>
    body>
html>

16.2 回顾一个DOM操作

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>回顾一个DOM操作title>
        <style>
            .demo{
                background-color: orange;
            }
        style>
    head>
    <body>
        <button id="btn">点我创建一个输入框button>

        <script type="text/javascript">
            const btn = document.getElementById('btn')
            btn.onclick = ()=>{
                const input = document.createElement('input')

                input.className = 'demo'
                input.value = 99
                input.onclick = ()=>{alert(1)}

                document.body.appendChild(input)

                input.focus()
                input.parentElement.style.backgroundColor = 'skyblue'
                console.log(input.parentElement);
            }
        script>
    body>
html>

17. 生命周期

17.1 引出生命周期

生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或组件实例对象。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>引出生命周期title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2 v-if="a">你好啊h2>
            <h2 :style="{opacity}">欢迎学习Vueh2>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    a:true,
                    opacity:1
                },
                // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
                mounted(){
                    console.log('mounted', this);
                    // 通过定时器实现
                    setInterval(() => {
                        this.opacity -= 0.01
                        if (this.opacity <= 0) {
                            this.opacity = 1
                        }
                    }, 16);
                }
            })
        script>
    body>
html>

17.2 分析生命周期

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>分析生命周期title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2 v-text="n">h2>
            <h2>当前的n值是：{{n}}h2>
            <button @click="add">点我n+1button>
            <button @click="bye">点我销毁vmbutton>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    n:1
                },
                methods:{
                    add(){
                        console.log('add');
                        this.n++
                    },
                    bye(){
                        console.log('bye');
                        this.$destroy();
                    }
                },
                watch:{
                    n(){
                        console.log('n被修改了');
                    }
                },
                beforeCreate(){
                    console.log('beforeCreate');
                },
                created(){
                    console.log('created');
                },
                beforeMount(){
                    console.log('beforeMount');                    
                },
                mounted(){
                    console.log('mounted');                    
                },
                beforeUpdate(){
                    console.log('beforeUpdate');                    
                },
                updated(){
                    console.log('updated');                    
                },
                beforeDestroy() {
                    console.log('beforeDestroy');                    
                },
                destroyed(){
                    console.log('destroyed');
                }
            })
        script>
    body>
html>

17.3 总结生命周期

常用的生命周期钩子：

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>总结生命周期title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h2 :style="{opacity}">欢迎学习Vueh2>
            <button @click="opacity = 1">透明度设置为1button>
            <button @click="stop">点我停止变换button>
        div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    opacity:1
                },
                methods:{
                    stop(){
                        console.log('bye');
                        this.$destroy();
                    }
                },
                // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
                mounted(){
                    console.log('mounted', this);
                    // 通过定时器实现
                    this.timer = setInterval(() => {
                        this.opacity -= 0.01
                        if (this.opacity <= 0) {
                            this.opacity = 1
                        }
                    }, 16);
                },
                beforeDestroy() {
                    clearInterval(this.timer)
                    console.log('vm嘎了给给了');                    
                }
            })
        script>
    body>
html>

18. 非单文件组件

18.1 基本使用

Vue中使用组件的三大步骤：

一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

区别如下：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、如何注册组件？

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component(‘组件名’,组件)

三、编写组件标签：

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>基本使用title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <hello>hello>
            <hr>
            <h1>{{msg}}h1>
            <hr>
            
            <school>school>
            <hr>
            
            <student>student>
        div>

        <div id="root2">
            <hello>hello>
        div>

        <script type="text/javascript">
            // 第一步：创建school组件
            const school = Vue.extend({
                template: `
                    
                        学校名称：{{schoolName}}
                        学校地址：{{address}}
                        
                    
                `,
                // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
                // el:'#root',
                data(){
                    return {
                        schoolName:'尚硅谷',
                        address:'北京昌平'
                    }
                },
                methods:{
                    showName(){
                        alert(this.schoolName)
                    }
                }, 
            });

            // 第一步：创建student组件
            const student = Vue.extend({
                template: `
                    
                        学生名称：{{studentName}}
                        学生年龄：{{age}}
                    
                `,
                data(){
                    return {
                        studentName:'张三',
                        age:18
                    }
                }
            });

            // 第一步：创建hello组件
            const hello = Vue.extend({
                template: `
                    
                        你好啊！{{name}}
                    
                `,
                data(){
                    return {
                        name:'Tom'
                    }
                }
            });

            // 第二步：全局注册组件
            Vue.component('hello', hello)

            // 创建vm
            new Vue({
                el:'#root',
                data:{
                    msg:'你好啊！'
                },
                // 第二步：注册组件（局部注册）
                components:{
                    school,
                    student
                }
            })

            new Vue({
                el:'#root2',
            })
        script>
    body>
html>

18.2 几个注意点

几个注意点：

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

第一种写法：

第二种写法：

备注：不用使用脚手架时，会导致后续组件不能渲染。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>几个注意点title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <h1>{{msg}}h1>
            <school>school>
        div>

        <script type="text/javascript">
            // 定义组件
            const s = Vue.extend({
                name:'atguigu',
                template:`
                    
                        学校名称：{{name}}
                        学校地址：{{address}}
                    
                `,
                data(){
                    return {
                        name:'尚硅谷',
                        address:'北京'
                    }
                }
            })

            new Vue({
                el:'#root',
                data:{
                    msg:'欢迎学习Vue！'
                },
                components:{
                    school:s
                }
            })
        script>
    body>
html>

18.3 组件的嵌套

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>组件的嵌套title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            
        div>

        <div id="root2">
            <hello>hello>
        div>

        <script type="text/javascript">
            // 创建student组件
            const student = Vue.extend({
                template: `
                    
                        学生名称：{{name}}
                        学生年龄：{{age}}
                    
                `,
                data(){
                    return {
                        name:'张三',
                        age:18
                    }
                }
            });
            // 创建school组件
            const school = Vue.extend({
                template: `
                    
                        学校名称：{{name}}
                        学校地址：{{address}}

                        
                    
                `,
                data(){
                    return {
                        name:'尚硅谷',
                        address:'北京昌平'
                    }
                },
                components:{
                    student
                }
            });


            // 创建hello组件
            const hello = Vue.extend({
                template: `
                    
                        你好啊！{{msg}}
                    
                `,
                data(){
                    return {
                        msg:'欢迎来到尚硅谷学习！'
                    }
                }
            });

            // 定义app组件
            const app = Vue.extend({
                template: `
                    
                        
                        
                    
                `,
                components:{
                    school,
                    hello
                }
            })

            // 创建vm
            new Vue({
                template:'',
                el:'#root',
                components:{
                    app
                }
            })
        script>
    body>
html>

18.4 VueComponent

关于VueComponent：

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，

即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

4.关于this指向：

(1).组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

Vue的实例对象，以后简称vm。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>VueComponenttitle>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <school>school>
            <hello>hello>
        div>

        <script type="text/javascript">
            // 创建school组件
            const school = Vue.extend({
                template: `
                    
                        学校名称：{{name}}
                        学校地址：{{address}}
                        
                    
                `,
                data(){
                    return {
                        name:'尚硅谷',
                        address:'北京昌平'
                    }
                },
                methods:{
                    showName(){
                        console.log('showName', this);
                    }
                }
            });

            // 创建test组件
            const test = Vue.extend({
                template: `
                    atguigu
                `
            })

            // 创建hello组件
            const hello = Vue.extend({
                template: `
                    
                        {{msg}}
                        
                    
                `,
                data(){
                    return {
                        msg:'你好啊！'
                    }
                },
                components:{
                    test
                }
            });

            console.log('@', school);
            console.log('#', test);

            // 创建vm
            new Vue({
                el:'#root',
                components:{
                    school,
                    hello
                }
            })
        script>
    body>
html>

18.5 一个重要的内置关系

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype

2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>一个重要的内置关系title>
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        <div id="root">
            <school>school>
        div>

        <script type="text/javascript">
            // 给Vue原型添加一个变量x
            Vue.prototype.x = 99
            // 创建school组件
            const school = Vue.extend({
                template: `
                    
                        学校名称：{{name}}
                        学校地址：{{address}}
                        
                    
                `,
                data(){
                    return {
                        name:'尚硅谷',
                        address:'北京昌平'
                    }
                },
                methods:{
                    showX(){
                        console.log(this.x);
                    }
                }
            });

            // 创建vm
            new Vue({
                el:'#root',
                data:{
                    msg:'你好！'
                },
                components:{
                    school,
                }
            })

            // // 定义一个构造函数
            // function Demo(){
            //     this.a = 1
            //     this.b = 2
            // }
            // // 创建一个Demo的实例对象
            // const d = new Demo()
            // // 显示原型属性
            // console.log(Demo.prototype);
            // // 隐式原型属性
            // console.log(d.__proto__);
            // // 判断是否是同一个东西
            // console.log(Demo.prototype === d.__proto__); // 结果为true
            // // 程序员通过原型属性操作原型对象，追加一个x属性，值为99
            // Demo.prototype.x = 99
            // // 输出查看实例对象有无变化
            // console.log('@', d); // 结果d的prototype中出现了x: 99
        script>
    body>
html>

19. 单文件组件

School.vue

Student.vue

App.vue

main.js

import App from './App.vue'

new Vue({
    el:'#root',
    template: ``,
    components:{
        App
    }
})

index.html

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>练习一下单文件组件的语法title>
    head>
    <body>
        
        <div id="root">div>        
        
        
        
    body>
html>

你可能感兴趣的:(vue.js,学习,前端框架)

情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录 leetcode 算法职场和发展
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
2019-12-22-22:30 涓涓1016
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
ARM驱动学习之4小结 JT灬新一嵌入式 C++arm开发学习 linux
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
展现思维导图魅力，不断挖掘人生宝藏思维导图讲师Mandy
第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面一个射手座的程序媛程序员华为od 面试职场和发展
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
数字里的世界17期：2021年全球10大顶级数据中心，中国移动榜首张三叨
你知道吗？2016年，全球的数据中心共计用电4160亿千瓦时，比整个英国的发电量还多40％！前言每天，我们都会创造超过250万TB的数据。并且随着物联网（IOT）的不断普及，这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代，但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术，比如人工智能和机器学习，已经将我们推向
学习“论语”-第59天春峰轩
12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
nosql数据库技术与应用知识点皆过客，揽星河 NoSQL nosql 数据库大数据数据分析数据结构非关系型数据库
Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
《Python数据分析实战终极指南》 xjt921122 python 数据分析开发语言
对于分析师来说，大家在学习Python数据分析的路上，多多少少都遇到过很多大坑**，有关于技能和思维的**：Excel已经没办法处理现有的数据量了，应该学Python吗？找了一大堆Python和Pandas的资料来学习，为什么自己动手就懵了？跟着比赛类公开数据分析案例练了很久，为什么当自己面对数据需求还是只会数据处理而没有分析思路？学了对比、细分、聚类分析，也会用PEST、波特五力这类分析法，为啥
jdk tomcat 环境变量配置 Array_06 java jdk tomcat
Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。电脑-->右击属性-->高级环境变量-->环境变量。分别配置 : path &nbs
Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 java spring
在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
LeetCode[位运算] - #136 数组中的单一数 Cwind java 题解位运算 LeetCode Algorithm
原题链接：#136 Single Number 要求：给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间难度：中等分析：题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
qq登陆界面开发 15700786134 qq
今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First { public void initul(){ jf=ne
Linux的程序包管理器RPM 被触发 linux
在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
socket通信遇到EOFException 肆无忌惮_ EOFException
java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
基于spring的web项目定时操作知了ing java Web
废话不多说，直接上代码，很简单配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
树形结构的数据库表Schema设计矮蛋蛋 schema
原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488 程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
maven将jar包和源码一起打包到本地仓库 alleni123 maven
http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
java IO操作与 File 获取文件或文件夹的大小，可读，等属性！！！百合不是茶
类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件：标准文件（txt doc mp3...）目录文件（文件夹）虚拟内存文件 2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
Spring注入有继承关系的类（2） bijian1013 java spring
被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
30岁转型期你能否成为成功人士 bijian1013 成长励志
很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
【Velocity四】Velocity与Java互操作 bit1129 velocity
Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础， POJO package com.tom.servlets; public
【Hive十一】Hive数据倾斜优化 bit1129 hive
什么是Hive数据倾斜问题操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。原因：key分布不均匀倾斜度衡量：平均记录数超过50w且
在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
java-3.求子数组的最大和 bylijinnan java
package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和题目描述：输入一个整形数组，数组里有正数也有负数。数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。求所有子数组的和的最大值。要求时间复杂度为O(n)。例如输入的数组为1, -2, 3, 10, -4,
Netty源码学习-FileRegion bylijinnan java netty
今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板 Zero Clipboard
Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
单例模式 cuishikuan 单例模式
第一种（懒汉，线程不安全）： public class Singleton { 2 private static Singleton instance; 3 pri
spring+websocket的使用 dalan_123
一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.or
细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL, -> day
Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。一、Activity跳转方法一Intent intent = new Intent(A.this, B.class); startActivity(intent) 方法二Intent intent = new Intent();intent.setCla
jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
Android 应用程序开关GPS gqdy365 android
要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
Windows上调试MapReduce zhiquanliu mapreduce
1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
如何看待一些知名博客推广软文的行为？ justjavac 博客
本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态：当初求种像条狗，如今撸完嫌人丑当初搜贴像条犬，如今读完嫌人软你为啥感觉不舒服呢？难道非得要作者把自己的劳动成果免费给你用，你才舒服？就如同 Google 关闭了 Gooled Reader，那是
sql优化总结 macroli sql
为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
Linux Oracle中常遇到的一些问题及命令总结超声波 oracle linux
1.linux更改主机名 (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名 2.linux重启oracle实例及监听的各种方法（注意操作的顺序应该是先监听，后数据库实例） &nbs
hive函数大全及使用示例 superlxw1234 hadoop hive函数
具体说明及示例参见附件文档。文档目录：目录一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class