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