1.什么是Vue.js
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。(作者:中国人–尤雨溪(EvanYou))
2.Vue的优点
1.轻量级框架
只关注视图层,是一个构建数据的视图集合,Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
2.简单易学
国人开发,中文文档,不存在语言障碍,易于理解和学习
3.双向数据绑定
就是响应式数据绑定,指vue.js会自动对页面中某些数据的变化做出同步的响应。
4.组件化
Vue封装了大量的组件,可以直接使用,省去了大量的Js代码
5.视图,数据,结构分离
使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
6.运行速度更快
就性能而言,vue相比较react存在很大的优势
3.helloword
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
new Vue 创建一个Vue实例,
el: '#app' 挂在绑定在那个元素点,
data : 就是vue的一些数据
{{message}} 通过{{}}去取值
4.Vue的常用指令
Vue指令以v-开头,作用在HTML元素上,将指令绑定在元素上时,会给绑定的元素添加一些特殊行为,可将指令视作特殊的HTML属性
v-model 双向绑定
```java
{{msg}}<br />
<input v-model="msg" />
```
v-if,v-else,v-else-if, 条件判断指令
```java
<div v-if="age>50">
好好养老
</div>
<div v-else-if="age>18">
好好工作
</div>
<div v-else>
打电竞
</div>
```
v-show 条件渲染指令,与v-if不同的是,无论v-show的值为true或false,元素都会存在于HTML代码中
v-for 循环指令,基于一个数组渲染一个列表
v-for = "item in items"
v-bind 给DOM绑定元素属性,
v-bind:argument="expression"
v-on 用于监听DOM事件,语法与v-bind类似
v-on指令可以缩写为@符号
v-html和v-text
```java
<div id="app">
<div v-html="msg">xxxx</div>
<div v-text="msg">xxxx</div>
</div>
new Vue({
el:'#app',
data:{
msg:"<h1>哈哈哈</h1>"
}
})
```
v-text:会把h1标签转义输出,不解析标签,
v-html:不仅可以渲染数据,而且可以解析标签
5.VUE的属性和函数的生命周期
Vue钩子函数:
beforeCreate:该方法(函数)在vm对象初始化之前,dom对象没有创建,而且data数据没有加载的时候执行。
create:该方法(函数)在vm对象初始化之后,dom对象没有创建,但是data数据已经加载的时候执行。
beforeMount:该方法(函数)中dom对象已经创建,data数据已经加载,但是没有把data中的数据挂载到dom里面的指令中。
mounted:该方法(函数)中dom对象已经创建,data数据已经加载,而且已经把data中的数据挂载到dom里面的指令中。
beforeDestroy:该方法(函数)中dom对象销毁之前执行,此时dom对象和data数据都是存在的。
destroy:该方法在dom对象销毁时候执行,此时可能拿不到dom对象。
小结:vue的对象在创建的时候会经历一系列初始化过程,每个过程都对应的钩子函数,可以在这些钩子函数里面处理业务;create是用于请求后台数据ajax,不涉及html页面标签;beforeMount就是把data数据挂载到html视图之前,mounted是data数据挂载到html视图之后
Vue对象中data(必须是一个函数):
定义 vue实例对象中变量,里面可以定义各种类型的数据变量。都是全局变量,需要使用的话,直接对象调用对应的变量就可以
Vue对象中computed属性:
在Vue中计算属性是基于它们的依赖的变量值进行缓存的,而方法是不会基于它们的依赖值进行缓存的。所以使用计算属性要比方法性能更好。同样也表示计算属性是不会主动更新数据,而方法每次都是计算后的数据。它比较适合的场景是当页面中有大量的计算依赖某一个基础的变量值变化后要重新计算其他的值。就可以使用计算属性。计算属性computed里面的变量和data里面的变量一样都是全局的可以双向绑定的
<div id="app">
你的生日是:
{{dateFmt}}
</div>
new Vue({
el:'#app',
data:{
date:1429032123201
},
methods:{
},
computed:{
dateFmt(){
return new Date(this.date).getFullYear()+'-'+(new Date(this.date).getMonth()+1)+"-"+new Date(this.date).getDate()
}
}
})
Vue对象中watch属性:
监听vue对象中data方法中定义的变量值的变化,有变化就会触发watch中监听函数。而且只能监听vue实例对象中单个变量或者对象,不能监vue实例对象中某一个属性。它比较适合的场景是一个数据影响多个数据。每次触发都会重新计算,没有缓存,比较消耗浏览器性能。watch属性不同于computed属性
<div id="app">
{{msg}}
<input v-model="msg" />
</div>
new Vue({
el:'#app',
data:{
msg:''
},
methods:{
},
watch:{
msg(newVal,oldVal){
console.log(newVal,oldVal);
}
}
})
全局组件注册:
```java
<div id="app">
<!-- 自定义的组件名称my-->
<my></my>
</div>
// 第一个参数就是组件的名称
// 第二参数是个对象,里面很多对组件配置
Vue.component('my',{
template:'<h1>那瞎子真菜</h1>'
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
```
局部组件的注册:(推荐使用)
```java
<!-- 模板-->
<div id="app">
<My-Tag></My-Tag>
</div>
<template id="myTem">
<form>
{{username}}<input /><br>
密码<input />
</form>
</template>
new Vue({
el:'#app',
data:{
},
methods:{
},
// 局部注册组件
components:{
‘MyTag’:{
template:'#myTem'
}
}
})
```
细节:
1.组件名称短横线命名
2.template 模板有且仅有一个标签
3.template里面的html的dom元素可以使用template标签代替,但是把template放到挂载区域它会渲染显示
4.template里面的html的dom元素可以使用script标签代替,把template放到挂载区域不会渲染显示
Vue对象中props属性:
一个组件可以直接在模板里面渲染data里面的数据(双大括号),子组件不能直接在模板里面渲染父元素的数据,如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。(也就是props是子组件访问父组件数据的唯一接口)
```java
<div id="app1">
<!-- hello引用父元素的hello -->
<child :hello='message'></child>
</div>
<script>
var com1 = Vue.component('child',{
// 声明在prop中的变量可以引用父元素的数据
props:['hello'],
// 这里渲染props中声明的那个hello
template:'<div><p>{{ hello }}</p></div>',
})
var app1 = new Vue ({
el: '#app1',
data: {
message: 'message1',
}
})
</script>
```
6.VUE路由
当我们要使用Vue Router 的时候,只需要将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们
```java
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">发现音乐</router-link>
<router-link to="/mymusic">我的音乐</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<!--路由将会显示在这里-->
<router-view></router-view>
</div>
<script>
new Vue({
el:"#app",
router:new VueRouter(
{
routes:[
{ path: '/', component: {template:'<h1>发现音乐</h1>' }},
{ path: '/mymusic', component: {template:'<h1>我的音乐</h1>' } }
]
}
)
})
</script>
```
7.es语法
1.变量和常量
var a='a';
let b='b';// 变量
const c='c';//常量
var和let 的区别:
```java
var i=0;
for (i; i <10 ; i++) {
console.log(i);
}
console.log(i); //i=10
for (let j = 0;j <10 ; j++) {
console.log(j);
}
console.log(j); //j is not defined
```
let可以声明块级作用域的变量
let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响
用let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报r错。
let不允许在相同作用域内,重复声明同一个变量,否则报错.
2.解构表达式:
所谓解构就是解析结构,并对应结构进行使用(快捷解析并重新封装)
```java
// 对象的解构
let json={"code":200,"msg":'ok',data:[]}
let {data}=json;
console.log(data); //[]
```
3.箭头函数
var 函数名 = (参数列表) => {函数内容} (等价于以下代码)
var 函数名 = function(参数列表){
函数内容
}
如果参数只有一个可以省略()(let f8=a=>console.log(a);),函数内容只有一句代码可以省略{}(let f9=(a,b)=> a+b;)
```java
// 推荐写法
let user={
f4:function () {
},
f5(){
},
f6:()=>{}
}
```
4.闭包
(箭头函数中this绑定父级作用域)
闭包发生在创建函数时,实质是一个作用域,在该作用域中允许该自身函数访问并且操作该自身函数之外的变量
```java
<script>
var outerValue = '我是外部变量';
var later;
function outerFunction(){
var innerValue = '我是内部变量';
var innerFunction = function(){
console.log(outerValue);
console.log(innerValue);
};
later = innerFunction;
}
outerFunction(); //我是外部变量
later(); //我是内部变量
</script>
```
一般情况时外部函数outerFunction执行结束后,内部变量innerValue就消失了,但是实际上都打印出来了,这就是闭包的作用。在外部函数执行结束后,将内部函数innerFunction的引用复制给later,执行later相当于执行内部函数,但是仍然可以访问innerValue
闭包的核心原则:
1,内部函数的参数是包含在闭包中的;
2,作用域之外的所有变量,即便是函数声明之后的那些声明,也都包含在闭包中;
3,在相同的作用域中,尚未声明的变量不能提前引用(变量提升)。
闭包的优点
1,利用闭包作用域特性可以将一些变量(函数也是变量)隐藏起来,实现私有化
2,规避冲突