一、Vue基础入门

1、基本入门

一般的使用

v-bind:绑定的属性     //绑定的模板语法
toUpperCase()       //大写

 

v-bind:     //单项数据绑定
v-model:    //双项数据绑定

data的使用

  • 函数式【组件用的多】

  • 对象式

data(){
    retrun {
        name:"数据"
    }
}

2、MVVM模型

M:模型 ：对应的data中的数据

V:视图：模板

VM:视图模型：Vue实例对象

3、数据代理

1、用defineProperty()方法

  • yes的属性不能遍历 【enumerable】

  • yes默认不可以修改 【wirteable】

  • yes默认不可删除 【configurable】

  • get和set方法绑定 会绑定值

<div id="root"></div>
    <script>
        let number = 789
        let person = {
            name:'张三',
            age:18
        }
​
        Object.defineProperty(person,'hello',{
            value:true
            enumerable:true //控制属性是否可以枚举【遍历】
            wirteable:true //属性值是否可以修改
            configurable:true //属性是否可以被删除
            //执行函数
            get:function(){
                console.log('有人读取hello属性了')
                retrun number
            }
            //当有人修改属性时，set可以收到值
            set(){
                console.log('有人修改了hello属性了')
                number = value
            }
        })
        console.log(person);
    </script>

2、数据代理的理解和使用

_data是代理,代理使用后就前面不用去写——data也可以实现
【使用了数据劫持】

4、事件处理

v-on:click事件

 没参数写法可以
 onclick
 
 //有参数
 onclick(66,$event)//使用的时候需要传参的时候用$event占位
 
 
 methods:{
                onclick(event){
                    // console.log(event.target.innerText);
                    // console.log(this);   //此处的this是vm 箭头函数使用的window
                    // alert("欢迎你");
                }
            }

1、事件修饰符

.prevent    //阻止默认时间
.stop    //阻止事件冒泡
.once     //事件触发一次
默认使用的是冒泡 外-->内
.capture   //使用事件的捕获模式【点击的那个div执行，外面的不触发】内->外
.self  //

 

2、键盘事件[keyon. keydown]

.enter
.delete
.esc
.space
.tab
.up
.down
.left
.right

 

姓名案例

slice(0,3)//截取字符串   3位  0 1 2

 

5、计算属性和监视

1、计算属性的作用[速度快，方便]-computed

例如
 computed:{
                fullname:{
                    get(){
                        console.log(this);
                        return this.firstname.slice(0,3)+this.lastname
                    }，
                    //当fullname会被修改是使用
                    set(value){
                    	console.log("set",value)
                    	const arr = value.split("-")
                    	this.firstname = arr[0],
                        this.lastname = arr[1]
                    }
                }
            }

get()方法使用了缓存机制。

什么时候调用
1、获取值的时候
2、依赖的数据改变时会触发

set()方法如果修改数据，还是修改原始的数据如上：

 

简写的方法【只有只考虑读取的时候可以使用简写】

 //简写计算方法
           computed:{
                fullname(){
                    console.log(this);
                    return this.firstname.slice(0,3)+this.lastname
                }
           }

2、监听属性-watch

 

handle方法

imediate:true, //初始化自动执行的方法，一个配置类

watch:{
	isHot:{
	immediate:true,			//初始化自动执行的方法，一个配置类
	handler(newValue,oldValue){
		console.log(newValue,oldValue)
	}
	}
}

第二种使用方法

vm.$watch("isHot",{
    immediate:true,			//初始化自动执行的方法，一个配置类
    	handler(newValue,oldValue){
            console.log(newValue,oldValue)
        }
})

 

深度监视

//默认开启深度监视
            deep:false,
            handler(newValue,oldValue){
                console.log("number变了");
            }

 

监视简写

只有handle的时候
watch:{
	isHot(newValue,oldValue){

	}
}

vm.$watch('isHot',function(newValue,oldValue){

})

6、计算和监视的区别

监听修改的时候是命令式

计算是进行比较

  • 1、computed能够完成的功能，watch也可以实现

  • 2、watch能完成的功能computed不一定可以完成

