html 超文本标记语言(HyperText Mark-up Language)
html元素：块元素标签（行元素）和内联元素标签（行内元素）
块元素独占一行，块元素之后需要换行；
例如：标题标签，段落标签，通用块容器标签。
内联元素可以排列在一行，设置宽高无效，快高由内容撑开（特殊除外）。
例如：超链接标签，图片标签（支持宽高）
html注释： css注释：/* */ js注释：//
css引入方式：内联式（行内样式）、嵌入式（头标签中）、外链式
css选择器：标签选择器、类选择器、id选择器、伪类选择器、层级选择器（可理解为选择器嵌套，例（.con li{}））
css属性：
布局常用
width：宽 height：高 background：背景颜色 border：边框
border-left：左边框。。。 margin：外边距（margin-left等）
float：浮动（左（float:left）、右浮动）
文本属性
color：颜色 font-size：大小 font-family：字体 font-weight：设置文字加粗（bold），不加粗（normal）
line-height：行高 text-decoration：下划线（none无）
路径
绝对路径：相对于磁盘的位置去定位文件的地址
相对路径：相对于引用文件本身去定位被引用的文件地址
./表示当前路径下，../表示上一级路径
表单
form：表单标签 action：数据提交地址 method：提交方式（post、get）
<label> 表单定义文字标注 <input> 定义通用表单元素
type属性：text：文本行 placeholder：文本行默认提示文字 password：密码框 radio：单选框
checkbox：复选框 file：上传文件 submit：提交 reset：重置 button：普通按钮
value：定义表单元素的值 name：定义表单元素的名称，此名称是提交数据时的键名
<textarea>：文本域 <select>:下拉框，与<option>（选项）连用
表格
表格：<table>：表格标签 <tr>行标签 <td>：单元格 colspan：水平合并单元格 rowspan：垂直合并单元格
border-collapse：表格边线合并（collapse）
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。
定义变量需要用关键字 ‘var’：var iNum = 10;
变量类型：number：数字 string：字符串 boolean：布尔true或false
undefined：undefined类型，变量声明未初始化(未定义)，它的值就是undefined
null：null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
变量，函数，属性命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
且遵守匈牙利命名风格
o：Object（对象）；a:Array（数组）; s:String;
i:Integer（整形）;b:boolean（布尔）; f:float;fn:function（函数）;
定义一个新变量在其名字前加类型缩。
比如iNun : 10;（数字，首字母缩写为i）
函数：跟python中类似，可传参（不传参），可匿名，可有返回值（return，结束函数）
封闭函数：是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
作用：可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全
条件语句
条件运算符：(数字可等于对应的字符串)、=(值相等)、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if 、else:
if …
else if …
else…
获取元素的方法：使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量; 例如：
<script>
var oDiv = document.getElementById('div1(类选择器)');
</script>
......
<div id = 'div1'>这是要获取的元素</div>
由于代码自上而下运行，执行oDiv时还没加载div1，解决办法有两个：
1.将代码写到div下面
2.将js语句放到window.onload（延迟加载，先加载别的地方，最后加载此处）触发的函数里
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
操作元素属性：获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
var 变量 = 元素.属性名 （读取属性
元素.属性名 = 新属性值 （改写属性
innerHTML：读取或者写入标签包裹的内容
属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
事件属性及 匿名函数
事件属性
鼠标点击事件属性(onclick)
鼠标移入事件属性(mouseover)
鼠标移出事件属性(mouseout)
将函数名称赋值给元素事件属性，可以将事件和函数关联起来
数组及操作方法
定义数组的方法：
方法一：var aList(名称) = new Array(1,2,3);
方法二：var aList(名称) = [1,2,3,'asd'];
数组操作方法：
获取长度：aList.length
下标：aList[0] 第一个数
join()将数组拼接为字符串
push()：从数组最后增加成员
pop()：从数组最后删除称成员
reverse()：将数组反转
indexOf()：返回数组中元素第一次出现的索引值（下标）
splice()：在数组中增加或删成员
例如：
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //（从第二个元素开始，删除1个元素，然后在此增加7,8,9三个元素）
aList.splice(2,1); // （从第二个开始，删除一个元素）
aList.splice(2,0,7,8,9); //（从第二个开始，删除0个元素，在此添加7,8,9三个元素）
多维数组：指数组的成员也是数组（嵌套数组）
例如：var aList = [[1,2,3],['a','b']]
数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++){
if(aList.indexOf(aList[i])==i){
aList2.push(aList[i]);
}
};
alert(aList2);
字符串处理方法
+（与pyhton类似） parselnt() 将字符串转化成整数
parseFloat()将数字字符串转化为小数 split()把字符串分割成数组
indexOf()查找字符串是否含有某字符（若有重复，则只找第一个下标）
substring()截取字符串,substring(1,3)截取下标从1开始到3的字符串，不包括3；
substring(1)截取从第1个开始到最后
字符串反转：str.split('').reverse().join('');
定时器
setTimeout(只执行一次的定时器),setInterval(反复执行的定时器)
clearTimeout(关闭执行一次的定时器),clearInterval(关闭重复执行的定时器)
变量作用域
全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
Vue:前端三大框架(Angular.js,React.js,Vue.js)之一
Vue.js可以作为一个js库来使用
Vue的核心库只关注视图层
Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面系统
el:挂载标签
data:存放定义的变量
methods:存放定义的函数
computed:存放计算属性（计算属性和方法的区别是计算属性依赖于缓存，除非缓存对象发生改变，否则不会重新加载，而方法在每次页面渲染时都会重新调用）
watch:存放的是侦听对象（以data中对象创建的函数,两个参数，第一个是变化过后的值，第二个是变化之前的）
Vue实例：每个 Vue 应用都是通过实例化一个新的 Vue对象开始的
window.onload(延迟加载,先加载其他,最后加载此处) = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'}
});
}
<div id="app">{{ message }}</div>
模板语法：插入值(Mustache(胡子) 语法 --> {{ }} )
指令：是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
常见的指令及缩写：**v-bind（:）**绑定，用于网址等 ；**v-on（@）**点击事件
如果是标签的属性要使用值，就不能使用“Mustache”语法，需要写成使用v-bind指令：
计算属性：带有复杂逻辑的表达式，我们可以使用计算属性
侦听属性：侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是当前值。
绑定：使用v-bind指令来设置元素的class属性或者sytle属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。
数据绑定
class绑定：可以给v-bind:class传一个对象，以动态的切换class
数组绑定：<div v-bind:class="[activeClass, errorClass]"></div>
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : 'not active'(若isActive为真，则显示activeclass，否则显示not active), errorClass]"></div>
当条件多时这样写繁琐，数组语法中可以用对象语法：<div v-bind:class="[{ active: isActive }, errorClass]"></div>
对象绑定：<div class="static" v-bind:class="{active:isActive,'text-danger':hasError(true则显示或false则不显示) }"></div>
style绑定：style 的对象语法十分直观——看着非常像 CSS，但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 来命名
<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
绑定对象
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
data: {
baseStyles: {
color: 'red',
},
overridingStyles{
Background:blue
}
}
条件渲染
v-if可以控制元素的创建或者销毁<div v-if="type === 'A'">A</div>
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用<div v-else-if="type === 'B'">B</div>
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别<div v-else>Not A/B</div>
v-show：另一个用于根据条件展示元素的选项是 v-show 指令。用法和v-if大致一样，但是它不支持v-else
它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的<h1 v-show="ok">Hello!</h1>
列表渲染：遍历v-for
遍历数组：<li v-for="(item,index) in items"> {{ item }} </li> (items为数组,遍历时元素在前，下标在后(可只取一个))–>[1,2,3]
遍历对象：<li v-for="(value,key) in object">{{key}} - {{value}} </li>(object为对象，遍历时值在前，键在后(可只取一个))–> {name:‘zs’,age:18}
事件处理：可以用 v-on (@)指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数。
<input type="button" value="计数+1" v-on:click="count(变量) += 1">@click="count(变量) += 1"
<input type="button" value="计数+1" v-on:click="fnAdd(函数)">@click="fnAdd(函数)" 在函数中调用变量，需要写this.变量名
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
表单绑定
v-model 指令在表单 <input>及 <textarea> 元素上创建双向数据绑定(相互影响)
单行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组：
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
......
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
单选框
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
......
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
下拉框
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
......
new Vue({
el: '...',
data: {
selected:''
}
})
过滤器
过滤器：Vue.js允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind 表达式
<!-- 在双花括号中 -->
{{ prize | RMB }}
<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>
定义过滤器的两种形式：在组件内部定义，在创建Vue之前定义全局过滤器
内部：filters：与methods一样，都属于Vue实例对象内部的方法
filters:{
RMB:function(value){
if(value=='')
{
return;
}
return '¥ '+value;
}
}
全局：在var vm = new Vue之上
Vue.filter('Yuan',function(value){
if(value=='')
{
return;
}
return value+'元';
});
自定义指令
自定义指令：指令是用来做dom操作的，如果vue现有的指令不能满足开发要求，我们需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。
定义一个全局指令，让input框自动获取焦点
Vue.directive('focus',{
inserted:function(el,binding){
el.focus();
el.style.background = 'gold';
console.log(binding.name);
}
})
......
<div id="app">
<input type="text" v-focus>
</div>
如果定义成vue对象局部的，可以用vue对象的directives属性：
directives: {
focus: {
inserted: function (el,binding) {
el.focus();
el.style.background = 'gold';
console.log(binding.name);
}
}
}
实例生命周期
beforeCreate：创建Vue实例化对象前
created：创建对象后
beforeMount：挂在标签前
Mounted：挂在标签后
beforeUpdate：修改数据前
Updated：修改数据后
数据交互
数据交互：vue.js没有集成ajax功能，要使用ajax功能，可以使用vue官方推荐的axios.js库来做ajax的交互。axios库的下载地址：https://github.com/axios/axios/releases
axios完整写法
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
执行get请求：
// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地，上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行post请求：
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Vue组件
组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子。
注册及使用组件
// 注册一个组件：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
//使用组件
<div id="example">
<my-component></my-component>
</div>
......
new Vue({
el: '#example'
})
data必须是一个函数，定义的值要写在return{}中！
data: function () {
return {
counter: 0
}
props传递参数：如果想给组件中传递参数，组件要显式地用 props 选项声明它预期的数据
<div id="app">
<my-component msg01="hello!" :msg02="iNum01"></my-component>
</div>
......
Vue.component('my-component',{
props:['msg01','msg02'],
template:'<div><p>{{msg01}}</p><p>{{msg02}}</p></div>'
});
var vm = new Vue({
el:'#app',
data:{
iNum01:12
}
})
ES6语法
1.变量声明用let，const
2.箭头函数：可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题。
var fnRs = (a,b)=>{ } 有参数
var fnRs2 = a =>{ } 一个参数可以不写括号
Var fnRs3 = () => { } 无参数时要写括号
3.模块导入import，导出export
// model.js文件中导出
var person = {name:'tom',age:18}
export default {person}
// index.js文件夹中导入
import person from 'js/model.js'
// index.js中使用模块
person.name
person.age
/*
上面导出时使用了default关键字，如果不使用这个关键字，导入时需要加大括号：
import {person} from 'js/model.js'
*/
4.对象的简写
let name = '李思';
let age = 18;
/*
var person = {
name:name,
age:age,
showname:function(){
alert(this.name);
},
showage:function(){
alert(this.age);
}
}
*/
// 简写成下面的形式
var person = {
name,
age,
showname(){
alert(this.name);
},
showage(){
alert(this.age);
}
}
person.showname();
person.showage();
npm操作
1、打开终端
2、常用终端命令
// 查看文件夹内容
dir +回车
// 进入某个文件夹
cd 文件夹名 +回车
// 进入上一级文件夹
cd .. +回车
// 切换到e盘
e: +回车
// 清除屏幕
cls +回车
安装vue得到自动化工具包
// 全局安装 vue-cli
npm install --global vue-cli
// 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
// 启动开发服务器 ctrl+c 停止服务
cd my-project
npm run dev 启动服务
// 打包上线文件
npm run build
流程：
1.停止服务 ctrl+c
2.打包：npm run build
3.在服务目录下找到dist文件夹，拷贝数据到提供数据服务的静态目录文件夹中(static)，若此文件夹存在数据，则需清空数据后拷贝
三元表达式
<div v-bind:class = '{active:isActive,bold:isBold}'>出师一表真明世，千载谁堪伯仲间</div>
<div :class = "['active','bold']">出师一表真明世，千载谁堪伯仲间</div>
<div :class = "['active',isBold?'bold':'not bold']">出师一表真明世，千载谁堪伯仲间</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isActive:true,
isBold:false,
}
})
</script>