1.vue-1
1.es5和es6比较
es6的基本语法
var:声明变量不严谨 --- es5
let：声明变量严谨 --- es6
let特点：
1.变量局部作用域有作用:if(){let a=11},大括号外拿不到a的值
2.不存在变量提升(先声明在使用)
3.不能重复声明
4 let声明的全局变量不从属于window对象，var声明的全局变量从属于window对象。
关于第4个特点的简单说明：
ES5声明变量只有两种方式：var和function。
ES6有let、const、import、class再加上ES5的var、function共有六种声明变量的方式。
还需要了解顶层对象：浏览器环境中顶层对象是window.
ES5中，顶层对象的属性等价于全局变量。var a = 10; window.a
ES6中，有所改变：var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说ES6开始，全局变量和顶层对象的属性开始分离、脱钩，目的是以防声明的全局变量将window对象的属性造成污染，因为window对象是顶层对象，它里面的属性是各个js程序中都可以使用的，不利于模块化开发，并且window对象有很多的自有属性，也为了防止对window的自由属性的污染，所以在ES6中将顶层对象和全局变量进行隔离。
举例：
var a = 1;
console.info(window.a); // 1
let b = 2;
console.info(window.b); //undefined
模板字符串：tab键上面的反引号，${变量名}来插入值
let bb = 'jj';
var ss = `你好${bb}`;
console.log(ss); -- '你好jj'
const pi = 3.1415926; 声明常量： 特点和let一样，只不过const声明的量，是不可改变的量
const ：特点： 1.局部作用域 2.不存在变量提升 3.不能重复声明 4.一般声明不可变的量
es5和es6的函数对比
//ES5写法
function add(x){
return x
}
add(5);
//匿名函数
var add = function (x) {
return x
};
add(5);
//ES6的匿名函数
let add = function (x) {
return x
};
add(5);
//ES6的箭头函数,就是上面方法的简写形式
let add = (x) => {
return x
};
console.log(add(20));
//更简单的写法，但不是很易阅读
let add = x => x;
console.log(add(5));
多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个()
let add = (x,y) => x+y;
自定义对象中封装函数的写法
this的指向问题
箭头函数改变this指向 -- 指向自定义函数父级对象
// 1.es5 对象中封装函数的方法
var name = '子俊';
var person1 = {
name:'超',
age:18,
f1:function () { //在自定义的对象中放函数的方法
console.log(this);//this指向的是当前的对象person1,{name: "超", age: 18, f1: ƒ}
console.log(this.name) // '超'
}
};
person1.f1(); //调用函数
// 2. ES6中自定义对象中来封装箭头函数,this指向person2父级对象
var name = '子俊';
var person2 = {
name:'超',
age:18,
f1: () => {
console.log(this); //this指向的不再是当前的对象了，而是指向了person2的父级对象(称为上下文)，而此时的父级对象是我们的window对象，
console.log(window); //还记得window对象吗，全局浏览器对象，打印结果和上面一样
console.log(this.name) // 子俊
}
};
person2.f1(); //调用函数
// 3. ES6中自定义对象中来封装箭头函数,this指向person3父级对象
let name = '子俊';
let person3 = {
name:'超',
age:18,
f1: () => {
console.log(this); //this指向person3的父级对象，而此时的父级对象是我们的window对象，
console.log(window); //还记得window对象吗，全局浏览器对象，打印结果和上面一样
console.log(this.name) // undefind,let声明的变量不属于Windows对象
}
};
person3.f1(); //调用函数
// 3.而我们使用this的时候，希望this是person对象，而不是window对象，单体模式写:
let person4 = {
name:'超',
age:18,
//f1:function(){}简写;
f1(){ //相当于f1:function(){},只是一种简写方式,称为对象的单体模式写法,vue里面会看用到这种方法
console.log(this);//this指向的是当前的对象person4,{name: "超", age: 18, f1: ƒ}
console.log(this.name) //'超'
}
};
person4.f1()
es5和es6的类写法对比（了解）
<script>
// 1. es5写类的方式
function Person(name,age) {
//封装属性,不能在里边声明方法
this.name = name; //this--Python的self
this.age = age;
}
//封装方法，原型链prototype
Person.prototype.f1 = function () {
console.log(this.name);//this指的是Person对象, 结果：'超'
};
//封装方法，箭头函数的形式写匿名函数
Person.prototype.f2 = ()=>{
console.log(this); //this指向的是window对象
};
var p1 = new Person('超',18); // 使用new实例化类
p1.age
p1.f1();
// 2 .es6里面的类怎么写
class Person2{
constructor(name,age){ //对象里面的单体模式，这个方法类似于python的__init__()构造方法，写参数的时候也可以写关键字参数 constructor(name='超2',age=18)
//封装属性
this.name = name;
this.age = age;
} //注意这里不能写逗号
showname(){ //封装方法
console.log(this.name);
} //不能写逗号
}
let p2 = new Person2('超2',18); // 实例化对象
p2.showname() //调用方法 '超2'
//es6的类也是可以继承的--用的extends和super
</script>
2. vue.js的快速入门使用
1.1 vue.js库的下载
vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。
另外几个常见的工具库：react.js /angular.js
官方网站：
根据提示:下载开发版本vue.js
1.2 vue.js库的基本使用
vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成生产版本vue.min.js。
1.vue中的变量可以直接进行一些简单直接的js操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{num+3}}</h1> <!--支持四则运算-->
<h1>{{num>10?'真的':'假的'}}</h1> <!--支持三元运算-->
<h1>{{msg.split('').reverse().join('')}}</h1> <!--文字反转,可以使用js方法和属性-->
<h1>{{person.name}}</h1> <!--通过据点号取字典里的值-->
</div>
</body>
<script src="vue.js"></script> <!--引入vue-->
<script>
let vm = new Vue({
el:'#app', // 圈地,划分vue控制范围,标签内部可以使用vue语法,外部用不了
//数据属性写法 方式1 (了解)
// data:{
// msg:'hello world!',
// },
//数据属性写法 方式2 单体函数模式 -- 常用
data(){
return {
msg:'hello world!',
num:11,
person:{name:'呵呵',age:11},
}
},
})
</script>
</html>
2.总结：
1. vue的使用要从创建Vue对象开始
var vm = new Vue();
2. 创建vue对象的时候，需要传递参数，是自定义对象，自定义对象对象必须至少有两个属性成员
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
});
el:圈地，划地盘，设置vue可以操作的html内容范围，值就是css的id选择器,其他选择器也可以，但是多用id选择器。
data: 保存vue.js中要显示到html页面的数据。
3. vue.js要控制器的内容外围，必须先通过id来设置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
1.3 vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
Model 指代的就是vue对象的data属性里面的数据。
View 指代的就是vue中数据要显示的HTML标签中，在vue中，也称之为“视图模板” 。
ViewModel 数据驱动视图
在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据
console.log(vm.$el) # #box vm对象可以控制的范围
console.log(vm.$data); # vm对象要显示到页面中的数据
console.log(vm.message);# 这个message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据
2. Vue指令系统的常用指令
指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。在标签中使用
在vue中，提供了很多指令，常用的有：v-html、v-if、v-model、v-for等等。
2.1 文本指令v-html和v-text
v-text -- 相当于js代码的innerText，直接在html中插值了，插的就是文本内容
v-html -- 相当于innerHtml,可以识别标签
数据发生变化时，会同时改变元素中的其控制的内容或属性
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 v-text="msg"></h1> <!--v-text只能识别文本-->
<h1 v-html="atag"></h1><!--v-html可以识别标签-->
</div>
</body>
<script src="vue.js"></script>
<script>
let vm =new Vue({
el:'#app',
data(){
return{
msg:'hello',
atag:'<a href="">百度</a>'
}
},
})
</script>
2.2 条件渲染指令v-if和v-show
v-if : 只有条件为真,才能生成标签
是动态的增加和删除标签,整个文档节点都会重新加载一遍,当我们频繁进行标签的显示和隐藏时,可以使用v-show
v-show: 不管显示隐藏,初始加载时都会生成标签
真-显示和假-隐藏标签,使用的是css样式display:none来隐藏的
<body>
<div id="app">
<h1 v-if="num>10">num大于10</h1>
<h1 v-else-if="num<10">num小于10</h1>
<h1 v-else>num等于10</h1>
<h1 v-show="num>10" style="color: red">呵呵呵</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm =new Vue({
el:'#app',
data(){
return{
num:10,
}
},
})
</script>
2.3 操作-绑定标签属性v-bind
格式：
<标签名 :标签属性="data属性"></标签名>
<body>
<div id="app">
<a v-bind:href="addr">百度1</a> <!--绑定标签属性,使用data数据属性-->
<a :href="addr">百度2</a> <!--简写-->
</div>
</body>
<script src="vue.js"></script>
<script>
let vm =new Vue({
el:'#app',
data(){
return{
addr:'http://www.baidu.com'
}
},
})
</script>
2.4 事件绑定v-on和methods属性
有两种事件操作的写法，@事件名 和 v-on:事件名 --绑定的全部都是js的事件名
例1:完成商城的商品增加减少数量
<body>
<div id="app">
<button v-on:click="num++">+1</button>
<!--<button @click="num++">+1</button>-->
<p>{{num}}</p>
<button @click="janfa">-1</button>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm =new Vue({
el:'#app',
data(){
return{
num:10,
}
},
methods:{
janfa(){
if (this.num<=0){ //this指向vue对象
this.num=0
}
else {
this.num--;
}
},
},
})
</script>
例2:wifi密码切换显示
<body>
<div id="app">
<input :type="type">
<button @click="change">{{btn_text}}</button>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm =new Vue({
el:'#app',
data(){
return{
btn_text:'显示密码',
type:'password',
}
},
methods:{
change(){
if(this.type == 'password'){
this.btn_text = '隐藏密码';
this.type = 'text';
}else {
this.btn_text = '显示密码';
this.type = 'password';
}
},
},
})
</script>
</html>
2.5 操作样式
2.5.1 控制标签class类名
格式：
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组（数组的方式用的比较少）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
width: 100px;
height: 100px;
}
.c2{
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div :class="xx"></div>
<div :class="c1:status"></div> <!--真,加c1样式-->
<div :class="c1:num>10"></div> <!--真,加c1样式-->
<div :class="status?'c1':'c2'"></div> <!--三元运算真,加c1样式-->
</div>
</body>
<script src="vue.js"></script>
<script>
let vm =new Vue({
el:'#app',
data(){
return{
status:true,
num:11,
xx:'c1'
}
},
})
</script>
</html>
2.5.2 控制标签style样式
格式1：值是json对象，对象写在元素的:style属性中
标签元素：
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 注意：不能出现中横杠，有的话就套上引号'font-size'，或者去掉横杠，后一个单词的首字母大写，比如fontSize -->
data数据如下：
data: {
activeColor: 'red',
fontSize: '30px'
}
格式2：值是对象变量名，对象在data中进行声明
标签元素：
<div v-bind:style="styleObject"></div>
data数据如下：
data: {
return{
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
2.5.3 实例-vue版本选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block; /* 内联-块状标签 */
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none; /* 隐藏 */
}
.content .active{
display: block; /* 变成块状标签 */
}
.title .current{
background-color: yellow;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span :class="{current:num===0}" @click="num=0">国内新闻</span>
<span :class="{current:num===1}" @click="num=1">国际新闻</span>
<span :class="{current:num===2}" @click="num=2">银河新闻</span>
<!--<span>{{num}}</span>-->
</div>
<div class="content">
<div class="list" :class="{active:num===0}">国内新闻列表</div>
<div class="list" :class="{active:num===1}">国际新闻列表</div>
<div class="list" :class="{active:num===2}">银河新闻列表</div>
</div>
</div>
<script>
// 思路：
// 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
// 代码实现：
var card = new Vue({
el:"#card",
data(){
return{
num:0,
}
},
});
</script>
</body>
</html>
2.6 列表渲染指令v-for
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者字典。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,index) in list" :key="value">{{value}}--{{index}}</li>
<!--通过:key指定生成的标签,刷新网页不会再重复创建了,提高了页面渲染效率-->
<!--重点:不通过:key绑定标签,频繁的调整标签顺序会导致数据混乱-->
</ul>
<ul>
<li v-for="(value,index) in dict" :key="value">{{value}}--{{index}}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return{
list:['11','22','33','44'],
dict:{
'name':'贾英贺',
'age':18,
'sex':'男'
},
}
},
})
</script>
</html>
练习：
goods:[
{"name":"python入门","price":150},
{"name":"python进阶","price":100},
{"name":"python高级","price":75},
{"name":"python研究","price":60},
{"name":"python放弃","price":110},
]
# 把上面的数据采用table表格输出到页面，价格大于60的那一条数据需要添加背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<th>名字</th>
<th>价格</th>
</thead>
<tbody>
<tr v-for="(goods_value,goods_index) in goods" :key="goods_index" :class="{c1:goods_value.price>60}">
<td>{{goods_value.name}}</td>
<td>{{goods_value.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return{
goods:[
{"name":"python入门","price":150},
{"name":"python进阶","price":100},
{"name":"python高级","price":75},
{"name":"python研究","price":60},
{"name":"python放弃","price":110},
]
}
},
})
</script>
</html>
2.7 双向数据绑定v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{num}}</h1>
<input type="text" v-model="num"> <!--数据发生变化,h1标签也发生变化-->
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
num:10,
}
},
})
</script>
</html>
3. Vue对象提供的属性功能
3.1 过滤器
过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。
定义过滤器的方式有两种,全局过滤器和局部过滤器
3.1.1 使用Vue.filter()进行全局定义
Vue.filter("RMB1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v
}
return v+"元"
})
3.1.2 在vue对象中通过filters属性来定义
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
示例：
<body>
<div id="app">
<h1>{{num|rmb}}</h1> <!--全局过滤器使用-->
<h1>{{num|yuan('xx','oo')|fang}}</h1> <!--传递参数,多层过滤器使用-->
</div>
</body>
<script src="vue.js"></script>
<script>
// 全局过滤器,所有的vue对象都可以使用
Vue.filter('rmb',function (res){
return res + '你好'
})
let vm = new Vue({
el:'#app',
data(){
return {
num:100
}
},
// 局部过滤器
filters:{
yuan(res,m,n){ //定义过滤器
return res + '元' + m + n
},
fang(res){
return res + '方'
}
}
})
</script>
3.2 计算和侦听属性
3.2.1 计算属性computed
我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。其实计算属性主要用于监听，可以监听多个对象，后面学了监听之后再说。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{xx}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return{
num1:10,
num2:20,
}
},
computed:{
xx:function () {
let sum = this.num1 + this.num2
return sum.toFixed(2) //保留两位小数
}
},
})
</script>
</html>
3.2.2 监听属性watch
watch侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化后的数据值，第二个是变化前的数据值。
示例:用户名长度限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form action="" method="post">
账号:<input type="text" v-model="username"><span :style="user_style">{{user_text}}</span>
</form>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return{
username:'',
user_style: {
color:''
},
user_text:'',
}
},
watch:{
'username'(res){
if(res.length>=4 && res.length<=10){
this.user_style.color = 'blue'
this.user_text = '用户名长度合法！'
}else {
this.user_style.color = 'red'
this.user_text = '用户名长度只能是4-10位！'
}
}
},
})
</script>
</html>
3.3 vue对象的生命周期钩子函数
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{num}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
num:10,
}
},
// 1.在还没有加载vue时,自动触发函数 --可用页面加载动画
beforeCreate:function () {
console.log(this.$el) //undefined
console.log(this.$data) //undefined
},
// 2.在vue对象加载上数据属性之后,自动触发函数
// 发送网络请求(ajax),向后台请求数据,然后赋值给某个属性进行处理
created:function () {
console.log(this.$el) //undefined
console.log(this.$data) // num:10
},
// 3.在vue加载视图之后,自动触发
beforeMount:function () {
console.log(this.$el) //<h1>{{num}}</h1>
console.log(this.$data) // num:10
},
// 4.在数据驱动视图之后,自动触发
mounted:function (){
console.log(this.$el) //<h1>10</h1>
console.log(this.$data) // num:10
},
// 主要是2,4 -- 其他了解
})
</script>
</html>
3.4 阻止事件冒泡和刷新页面
使用.stop和.prevent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
.c2{
background-color: blue;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="c1" @click="f1">
<!-- <div class="c2" @click.stop="f2"></div> 阻止事件冒泡,否则点击跳出2次警告页面-->
<div class="c2" @click.stop.prevent="f2"></div>
</div>
<a href="http://www.baidu.com" @click.stop.prevent="">百度</a>
<!--阻止标签自带属性,点击不跳转网页了-->
</div>
</body>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
}
},
methods:{
f1(){
alert(11)
},
f2(){
alert(22)
}
}
})
</script>
</html>