两个小原则

  • 1、被Vue管理的函数，最好写成普通函数，这要可以保证this指向是vm或组件实例

  • 2、所有不被Vue管理的函数，（定时器的回调函数，ajax的回调函数等，Promise的回调函数），最好写成箭头函数，这样的this指向才是vm 或组件实例

 <div id="root">
        <input type="text" v-model="firstname"><br>
        <input type="text" v-model="lastname"><br>
        <h3>{{fullname}}</h3>
    </div>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                firstname:'张',
                lastname:'三',
                fullname:'张-三'
            },
            watch:{
                firstname(newValue){
                    //最好使用箭头函数
                    setTimeout(()=>{
                        this.fullname = newValue+"-"+this.lastname; 
                    },1000)

                },
                lastname(newValue){
                    this.fullname = this.firstname+"-"+newValue
                }
            }
        })
    </script>

7、Vue演示绑定

Class的使用：三种写法

  • 字符串写法，data中创建，适用于样式类名不确定，需要动态指定

  • 数组写法，data中创建，适用于绑定的样式个数不确定，名字也不确定

  • 对象写法，data中创建，适用于绑定的样式个数确定，名字确定，但是需要动态指定是否使用

 

style的使用

  • 对象写法【obj{fontsize:'40px'}】

 

8、渲染方式

条件渲染

v-show
v-if
v-else
v-else-if

:key的指定的方式使用

列表渲染[:key重要的唯一标识，指定唯一]

v-for  		//循环
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

Key的理解

唯一标识符，不能使用index索引，防止出现错乱

使用虚拟DOM的对比，相同便签的地方会复用，新的虚拟DOM不会装换，用原来的

列表过滤

使用了数组的过滤方法

数组过滤
数组.filter((参数)=>{})

字符截取是否包含
字符.indexOf(值)

案例【watch和computed的方式】

 <div id="root">
        <input type="text" v-model="keyword">
        <ul>
            <li v-for="(value,index) in filterPerson" :key="value.id">
                id:{{value.id}} - 姓名:{{value.name}} - 年龄:{{value.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root',
            data:{
                keyword:'',
                person:[
                    {id:1,name:"张三",age:18},
                    {id:2,name:"李四",age:42},
                    {id:3,name:"王五",age:8},
                    {id:4,name:"李飞",age:88},
                    {id:5,name:"张五",age:88},
                ],
                filterPerson:[]
            },
            watch:{
               keyword:{
                immediate:true,	
                   handler(newValue,oldValue){
                       //逐个过滤 !-1的提取
                        this.filterPerson = this.person.filter((p)=>{
                            return p.name.indexOf(newValue) != -1;
                        })
                   }
               }
            }
        })
    </script>
<div id="root">
        <h1>过滤的案例</h1>
        <input type="text" v-model="keyword">
        <ul>
            <li v-for="(item,index) in filterPerson" :key="item.id">
                id:{{item.id}} - name:{{item.name}} - age:{{item.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                keyword:'',
                person:[
                    {id:1,name:"李四",age:18},
                    {id:2,name:"海思",age:88},
                    {id:3,name:"张四",age:15},
                    {id:4,name:"海里",age:45}
                ]
            },
            //使用计算属性完成过滤
            computed:{

                filterPerson:{

                    get(){
                        return this.person.filter((p)=>{
                            return p.name.indexOf(this.keyword) != -1;
                        })
                    }
                }

            }
        })
    </script>

列表排序

 

排序的方法

数组.sort((p1,p2)=>{
	return this.sortType === 1 ? p1.age-p2.age : p2.age-p1.age;
})

