1.ES6常用语法
1.1什么是ES6
ECMAScript 6 简称ES6, 在2015年6月正式发布~ ECMAScript 是JavaScript语言的国际标准。
参考文献：http://es6.ruanyifeng.com/1.2var,let,constant
说明，在js中，一个{}就属于一个作用域。1.2.1var
使用var声明变量，存在两种现象
1.因为变量提升，导致var声明的变量属于全局作用域。
2.var声明的变量存在覆盖现象
Title
1.2.2let
let声明变量
1.属于局部作用域
2.没有覆盖现象
Title
1.2.3const
1.const声明的是常量,一旦声明 不可修改
2.const声明的常量属于局部作用域
Title
1.3模板字符串
tab键上面的反引号
如果说你要拼接一串字符串,那么不需要咱们直接的+去拼接,使用反引号来拼接,拼接的变量使用${变量名}
函数的书写
1.4箭头函数
function(){} ==== ()=>{}
箭头函数的使用带来的问题:
1.使用箭头函数 this的指向发生了改变
2.使用箭头函数 arguments不能使用
1.5对象的单体模式
fav(){
}
等价于:
function fav(){
}
等价于
var fav = function(){
}
1.6类的使用
#es6中创建对象的方式 使用class
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
alert(this.name)
}
};
var p2 = new Person('张三',20);
p2.showName();
2.vue
2.1vue的介绍
渐进式的JavaScript框架
vue react angualr
作者:尤雨溪 facebook 谷歌公司
官方文档：https://cn.vuejs.org/2.2前端框架和库的区别
功能上的不同:
jquery库：包含DOM(操作DOM)+请求，就是一块功能。
art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板 跟python的模板类似)
框架：大而全的概念，简易的DOM体验+请求处理+模板引擎
在KFC的世界里，库就是一个小套餐，框架就是全家桶。
代码上的不同:
一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的代码。
一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。
框架的使用:
一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的代码。
一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。
2.3nodejs
1. 去官网https://nodejs.org/en/download/ 下载 安装(傻瓜式安装)
2. 打开终端 cmd : 执行`node -v` 如果出现版本号，证明安装node成功 ，跟安装python雷同
3. 下载完node之后，会自带包管理器 npm，好比 是python中 pip3包管理器。pip3 install xxx
4. 使用npm
1.要初始化npm的项目 :
npm init --yes 自动生成一个package.json文件
{
"name": "vue_lesson",
"version": "1.0.0",
"description": "这是我的vue的第一个项目",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mjj",
"license": "ISC",
"dependencies": {
"vue": "^2.5.16"
}
}
2.npm install vue --save
npm install jquery --save
3.下载包 npm uninstall vue --save
4.下载所有的依赖包 npm install
2.4vue的起步-引用和双大括号
- 引包:
- 创建实例化对象
new Vue({
el:'#app',//目的地
data:{
msg:"hello Vue"
}
});
/*
{{}}: 模板语法插值
{{变量}}
{{1+1}}
{{'hello'}}
{{函数的调用}}
{{1==1?'真的':'假的'}}
*/
{{ msg }}
{{ msg+ 'hello'}}
{{1< 1 ? '真的':'假的'}}
{{'hello'}}
{{'hello world'.split('').reverse().join('')}}
{{ {name:'role'} }}
2.5指定系统v-text,v-html
v-text 等价于 {{}} 实现原理:innerText
v-html 实现原理: innerHTML
2.6v-if和v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
2.7v-for
//保存数组或者对象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是数组中每项元素
-
{{index}}--菜名:{{item.name}}
价格{{item.price}}
-
{{key}}--{{value}}
2.8v-bind
![]()
使用v-bind:class = '{}||[]||变量名||常量' 对我们的页面中标签的属性进行绑定 所有的属性都可以进行绑定,
注意只要使用了v-bind 后面的字符串一定是数据属性中的值
2.9v-on事件绑定
// 1.事件源 2.事件 3.事件驱动程序
vue中使用v-on:click对当前DOM绑定click事件 注意:所有的原生js的事件使用v-on都可以绑定
v-if和v-on 来对页面中DOM进行操作
v-bind:class和v-on对页面中DOM的样式切换
v-bind和v-on
在vue中它可以简写: v-bind:
:class 等价于 v-bind:class
:src 等价于v-bind:src
:id 等价于v-bind:id
v-on:click 等价于 @click = '方法名'
{{msg}}
2.10轮播图
![]()
-
{{ index +1 }}
2.11v-model
https://cn.vuejs.org/v2/guide/forms.html
你可以用 v-model 指令在表单 、