第一章 Vue核心

1 官网

1.英文官网:https://vuejs.org/

2.中文官网:https://cn.vuejs.org/

特点

1.遵循MVVM模式

2.编码简洁,体积小,运行效率高,适合移动/PC端开发

3.它本身只关注UI,也可以引入其它第三方库开发项目

与其他JS框架的关联 

 1.借鉴了Angular的模板和数据绑定技术

2.借鉴了React的组件化和虚拟DOM技术

周边库

1.vue-cli:vue脚手架

2.vue-resource

3.axios

4.vue-router:路由

5.vuex:状态管理

6.element-ui:基于vue的UI组件库(PC端)

。。。。。

第二章 初别Vue

引入js的方式来使用vue

vue官网有两个js包，vue.js、vue.min.js两种，前者是开发者版本，包含完整的警告和调试模式，后者没有。

第一次引入的时候，浏览器会报两个错误：

第一个是没有vue的生产环境，需要下载。可以到edge的拓展里面直接搜索vue Devtool下载，然后开启访问文件路径和无痕浏览（删除网页数据）。

第二个是vue自带的一个警告设置，可以通过进入vue.js的361行自己更改为false或者在script标签的语句中添加上Vue.config.producrtionTip=false.

第三章 vue语法

模板语法：

1.插值语法：使用{{name}}这种两个大括号的形式可以直接转换里面的值。这个name可以是由vue绑定的数据，可以是vue对象中的所有信息，也可以通过调用java中的部分方法例如name.toUpmapper （）

我叫{{name.toUpperCase()}},今年{{age}},现在的时间戳是：{{Date.now()}}

插值语法的用法 ：需要一个这样的Vue模板（div容器）和一个new vue的配置对象。两者是一一对应的。多个对象绑定会直接报错，如果在data中写多个name的值、容器中写多个{{name}}，容器中全部都会展示最后一个name的值。

2.指令语法和数据绑定语法。

• 指令语法：可以使用v-bind来和任意属性单向绑定，绑定之后里面的值就不是一个字符串的形式显示。例如v-bind:href="name",可以简写为:href="name"
• 数据绑定语法：vue可以将控件和vue对象互相绑定，通过v-bind可以实现vue对象到控件的单向绑定，修改input的值无法改变vue对象中的data，但是修改vue中的data可以修改input中的值。通过v-model:value="name"可以实现双向绑定，更改一方另一方也会改变，双向绑定可以简写为v-model="name".
• v-bind和v-model区别：前者可以绑定任何控件的属性（包括不存在的数据），后者只能绑定表单类的有value值的。

数据绑定
单向数据绑双向数据绑定双向数据绑定简写方式v-model

浏览器显示vue对象数据值位置：f12----》vue----》点击控件名（这里是root），如果无法点击，是因为第一个name的值不能为纯中文。

3. 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实例了。

MVVM模型

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

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

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

vue的本质就是参照这种模型来完善的。页面中本身有数据和视图，vue就是在这两种方式之间创建一个对象（vue对象）这种对象完成数据构建视图。

数据代理

Object.defineProperty方法。

使用这个方法可以为某个包装对象添加数据。同时可以控制添加的这个属性是否可以枚举（可以没枚举就意味着这个属性添加到原本对象里，可以通过获取keys或者遍历的方式遍历出来）。是否可以修改和删除。（前端控制台）

数据代理就是使用Object.defineProperty方法使用get和set函数通过一个对象代理另一个对象。

vue的数据代理：

学校名称：{{name}}
学校地址：{{address}}

vue对象中的data属性会被获取到_data对象中，然后低层通过Object.defineProperty方法创建出vue对象中的几个data属性，这个属性呗应用到插值对象中，这就是vue的数据代理。

事件处理

事件的基本使用：

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

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

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

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

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

 event参数记录了点击事件的部分信息，其中包括点击控件的类型，控件数据等信息。在传递数据的时候如果不加上（）就默认传递event参数，加上数据就会将event覆盖，可以使用$event一起使用。

事件的修饰符：

• 1.prevent：阻止默认事件（常用）；
• 2.stop：阻止事件冒泡（常用）；
• 3.once：事件只触发一次（常用）；
• 4.capture：使用事件的捕获模式；
•  5.self：只有event.target是当前操作的元素时才触发事件；
•  6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

欢迎来到{{name}}学习
点我提示信息点我提示信息点我提示信息div1div2点我提示信息
1
2
3
4

按键事件：vue为常用的按键都提供了别名，比如下面这个就是按下回车的时候触发函数

• 常用的按键别名有：回车enter，删除delete，退出esc，空格space，换行tab，上up，下down，做left，右right。
• 还有其他未提供别名的按键可以按照原始值去绑定，单个单词直接小写就可以，两个单词的例如CapsLock这个按键需要写成caps-lock才行（短横线连接两个小写）
• 还有部分系统修饰键，本身存在效果，例如tab无法单个绑定（直接按会切换焦点）。需要搭配其他按键一起使用
• 两个按键一起使用的用法：ctrl+o 
• 可以通过Vue.config.keyCodes.自定义键名=按键编码的用法来自定义

计算属性 

 计算属性是vue为了简化{{}}中表达式的内容而设计的一种方式。例如拼接一个人的姓名：

使用插值语法实现：

姓： 

名： 

全名：{{firstName}}-{{lastName}}

使用方法实现：

    	姓： 

名： 

全名：{{fullName()}}methods: {fullName(){console.log('@---fullName')return this.firstName + '-' + this.lastName}},

注意这两种方法中全名中表达式的值，前面调用的是两个属性的拼接。后者调用的是一个方法必须要带上括号。

使用计算属性实现：

姓： 

名： 

全名：{{fullName}} 

计算属性的简写方式：看似是一个反法

fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}

监视watch

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

 2.监视的属性必须存在，才能进行监视！！（不存在也不报错）

 3.监视的两种写法：

            (1).new Vue时传入watch配置（存在简写方式）

     watch:{//完整写法isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}//省略写法isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}} 

简写方式：当只是用handler方法的时候才可以使用。（注意这个handler方法名固定）。 

            (2).通过vm.$watch监视（存在简写方式）

vm.$watch('isHot',{immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})vm.$watch('isHot',(newValue,oldValue)=>{console.log('isHot被修改了',newValue,oldValue,this)})

深度监视：当存在一个对象属性的时候使用，对象属性number中有a和b两个值。需要监视一个的话就按照下面第一种写法。需要监视number中所有的值的改变就需要加上deep：true。

如果不加上这个属性，那么vue就会监视number这个对象中属性在内存中的位置，只有替换掉。

            'numbers.a':{handler(){console.log('a被改变了')}} //监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log('numbers改变了')}}

computed和watch之间的区别：

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

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

两个重要的小原则：

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！