//这里使用的是数组中的age部分来判断的
p1-p2是升序
p2-p1是降序

 

  <div id="root">
        <h1>列表排序</h1>
        <input type="text" v-model="keyword">
        <button @click="sortType = 1">年龄顺序排序</button>
        <button @click="sortType = 2">年龄倒序排序</button>
        <button @click="sortType = 0">年龄原来顺序</button>
        <ul>
            <li v-for="(item,index) in filterPerson" :key="item.id">
                id:{{item.id}} - name:{{item.name}} - age:{{item.age}}
            </li>
        </ul>

    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                sortType:0,//1升   2降
                keyword:'',
                person:[
                    {id:1,name:"李四",age:18},
                    {id:2,name:"海思",age:88},
                    {id:3,name:"张四",age:15},
                    {id:4,name:"海里",age:45}
                ]
            },
            computed:{
                filterPerson(){
                    const arr = this.person.filter((p)=>{
                        return p.name.indexOf(this.keyword) != -1;
                    });
                    //这里的判断0就是false
                    if(this.sortType){
                        arr.sort((p1,p2)=>{
                            return this.sortType === 1 ? p1.age-p2.age : p2.age-p1.age;
                        })
                    }
                    return arr;
                }
            }
        })
    </script>

9、获取表单的数据

    <div id="root">
        <form action="" @submit.prevent="demo1">
            <label>账号:</label><input type="text" name="username" v-model="username"><br><br>
            <label>密码:</label><input type="number" name="password" v-model="password"><br><br>
            <label>性别:</label>
            男<input type="radio" name="sex" v-model.number="sex" value=1>
            女<input type="radio" name="sex" v-model.number="sex" value=2><br><br>
            <label>爱好:</label>
            抽烟<input type="checkbox" v-model="hobby" value="抽烟">
            喝酒<input type="checkbox" v-model="hobby" value="喝酒">
            烫头<input type="checkbox" v-model="hobby" value="烫头"><br><br>
            <label>所在校区:</label>
            <select name="school" v-model="city">
                <option>请选择所在校区</option>
                <option value="beijing" >北京</option>
                <option value="shanghai" >上海</option>
                <option value="wuahn">武汉</option>
            </select><br><br>
            <label>其他信息</label>
            <textarea v-model.lazy="other" name="other" id="" cols="30" rows="10">
            </textarea><br><br>
            <button>提交</button>

        </form>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:"#root",
            data:{
                username:'',
                password:'',
                sex:1,
                hobby:[],
                city:'beijing',
                other:''
            },
            methods: {
                demo1(){
                    console.log(JSON.stringify(this._data));
                }
            },
        })
    </script>

10、Vue监听的总结

数组方法回顾

