Vue2基础
- 前端技术了解（了解）
- ES6常见语法（掌握）
- Vue入门（掌握）
- Vue表达式（掌握）
- Vue指令（掌握）
- 计算属性与侦听器（了解）
一、前端技术了解（了解）
- 前端发展历史
1. 静态页面
1990 html css
2. 异步刷新-操作dom
1995 javascprint
3. 动态页面
Asp/jsp（java）,php等，后台臃肿
4. Ajax成为主流 - jQuery
ajax - jQuery
5.Html5
单页面春天了
6. NodeJs：js运行环境
异步编程风格也深受开发人员的喜爱。Node.js 的出现不仅在于 JavaScript 代码可以在服务器端运行
7. npm：Node包管理器
2010年，npm（node package manager - node包管理器/工具）作为node.js的包管理系统,目前已经是世界最大的包模块管理系统。 NPM相当于java 中的 maven。
| JDK、JRE(java开发、运行平台) | Nodejs(JS运行平台) |
|---|---|
| 后端服务器开发 | 前端服务器开发 |
| Maven：管理jar包 | NPM：管理JS库 |
| SSM架构开发项目 | VUE+ElementUI 前段框架 |
- 主流前端框架
前端框架三巨头：
Vue.js：vue.js以轻量易用著称
React.js：发展速度最快， 集web前端与app于一身技术
AngularJS：AngularJS还是曾今老大
二. ES6常见语法
-
概念：ES是ECMAScript的简写，是浏览器脚本语言的规范。JavaScript是ECMAScript的一种实现（VUE是基于ES6的）
-
申明变量和常量
- var：申明变量的方式：函数作用域
- let：申明变量：块级作用域有效，不能二次申明，和Java申明变量很相似
- const：定义常量的，无法二次赋值
- 解构表达式
概念：解构表达式就是将数组或者对象向变量赋值的一种简易写法，这样做的目的是为了方便取值。
数组解构用[ ]
let arr = ["好","大"];
------------------------------------
console.debug(arr[0],arr[1]); //以前的取值是这种方式
------------------------------------
let [a,b] = arr; //解构表达式数组赋值,定义了变量a,b并按照索引赋值。
console.debug(a,b);
对象解构用{ }
var user = {
id: 1,
username:"zs",
age: 11
}
--------------------------------------
console.debug(user.id,user.username,user.age); //以前的取值
--------------------------------------
var {id,username,age} = user; //解构表达式，对象赋值，按照属性名赋值。
console.debug(id,username,age);
- 箭头函数
概念：箭头函数是函数的一种简写：一般用来做参数传递
语法：
var 函数名 = function(参数列表){ // 原版
函数体
}
var 函数名 = (参数列表) => {函数体}等价于一下代码 // 新写法
如果参数只有一个可以省略()，但是如果没有参数不能省略
如果函数体只有一句代码可以省略{}，return;除外
例子：
var user = {
username:"zs",
age:22,
show1:function(){ //以前定义方法的方式
console.debug(this.username+" "+this.age);
},
show2(){ //老版本定义方法的简写 - 常用
console.debug(this.username+" "+this.age);
},
//--------------------------------------
show3:()=>{ //es6定义方法的方式
//注意：这里的this指的是window对象了。不能用this.usename
console.debug(user.username+" "+user.age);
},
}
user.show1();
user.show2();
user.show3();
- Promise对象（了解）
概念：Promise是ES6中异步编程的一种解决方案，语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果**（通过axios发送ajax异步请求）**
以前发送异步请求：
js：XMLHttpRequest对象（代码量多）
jQuery：$.post()/$.ajax() -> 封装了XMLHttpRequest对象
vue框架中推荐使用axios:
axios -> promise对象 -> 封装了XMLHttpRequest对象
Promise的三种状态
- pending：等待中，或者进行中，表示还没有得到结果
- resolved：已经完成，表示得到了我们想要的结果，可以继续往下执行 就相当于success
- rejected：也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行
注意：这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆
例子：
//定义axios对象：模拟axios底层源码
let axios = {
get(){
const p = new Promise((resolve,reject) => {
//以后可以再这里使用ajax发送异步请求
const num = Math.random();
if(num<0.5){
resolve("成功!num:"+num);
}else{
reject("失败!num:" + num);
}
});
return p;
}
}
//调用axios对象发送异步请求：Promise对象中有then和catch方法
axios.get().then(function(msg){
console.log(msg);
}).catch(function(msg){
console.log(msg);
});
三. VUE入门
概念：Vue是一前端渐进式JS框架（就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用）
特点：
轻量：Vue.js库的体积非常小的，并且不依赖其他基础库
数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便
指令：内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM
插件化：Vue.js核心不包含Router、axios【Promise - ajax】、表单验证等功能，但是可以非常方便地根据需要加载对应插件
组件化，他支持自定义标签：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
- MVVM思想
概念：Vue是一款开源的JavaScript MVVM框架，数据模型和视图的双向绑定，只要数据变化，视图会跟着变化，只要视图被修改，数据也会跟着变化（依赖于v-model指令进行绑定）
特征：
- M ：即Model，模型，包括数据和一些基本操作【js代码】
- V ：即View，视图，页面渲染结果【页面】
- VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
注意：1. 只要我们Model发生了改变，View上自然就会表现出来 2. 当用户修改了View，Model中的数据也会跟着改变。
- Vue安装
- npm init -y 初始化
- npm i [email protected]
- Vue实例对象详情
3.1. 挂载属性el
概念：每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载（注意：实例上的属性和方法只能够在当前实例挂载的标签中使用。）
<div id="app">
<h1>{{message}}</h1>
</div>
<div class="vueClz">
<h1>{{message}}</h1>
</div>
/*
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"
*/
//id挂载方式：
var app = new Vue({
el : "#app",
data : {
message : "我是id挂载方式"
}
});
//class挂载方式：
var app2 = new Vue({
el : ".vueClz",
data : {
message : "我是class挂载方式"
}
});
3.2. 模型数据data
概念：Vue实例的数据保存在配置属性data中, data自身也是一个对象。
<div id="app">
<h1>{{ message }}</h1>
<h1>
{{user.name}},今年才:{{user.age}}岁.{{user.color}} <font color="pink">是一个很美丽的颜色</font></br>
</h1>
</div>
<script>
//vue的数据绑定在data属性上，data本身也是一个对象
var app = new Vue({
el: "#app",
data: {
message: "我是一个很单纯的p",
user: {
name: "隔壁老王",
age: 17,
color: "pink"
}
}
});
</script>
3.3. 方法定义methods
概念：Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体**（方法都是被Vue对象调用,所以方法中的this代表Vue对象）** 注意：使用json格式来写的
调用方式：
直接在html模板标签中调用 {{方法名字()}}
例：{{swim( )}}
通过Vue对象实例调用方法 vue对象.方法名字( );
例：app.swim(); // app就是上方div 声明的id
- 生命周期钩子函数
概念：每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等，其中每个状态都设置了钩子函数（监听函数）
钩子函数有8个（目前只了解一个mounted）：
mounted函数:页面加载完成之后会自动调用此方法
注意事项：
- 用普通函数【常规写法或简写写法】，this是指向vue实例
- 用箭头函数，this指向window对象
四. VUE表达式
- 表达式语法
VueJS表达式写在双大括号内：{{ expression }}
VueJS表达式把数据绑定到 HTML
VueJS将在表达式书写的位置"输出"数据
VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量
- 简单表达式
在{{ }}中可以进行简单的运算：
<div id="app">
<!--简单表达式 -->
<h1>{{num1+num2}}</h1>
<!-- +:运算，字符串连接 --> 因为是+号，它分辨不出来你是计算还是拼接，就默认拼接
<h1>{{5+"v5"}}</h1>
<h1>{{5+"5"}}</h1>
<!-- -：减法 -->
<h1>{{"5"-"5"}}</h1>
<h1>{{5*5}}</h1>
<!-- *:乘 -->
<h1>{{"5"*"5"}}</h1>
<!-- / 除-->
<h1>{{5/5}}</h1>
<h1>{{5/5}}</h1>
</div>
- 三目运算符
<div id="app">
<!-- 三目运算 -->
{{ show1?"真":"假"}}
</div>
<script>
var app = new Vue({
el : "#app",
data : {
show1 : true
}
});
</script>
- 字符串操作
<div id="app">
{{"这是字面值"}}<br/>
{{"这是字面值".length}}<br/>
{{message.length}}<br/>
{{message.substring(1,5)}}<br/>
{{message.substring(2,6).toUpperCase()}}<br/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "这是data中的数据"
}
});
</script>
- 对象操作
<div id="app">
{{user}}<br/>
{{JSON.stringify(user)}}<br/>
{{user.toUserString()}}<br/>
{{user.name}}<br/>
{{user.age}}<br/>
{{user.getAge()}}<br/>
</div>
<script>
var user = {
name: "张三",
age: 29,
getAge: function () {
return this.age
},
toUserString:function(){
return "姓名:" + this.name + ",年龄:" + this.age;
}
};
var app = new Vue({
el: "#app",
data: {
user: user
}
});
</script>
- 数组操作
<div id="app">
{{hobbys}}<br/>
{{hobbys[0]}}<br/>
{{hobbys.length}}<br/>
{{hobbys.toString()}}<br/>
{{hobbys.join("------")}}<br/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
}
});
</script>
五. VUE指令
- 什么是指令
概念：指令是一个带有v-前缀的特殊标签属性，指令属性的值预期是单个JavaScript表达式。
当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM
一个标签元素上可以出现多个指令属性
指令只能够出现在Vue对象所挂载的标签范围内的标签中
- 常见的指令
v-text=“表达式”：设置标签中的纯文本，主要是指双标签。与vue表达式效果一样{{ }}
// 语法： <标签名 v-text="表达式"></标签名> // 作用： 通过data中的数据更新标签标签中的textContent属性的值（标签中的文本内容） <div id="app"> <span v-text="message"></span><br/> <span v-text="user.username"></span><br/> </div> var app = new Vue({ el: "#app", data: { message: "这是一个Span!
", user: { username: "lw" }, } }); // 注意事项： 如果值是html的值，会作为普通的文本使用。标签中的属性值必须是data中的一个属性v-html=“表达式”：设置标签中的html文本，主要是指双标签
// 语法 <标签名 v-html="表达式"></标签名> // 作用 通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容) <div id="app"> <div v-html="message"></div> </div> var app = new Vue({ el: "#app", data: { message: "这是HTMl代码
" } }); // 注意事项: 1. 如果值是html的值,不会作为普通的文本使用,要识别html标签。 2. {{表达式}} 可以插入的标签的内容中 3. v-text和v-html更改标签中的所有内容v-bind=“表达式：绑定属性值 - 简写:src=”"
// 将data中的数据绑定到标签上,作为标签的属性,为一个标签属性绑定一个值 // 语法: <标签 v-bind:标签属性名字="表达式"></标签> // 简写形式: <标签 :标签属性名字="表达式"></标签> 为一个标签绑定一个对象作为该标签的多个属性 <标签 v-bind="对象"></标签> <div id="app"> <img v-bind:src="imgsrc" v-bind:title = "title"/> <img :src="imgsrc" :title = "title"/> <input v-bind="props"/> </div> var app = new Vue({ el: "#app", data: { imgsrc: "./img/1.jpg", title: "二哈!", props :{ type: "text", name: "username", } } }); // 注意事项 将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字v-show=“”：是否显示
// 语法: <标签名 v-show="表达式"></标签名> // 作用: 根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。 当v-show的值为假时, 会在标签的css中添加 display: none : <div id="app"> <div v-show="show">你看到我了!</div> <div v-show="hidden">你看不到我了!</div> <div v-show="score>=90">优秀</div> </div> var app = new Vue({ el: "#app", data: { "show":true, "hidden":true, "score":90, } }); // 注意事项: - 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除 - 标签的值会自动转换为boolean类型的值v-on=“表达式”：注册事件 - 简写@click=“”
v-if(else else if)=“表达式”：条件判断// 语法: <标签 v-on:事件句柄="表达式或者事件处理函数"></标签> // 简写方式： <标签 @事件句柄="表达式或者事件处理函数"></标签> // 例1 <div id="app"> <h1>结果</h1> {{num}} <h1>表达式的写法</h1> <button οnclick=。。。。>按钮</button><br/> <h1>事件处理函数</h1> <button v-on:click="myclick">按钮</button><br/> <button @click="myclick">按钮</button><br/> </div> var app = new Vue({ el: "#app", data: { num:0 }, methods:{ myclick:function(){ app.num++; console.log(this); } } }); // 例2 <div id="app"> <button v-on:click="say('hello')">hello</button><br/> <button @click="say('hi')">hi</button><br/> </div> var app = new Vue({ el: "#app", data: { }, methods:{ say:function(message){ //this指向当前vue对象：app console.log(message); //this当前vue对象 console.log(this); //获取事件源 // 获取触发事件 event // 通过事件获取事件源 console.log(event.target); } } }); // 注意事项： 事件处理函数作为事件句柄的值不需要调用v-if ( else else if )=“表达式”：条件判断
// 语法: <标签名 v-if="表达式"></标签名> // 作用: 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 // 注意事项: 当表达式中的值是false时, 是从页面上删除. 标签的值会自动转换为boolean类型的值 <div id="app"> <div v-if="show">你看到我了!</div> <div v-if="hidden">你看不到我了!</div> <div v-if="score>=90">优秀</div> </div> var app = new Vue({ el: "#app", data: { "show":true, "hidden":true, "score":90, } });v-for=“表达式”：循环
// 语法: <标签 v-for="元素 in 数据源"></标签> 数据源: 数组, 元素: 数组中的一个元素 数据源: 对象 元素: 对象中的一个属性名 <标签 v-for="(元素,索引|键) in 数据源"></标签> 当数据源是数组时, ()的第二个参数值索引 当数据源是对象时, ()的第二个参数值键 <标签 v-for="(元素,键,索引) in 对象"></标签> // 作用: 基于数据源多次循环达到多次渲染当前元素 <div id="app"> <h1>循环数组</h1> <ul> <li v-for="hobby in hobbys">{{hobby}}</li> </ul> <h1>遍历对象</h1> <ul> <li v-for="value in student">{{value}}</li> </ul> <h1>带索引循环数组</h1> <ul> <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li> </ul> <h1>带键遍历对象</h1> <ul> <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li> </ul> </div> var app = new Vue({ el: "#app", data: { hobbys : ["爬山","游泳","打豆豆","睡觉"], student : { name: "小毛", age: 29, sex: "男", }, num : 10, str : "itsource", } });v-model=“表达式”：数据双向绑定
// 语法: <标签 v-model="表达式"></标签> 在表单控件上创建双向绑定，表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定 // v-model只作用于以下表单: // input，select，textarea <div id="app"> <input type="text" v-model="msg"/> {{msg}} <hr/> <input value="lq" type="checkbox" v-model="hobbys"/>篮球 <input value="zq" type="checkbox" v-model="hobbys"/>足球 <input value="ymq" type="checkbox" v-model="hobbys"/>羽毛球 <input value="blq" type="checkbox" v-model="hobbys"/>保龄球 {{hobbys}} <hr/> <input value="1" type="radio" v-model="sex"/>男 <input value="0" type="radio" v-model="sex"/>女 {{sex}} <hr/> <select v-model="country"> <option value="zh">中国</option> <option value="usa">美国</option> <option value="jp">日本</option> </select> {{country}} </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ msg:"", hobbys:["lq","zq"], sex:1, country:"zh" } }); </script> // 注意事项： - 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定. - 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
六. 计算属性和侦听器
- 计算属性computed
原方案：
data:{
birthday:1529032123201 // 毫秒值 表达式的内容很长，显得不够优雅，后期维护不方便
}
<h1>您的生日是：{{
new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
}}
</h1>
新方案：Vue中提供了计算属性，来替代复杂的表达式：
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 计算属性本质是一个方法，但是必须返回结果 ----->
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
// 页面渲染时，可以把这个方法当成一个变量来使用 就是上面返回的对象 ----->
<div id="app">
<h1>您的生日是：{{birth}} </h1>
</div>
- 侦听器watch
概念：watch可以让我们监控一个值的变化。从而做出相应的反应。
<div id="app">
<input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
</script>
总结：
1. 前端发展历史：htmlcss - js - jsp/asp/php - ajax - jQuery - h5[单页面] - nodejs/npm
2. ES6新语法:
声明变量：let和var，const
解构表达式：对数组解构[]，对对象解构{}
箭头函数：在对象定义函数可以使用箭头函数：()=>{}
发送异步请求：axios - Promise - ajax
3. Vue概述：前端js渐进式【js本身比较下，你需要什么插件直接安装】框架
vue特点：1.轻量，体积比较20kb 2.vue指令 3.提供了很多插件，安装即用 4.组件-自定义标签
4. Vue入门：1.安装 2.引入 3.div用于挂载 4.newVue实例 5.再使用
注意事项：
Vue实例属性：el，data，methods，mounted，computed，watch
5. Vue表达式：{{}} ：计算，运算符，字符串操作，数组操作，对象操作
6. Vue指令
v-text: 操作存文本 - {{}}
v-html: 操作html文本
v-bind: 绑定属性值，简写：
v-show: 控制元素是否显示
v-on: 绑定事件，简写@
v-if: 判断
v-for: 遍历
v-model: 双向绑定 - 绑定value属性值
MVVM模式：Model-模型数据vue实例中的数据【data,methods】,view视图页面，View-Model做双向绑定的