pop()			//删除数组的最后一个元素
push()			//在数组最后追加元素
reverse()		//数组原来的顺序反转
shift()			//删除数组第一个元素
slice(start,off)			//从第一个元素选择元素[截取]
sort()			//排序
splice()		//在数组的第二个元素添加元素
unshift()		//数组最前追加元素

 

  methods: {
                addSex(){
                    //添加属性的方法，必须在data的属性中的属性添加，根属性无法添加
                    // Vue.set(this.student,"sex","男")
                    this.$set(this.student,"sex","女")
                },

11、过滤器

使用dayjs

 dayjs(this.date).format('YYYY-MM-DD HH:mm:ss')

全局过滤器

  Vue.filter('timeSlice',function(value){
            return value.slice(0,4);
        })

局部过滤

  filters:{
                timeFormart(value){
                    console.log("@",value);
                    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
                },
                // timeSlice(value){
                //     return value.slice(0,4);
                // }
           }

12、指令

v-text
v-html
v-cloak		//将未解析的模板显示出来
v-once		//渲染一次
v-pre		//跳过节点的编译过程，写的什么显示什么，不解析
二、进阶

1、生命周期

VUE官网

//挂载，初始的真实DOM元素放入页面   1次
mounted(){

}

流程：VUE官网

Vue基础_原型对象

2、组件开发

组件入门

理解：实现组件的复用

  • 局部组件

  • 全局组件

演示：

const student ={
        template:`
            <div>
                <h3>学生名称:{{studentName}}</h3>
                <h3>学校性别:{{sex}}</h3>
            </div>
        `,

        data() {
            return {
                studentName:"罗寿平",
                sex:"男"
            }
        },
    }

    const outcom = Vue.extend({
        template:`
        <div>
            <h2>这是全局组件</h2>
        </div>
        `
    })

    //全局组件
    Vue.component('outcom',outcom);

    new Vue({
        el:'#root',
        data:{
            msg:"使用单文件组件的注册组件的方法"
        },
        //注册局部组件
        components:{
            school,
            student
        }
    });

组件嵌套

这里主要使用App来统一管理是最重要的

 

理解VueComponent

组件声明多个，他们的VueComponent不一样，

原因是：它们都实现了extend方法，里面调用了VueComponent方法声明了一个对象，所以每一个的都是一个新的对象

 

methods:方法的this使用的就是VueComponent的实例对象，而不是Vue实例对象

 

重要的内置关系

VueComponent.prototype.__proto__ === Vue.prototype

VueComponent的原型对象 找的是逻辑是：
-->他的原型对象--->他的隐式原型对象-->Vue的原型对象

1、VueComponent.prototype.proto === Vue.prototype

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

 

3、单文件组件

组成部分：组件，App.vue组件，main.js文件,index.html文件

 

组件暴露出来：

export const 名称 = {}

export default 组件名 {}

 

4、脚手架

main.js的渲染解析：

默认映入的Vue是vue.runtime.esm.js     //一个精简版的vue，没有模板解析器

它使用的格式是：例如
 render(h) {
    return h('h1','你好')
  },

使用钩子函数简化
render: h => h(App),

 

output.js是配置文件可以看：

output.js

 

vue.config.js文件

配置

pages		//配置路径

lintOnSave	//语法检查

5、标签属性

ref

在html标签标识【获取DOM】		在组件表示是组件的实例对象VueComponents
ref						//标识DOM
this.$refs.标识		  //获取DOM

<template>
    <div>
        <h1 ref="title">演示ref</h1>
        <button @click="search">获取上面的DOM</button>
        <Student ref="stu"></Student>
    </div>
</template>

<script>
    import Student from './components/Student.vue';
    export default {
        name:'App',
        components:{
            Student
        },
        methods:{
            search(){
                console.log(this.$refs.title);
                console.log(this.$refs.stu.$children[0].address);
            }
        }
    }
</script>

props

props:['name','sex','age']		//第一种写法

props:{							//接收是限定类型
	name:String,
	sex:String,
	age:Number
}


props:{						//限定是否接收和默认值设定和必要性
	name:{
		type:String,
		required:true
	},
	sex:{
		type:String,
		default:'男'
	},
	age:{
		type:Number,
		required:true
	}
}

Student.vue

<template>
  <div>
      <h1>姓名:{{name}}</h1>
      <h2>性别:{{sex}}</h2>
      <h2>年龄:{{age}}</h2>
  </div>
</template>

<script>
export default {
    name:'Student',
    // props:['name','sex','age']  //简单使用

    //限定类型
    // props:{
    //     name:String,
    //     sex:String,
    //     age:Number
    // }

    //限定是否必填和默认值
    props:{
        name:{
            type:String,
            required:true
        },
        sex:{
            type:String,
            default:"男"
        },
        age:{
            type:Number,
            required:true
        }
    }
}
</script>


App.vue

<template>
  <div>
      <h1 v-text="msg"></h1>
      <Student name="张飒" :age="18"></Student>
  </div>
</template>

<script>
import Student from './components/Student'
export default {
    name:'App',
    data() {
        return {
            msg:"使用的是props传递参数"
        }
    },
    components:{
        Student
    }
}
</script>

修改值

<div>
      <h1>姓名:{{myName}}</h1>
      <h2>性别:{{sex}}</h2>
      <h2>年龄:{{age}}</h2>
      <button @click="changeName">点击修改名称为李白</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            myName:this.name,
        }
    },
    methods:{
        changeName(){
            this.myName = "李白"
        }
    },

 

 

6、mixins混合

在一个js文件中写好一些数据，在其他的应用中导入使用import{.......}

局部混合【在每个组件中应用】

mixins:{}

全局混合【main.js中使用】

Vue.mixin()

7、插件

install(){}
Vue.use()			//增强Vue