引言
现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue，可以说vue在国内是非常的火爆的，下面我给大家介绍一下vue框架吧！
vue是渐进式框架
vue的核心是一个视图模板引擎，但是这并不能说明vue不是一个框架，如上图所示在声明式渲染（视图模板）基础上，vue可以添加组件系统component，vue-router客户端路由，vuex的状态管理，vue-cli构建工具来构建一个完整的框架，更重要的是这些功能相互独立，你可以任意选用你项目需要的部件，不一定非要全部整合在一起（就像是vuex它是一个很好的可以管理组件之间共享状态的部件，但非必须在你的每一个项目中使用它，如果说你的项目相对简单，组件之间的通信相对简单你完全可以不使用它），可以看到渐进式，其实就是vue的使用方式，同时也能看到vue的设计理念
vue是mvvm模式
为什么说vue是mvvm模式呢？这个大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的简写，即模型视图视图模型。模型是指后端传过来的数据，视图是指我们看到的页面，视图模型是mvvm框架的核心，他是连接view和model的桥梁，它有两个方向，第一将后端传来的数据转换成页面可以看到的视图，第二，将用户在页面上的交互转化成为后端数据，我们称之为双向绑定。
总结mvvm模式的视图和模型是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解为是ViewModel，它可以实现dom监听和数据绑定
vue的数据绑定原理
当你把JavaScript对象传入vue实例作为data选项，vue会遍历此对象的所以属性，并使用Object.defineProperty把这些属性转换为getter和setter，每一个组件都有一个watcher实例，它会在组件渲染过程中，把接触过的数据记录为依赖，当依赖的setter被触发是，他会通知watcher，重而使关联的数据重新渲染，以下是代码展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj设置了一个myname属性，当访问obj.myname属性会执行get方法
},
set (data) {
// 当修改myname属性会执行set方法
// data会得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺点： {
1：无法监听es6的set，map变化
2：无法监听class类型的数据
3：属性的新增和删除也无法监听
4：数组元素的新整和删除也无法监听
}
html5+css3实现2D-3D动画效果实例
主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。
文章目录
html5+css3实现2D-3D动画效果实例
2D变换
3D变换
2D中应用实现案例
3D中应用实现案例
css3动画
2D变换
是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸.
1
2
*2d对下面面坐标系简单分析如下：
（1）.默认状态下，x轴是水平的，向右为正。
（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。
2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴
下面首先需要了解2D、3D中的功能函数：
位移 translate()
translateX() 方法，元素在其 X 轴以给定的数值进行位置移动
translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动
缩放scale()
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
旋转rotate()
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
正数”是顺时针，“负数”是逆时针，单位为“deg”。
倾斜skew()
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，
第二个参数表示垂直方向的倾斜角度
3D中多了Z轴，其他属性值不变
2D中应用实现案例
位移 translate()
效果图：
position: absolute;
left: 20px; top: 40px;
transition: 2s;/*过渡时间*/
transform: translateY(-320px);
.box3:hover .box3_h2{
transform: translateY(0px);
}
<!-- 盒子3：实现位移 -->
<div class="box3 box">
<img class="img_3" src="../16/images/3.png" alt="">
<div class="box_mm"></div>
<h2 class="box3_h2">Taylor Swift</h2>
<p class="box3_p1">I'm so glad you made time to see me. How's life,
tell me how's your family? I haven't seen them in a while.
You've been good, busier then ever.
We small talk, work and the weather Your guard is up and I know why...</p>
</div>
————————————————/* 公共样式 */ .box{ width:350px; height: 300px; position: relative; transform: 1s; margin: 20px 20px; float: left; } img{ display: block; width: 350px; height: 300px; } /* 鼠标滑过覆盖上方的白色部分 */ .box_mm{ width:350px; height: 300px; transform: 1s; background-color: #fff; position: absolute;/*设置定位，挡住box，*/ top: 0; opacity: 0;/*透明，0全透明*/ } h2{ font-size: 20px; } /* 盒子3 */ .box3{ overflow: hidden; } .img_3{ transition: 2s; } .box3_h2{ color: #fff; position: absolute; left: 20px; top: 40px; transition: 2s;/*过渡时间*/ transform: translateY(-320px); } .box3_p1{ font-size: 14px; width: 320px; position: absolute; left: 20px; bottom: 80px; transition: 2s; opacity: 0; } /*交互样式*/ .box3:hover .img_3{ transform: translateY(-10px); } .box3:hover .box3_h2{ transform: translateY(0px); } .box3:hover .box3_p1{ transform: translateY(-50px); opacity: 1; }
著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。
调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括跨浏览器渐变与阴影，类似 Photoshop 的层融合效果，更一致的声明简化语法以及对条件判断的本地支持。这些期待中一部分已经包含在未来的 CSS-3 中，但更多的仍然只是一些梦想。
WebMonkey 的编辑们将这个 Wishlist 发表在他们的网站并让 WebMonkey 的读者投票选出最热门的项目，以下是按投票多少排列的 CSS Wishlist 部分列表（只选取最热门的项目）。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
CSS 圆角
by Webmonkey
标准的，直接基于 CSS 的圆角是很多人的期待，这样，就不必再费尽心机只为了显示一个圆角。
垂直居中
by michael lascarides
针对 block 对象的更容易的垂直居中设置。（div + css 让人既爱且恨的一个重要原因就是垂直居中，让一个对象垂直居中显示在 block 容器中，且兼容所有主流浏览器简直就是一个噩梦 - 译者）
兼容所有主流浏览器的 CSS 2.1 与 CSS 3
by Erik
能兼容所有主流浏览器的 CSS 2.1 与 CSS 3 是 Erik 的梦想，但其中的某些功能在某些浏览器中总是磕磕绊绊。
更好的嵌入字体
by Webmonkey
不要 sFIR, 不要图片，要真正的字体。
CSS 变量
by Jeffrey Jordan Way, via css-tricks.com
能定义诸如色彩值一类的变量
更好地支持 100% height
by JLR
设置了 100% height 的容器的顶部和底部真正附着在页首和页尾，页面中间部分匹配内容并准确显示滚动条。搜索“100% height css”能找到各种解决方法，但事情原本不该这么复杂。
可重复使用变量
by Neal Lindsay
比如:
@var mycolor = #0080FF
h1 { color: mycolor; }
div.containbox { border: 1px mycolor; }
浏览器一致性与定义顺序
by JML
浏览器一致性非常重要。某些 CSS 在某些浏览器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同时，对里面的 CSS 定义应该可以覆盖全局定义。
一句话复原
by Chris Pitzer
很多设计者要写40多行代码才能清除浏览器默认 CSS 定义，应当有一个简单的声明一次性将所有 CSS 复原，比如：
body { clear-default-styles:true; }
图形旋转与反转
by Stephen Bell
在设置图形圆角效果时候，我们需要同一个圆角图片的4个旋转版本来实现。应该有一个简单的声明实现旋转，如：
img .horiz { rotate:90; }
成组的 CSS 简化定义
by Volkan Görgülü, via css-tricks.com
如:
改为:
渐变
by Anonymous
以避免一条线一条线地实现渐变。
定位计算
by Anonymous
不使用 JavaScript 而是直接在 CSS 中实现：
left: ID1.Left + ID1.Width + 2px;
网格布局
by Kurt Krumme
table 布局曾经流行一时，因为 table 布局更接近网格布局的原理。CSS 的设置者们为什么要推出一个不伦不类的 box 模型？
div + css 在 Web 设计界已经红得发紫，尽管 div 有众多缺陷（比如垂直居中，比如在 IE 中的众多 BUG），如果哪个设计师胆敢使用 table，被人查出源代码，是会被耻笑的。然而译者从不畏惧使用 table + css，且愿意告戒那些盲目追随 div 并被折磨得半死的人，至少在目前，table 是被各种浏览器支持得最完美的容器对象。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
使用 image 作 border
by Anonymous
应当可以用 image 作为 border，如：
border-right: url('image.png')
支持多个背景图
by Brad
这个 CSS 功能非常有用，有了这个功能，完美实现 CSS 圆角就变得十分简单了。
所有浏览器支持统一标准
by Anonymous
这里特指 IE<8 的版本。CSS 有成型的标准，但有些浏览器一定要搞一些自己的东西出来。
以上来自cb。大师们的期望果然很独特，相当多的期望也非常有用，如果实现了，Web开发就是多么轻松愉快的一件事情啊！比如变量、清除定义和定位计算，是我认为非常有用的。目前IE下可以用一些IE特有的表达式，但用起来太复杂。
还是期望CSS3更好更强大。也期望各个浏览器尽快支持CSS3
————————————————
版权声明：本文为CSDN博主「前端基础开发」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/html886/article/details/104582007
文章目录
一、this
1.什么是this
2.this 代表什么
3.绑定 this 的方法
4.this的指向
5.改变指向
二、Function.prototype.bind()
三、call/apply
1.定义
2.语法
3.异同
一、this
1.什么是this
this 关键字在大部分语言中都是一个重要的存在，JS中自然不例外，其表达的意义丰富多样甚至有些复杂，深刻理解this是学习JS、面向对象编程非常重要的一环。
2.this 代表什么
this代表函数（方法）执行的上下文环境（上下文，类似与你要了解一篇文章，了解文章的上下文你才能清晰的了解各种关系）。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
1.在方法中，this 表示该方法所属的对象。
2.如果单独使用，this 表示全局对象。
3.在函数中，this 表示全局对象。
4.在函数中，在严格模式下，this 是未定义的(undefined)。
5.在事件中，this 表示接收事件的元素。
6.类似 call() 和 apply() 方法可以将 this 引用到任何对象。
3.绑定 this 的方法
this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。
4.this的指向
1.在一般函数方法中使用 this 指代全局对象
function test(){
this.x = 1; //这里this就是window
console.log(this.x);
}
test(); // 1
JS规定，函数中的this，在函数被调用时确定，它指函数当前运行的环境。
2.作为对象方法调用，this 指代上级对象
var x =3;
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m(); // 1
如果函数作为对象的方法时，方法中的 this 指向该对象。
3.作为构造函数调用，this 指代new 出的对象
function test(){
console.log(this);
}
var o = new test();
test();
//可以看出o代表的不是全局对象
new关键词的作用是调用某个函数并拿到其中的返回值，只是调用过程稍特殊。在上面的代码实例中。test函数被new关键词调用时，内部依次执行了以下步骤:
（1）创建一个空对象。
（2）将这个空对象的原型，指向这个构造函数的prototype。
（3）将空对象的值赋给函数内部的this（this就是个空对象了）。
（4）执行函数体代码，为this这个对象绑定键值对。
（5）返回this，将其作为new关键词调用oop函数的返回值。
所以构造函数中的this，依旧是在构造函数被new关键词调用时确定其指向，指向的是当前被实例化的那个对象。
4.箭头函数中的this
箭头函数是ES6的新特性，最重要的特点是它会捕获其所在上下文的this作为自己的this，或者说，箭头函数本身并没有this，它会沿用外部环境的this。也就是说，箭头函数内部与其外部的this是保持一致的。
this.a=20
var test={
a:40，
init:()=>{
console.log(this.a)
function go(){
this.a=60
console.log(this.a)
}
go.prototype.a=50
return go
}
}
var p=test.init()
p()
new (test.init())()
//输出 20 60 60 60
5.改变指向
this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。
bind方法和apply、call稍有不同，bind方法返回一个新函数，以后调用了才会执行，但apply、call会立即执行。
二、Function.prototype.bind()
bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj；
示例：
function f(y, z){
return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6
这里bind方法会把它的第一个实参绑定给f函数体内的this，所以这里的this即指向{x : 1}对象，从第二个参数起，会依次传递给原始函数，这里的第二个参数2，即是f函数的y参数，最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1 + 2 + 3 = 6分步处理参数的过程其实是一个典型的函数柯里化的过程（Curry）。
三、call/apply
1.定义
每个函数都包含两个非继承而来的方法：call()方法和apply()方法。
call和apply可以用来重新定义函数的执行环境，也就是this的指向；call和apply都是为了改变某个函数运行时的context，即上下文而存在的，换句话说，就是为了改变函数体内部this的指向。
2.语法
call()
调用一个对象的方法，用另一个对象替换当前对象，可以继承另外一个对象的属性，它的语法是：
Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj：这个对象将代替Function类里this对象
params：一串参数列表
说明：call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为obj指定的新对象，如果没有提供obj参数，那么Global对象被用于obj。
apply()
和call()方法一样，只是参数列表不同，语法：
Function.apply(obj[, argArray]);
obj：这个对象将代替Function类里this对象
argArray：这个是数组，它将作为参数传给Function
说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个TypeError，如果没有提供argArray和obj任何一个参数，那么Global对象将用作obj。
3.异同
相同点
call()和apply()方法的相同点就是这两个方法的作用是一样的。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。
一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向，看个例子：
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
console.log(add.call(sub, 2, 1));//3
纯JS对页面表格进行EXCEL导出
1.中间部分在style标签那种可以使用css样式对表格进行任意样式的修改
2.在tableid.innerHTML中可以对表格中的内容进行修改替换（其中放的内容就是导出后的表格内容）
3.需要引入xlsx.full.min.js文件
4.tableid为为表格的id
5.sheetName为下载后的文件名称
base64(excelFile) {
return window.btoa(unescape(encodeURIComponent(excelFile)))
},
tableToExcel(tableid, sheetName) {
var uri = 'data:application/vnd.ms-excel;base64,';
var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
+ '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
+ '</x:ExcelWorkbook></xml><![endif]-->' +
' <style type="text/css">' +
' .ivu-table td{\n' +
' /background-color: #FFFFFF;/\n' +
' /color: #fff;/\n' +
' /border:1px solid #FFFFFF;/\n' +
' }\n' +
' /每行的基本样式/\n' +
' .ivu-table-row td {\n' +
' color: #000000;\n' +
' min-width:50px;\n' +
' }\n' +
' /头部th/\n' +
' .ivu-table-header th{\n' +
' color:\t#FFFFFF;\n' +
' font-weight: bold;\n' +
' background-color: rgb(98,167,249);\n' +
' min-width:50px;' +
' border:1px solid #FFFFFF;' +
' position: relative; \n' +
' top: expression(this.offsetParent.scrollTop); \n' +
' z-index: 300; \n' +
' }\n' +
' /偶数行/\n' +
' .ivu-table-stripe-even td{\n' +
' background-color: #ffffff!important;\n' +
' }\n' +
' /奇数行/\n' +
' .ivu-table-stripe-odd td{\n' +
' background-color:#F0FFFF!important;\n' +
' }\n' +
' /选中某一行高亮/\n' +
' .ivu-table-row-highlight td {\n' +
' background-color: #d63333!important;\n' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>';
if (!tableid.nodeType) tableid = document.getElementById(tableid);
tableid.innerHTML = tableid.innerHTML.replace('暂无筛选结果','')
var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
var a = document.createElement("a");
a.download = sheetName + ".xls";
a.href = uri + this.base64(this.format(template, ctx));;
a.click();
},
format (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
}
在学习应用css之前我们要先了解一下什么是css。CSS是Cascading Style Sheets(层叠样式表)的简称.
为了提高网页的维护更新效率，我们可以使用样式表，来仅仅改变一个文件，就能达到同时改变几百个网页的外观。为了能充分用好样式表的强大性和灵活性，笔者就怎样有效使用样式表，来谈谈自己的一些心得体会
随着互联网经济的不断发展，互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长，各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信 息量，我们对网页中每一个栏目的增删，都会是一个很复杂的过程。为了提高网页的维护更新效率，我们可以使用样式表，来仅仅改变一个文件，就能达到同时改变 几百个网页的外观，而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性，笔者就怎样有效使用样式表，来谈谈自己的一些心得体会。 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
1、在一个网页中同时调用CSS的多种引入方式
在 HTML中引入CSS的方式很多，例如直接插入式，使用 链接外部样式表，使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问，这些引入方式能不能同时在 一个网页中被调用，它们之间会不会产生混乱？其实，我们大可不必这么担心，这就是它为什么称之为“层叠样式表”的原因，浏览器在处理网页中的样式表是按照 一定的顺序来处理的，首先检查页面中是否有直接插入式CSS，如果存在就先执行它，针对本句的其它CSS就不去管它了；接着检查网页源代码中 的"STYLE"标记，有就执行了；接下来再依次检查执行"@import"导入的内部样式表和 链接的外部样式表。因此，我们完全可以在一个网页中同时调用CSS的多种引入方式。
2、快速创建CSS外连式文件
对 于一个初接触CSS的网页设计人员来讲，要用写字板之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很 好，用它来帮助就轻松多了。具体可以这样操作：首先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver的编辑窗中调出CSS面 板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；全部定义好后，再用记事本创建一个空的CSS外连式文 件，把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。
3、让背景图案静止不动
当 网页不能在一屏全部显示时，我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，移动滚动条时一般图象和文字是一起移动的，那么我们有没有办法使 背景图象不随文字一起“滚动”呢？利用CSS就可以实现这样的目的，我们只要把下面这段源代码直接放在网页的与标签之间就可以了，其中bg.jpg就是网 页中的背景图象，大家可以把它换成自己需要的背景图象：
复制代码
代码如下:
〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
--〉
〈/style〉
4、让网页自动进行“首行缩进”
用 DreamWeaver来设计网页的用户知道，在DreamWeaver中输入空格不是那么的方便，我们可以利用css来设计“首行缩进”功能来弥补这个 缺憾。打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1)，在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能，在这里要注意的是，所谓“首 行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置 好的CSS如下所示：
复制代码
代码如下:
〈style type="text/css"〉
〈!--
.style1 { text-indent: 2em}
--〉
〈/style〉
5、巧用css来设定文字的背景
在 DreamWeaver中，如果我们需要给文字加上不同的背景颜色时，操作上很简单，只要用鼠标单击属性面板上的文字颜色按钮，从弹出的颜色设置栏中选择 需要的颜色就可以了。但如果我们要给部分文字加不同的背景色，该怎么操作呢？由于DreamWeaver3中没有这方面的功能，但我们可以巧妙利用css 来实现这样的目的。具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为bjstyle，接着在网页中选中需要设置颜色的文 字，然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码：
复制代码
代码如下:
〈style type="text/css"〉
〈!--
.bjstyle { background: #cc00bb}
--〉
〈/style〉
6、给指定内容加边框
在 DreamWeaver中，我们可以利用CSS强大的定义功能来给某部分内容加边框，定义时首先打开DreamWeaver的设计界面，在该界面中找到 CSS的属性定义对话框（Style Definition for .style1)，该对话框的“Border”设置项就是用来定义指定内容边框线的，其中“top”、“bottom”、“left”、“right”设 置栏是分别用来定义指定内容四周边框线的粗细和颜色的，这些设置项设置好后还需要在下面的“Style”中定义线型，否则我们将看不到定义的边框线，因为 css默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS源代码：
复制代码
代码如下:
〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉
7、用样式表来控制超级链接的颜色
如 果你仔细研究一下超级链接，你就会发现，浏览器处理超级链接的默认方式是，对于目前还没有访问过的超级链接是用蓝色且带有下划线的文字来显示的，对于已经 访问过的超级链接则是用深紫色且带有深紫色的下划线的文字来显示的。这些默认的设置颜色看得时间，可能就产生厌倦之感，并且很有可能与自己网页的背景颜色 不协调。因此我们完全可以按照自己的视觉要求，来自由更改超级链接的显示颜色，让它更能体现自己的风格。下面笔者就来介绍一段修改超级链接显示颜色的源代 码，代码如下：
我们可以把这段源代码添加在HTML文件的……之间，它可以对对本网页中的任何一个超级链接都起作用，其中这段代码中的：
A:link {text－decoration: none; color:blue}是说明了超级链接还没有被访问，它没有下划线，颜色为蓝色。
A:visited { color:red; text－decoration:line－through }说明了超级链接被访问后，它的颜色变成了红色，有了一根删除线。
A:active { color:white; text－decoration:underline }说明超级链接处于活动状态的时候，它的颜色变成了白色，有了下划线。
A:hover {text－decoration:none;color:＃FF0000;background－color:black}说明鼠标移动到超级链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
根据上面的解释，我们可以把超级链接在各种状态下的显示颜色修改成自己喜欢的那种，以便能更好地展示自己的个性。
8、给选中文字加背景图像
在 DreamWeaver中，我们同样可以给指定文字加上背景图象，其操作过程与给指定文字加背景色操作类似，只不过是把选择背景颜色换成选择加载的背景图 象就是了。其具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为txstyle，接着在网页中选中需要设置颜色的文字，然 后在工具栏中单击一下“txstyle”就行了。下面就是一个定义背景图象的CSS的源代码（其中test.gif就是所加载的背景图象）：
复制代码
代码如下:
〈style type="text/css"〉
〈!--
.txbgstyle { background-image: url(test.gif)}
--〉
〈/style〉
————————————————
版权声明：本文为CSDN博主「html基础教程」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/html168/article/details/104525011
1.v-on ：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
（1）v-on:click绑定点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('test')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:'#app',
data:{
message:'hello vue'
},
methods:{
fun1:function (msg) {
this.message=msg;
}
}
});
</script>
</html>
(2)v-on:keydown事件会在用户按下一个键盘按键时发生
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
传统JS：<input type="text" οnkeydοwn="showKeyCode()"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
/ $event 它是vue中的事件对象 和我们传统js的event对象是一样的 /
fun:function(event){
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不让键盘的按键起作用
event.preventDefault();
}
}
}
});
//传统js的键盘按下事件
function showKeyCode(){
//event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不让键盘的按键起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode == 13){
// alert("你按的是回车");
// }
}
</script>
</html>
（3）v-on:mouseover 当鼠标指针位于元素上方时,会发生 mouseover 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
</div>
<!--<div οnmοuseοver="divmouseover()" id="div">
<textarea οnmοuseοver="textareamouseover()">这是一个文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/*
@事件名称 就是 v-on:事件名称的简写方式
@mouseover它就等同于v-on:mouseover
/
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠标悬停在div上了");
},
fun2:function(event){
alert("鼠标悬停在textarea上了");
event.stopPropagation();
}
}
});
//传统的js方式
function divmouseover(){
alert("鼠标移动到了div上了");
}
function textareamouseover(){
alert("鼠标移动到了textarea上了");
event.stopPropagation();
}
</script>
</html>
(4).Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。注意:该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itheima.com" method="post" >
<input type="submit" value="提交">
</form>
<!--<form action="http://www.itheima.com" method="post" οnsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
<hr/>
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠标悬停在div上了");
},
fun2:function(event){
alert("鼠标悬停在textarea上了");
}
}
});
//传统js方式
function checkForm(){
alert(1);
//表单验证必须有一个明确的boolean类型返回值
//在应用验证方法时必须加上 return 方法名称
return false;
}
</script>
</html>
2.v-text与v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//传统js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
（2）v-bind 插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind的使用</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">传智播客</font>
<font size="5" :color="ys2">黑马程序员</font>
</div>
</body>
<script>
//view model
//插值表达式不能用于html标签的属性取值
//要想给html标签的属性设置变量的值，需要使用v-bind
//v-bind也可以简化写法 直接使用:
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
</html>
（3）v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
用户名：<input type="text" name="username" v-model="user.username"><br/>
密码：<input type="text" name="password" v-model="user.password"><br/>
<!-- v-model替换原来的value属性的值，用value获取不到-->
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>
（4）v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历数组</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
<!--index是索引的意思，用插值表达式输出 -->
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(key,value) in product ">{{value}}===={{key}} </li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
product:{
id:1,
name:"笔记本电脑",
price:5000
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(product,index) in products ">
<td>{{index}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{ id:1,name:"笔记本电脑",price:5000 },
{ id:2,name:"手机",price:3000 },
{ id:3,name:"电视",price:4000 }
]
}
})
</script>
</html>
3.v-if与v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
</html>
引言
现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue，可以说vue在国内是非常的火爆的，下面我给大家介绍一下vue框架吧！
vue是渐进式框架
vue的核心是一个视图模板引擎，但是这并不能说明vue不是一个框架，如上图所示在声明式渲染（视图模板）基础上，vue可以添加组件系统component，vue-router客户端路由，vuex的状态管理，vue-cli构建工具来构建一个完整的框架，更重要的是这些功能相互独立，你可以任意选用你项目需要的部件，不一定非要全部整合在一起（就像是vuex它是一个很好的可以管理组件之间共享状态的部件，但非必须在你的每一个项目中使用它，如果说你的项目相对简单，组件之间的通信相对简单你完全可以不使用它），可以看到渐进式，其实就是vue的使用方式，同时也能看到vue的设计理念
vue是mvvm模式
为什么说vue是mvvm模式呢？这个大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的简写，即模型视图视图模型。模型是指后端传过来的数据，视图是指我们看到的页面，视图模型是mvvm框架的核心，他是连接view和model的桥梁，它有两个方向，第一将后端传来的数据转换成页面可以看到的视图，第二，将用户在页面上的交互转化成为后端数据，我们称之为双向绑定。
总结mvvm模式的视图和模型是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解为是ViewModel，它可以实现dom监听和数据绑定
vue的数据绑定原理
当你把JavaScript对象传入vue实例作为data选项，vue会遍历此对象的所以属性，并使用Object.defineProperty把这些属性转换为getter和setter，每一个组件都有一个watcher实例，它会在组件渲染过程中，把接触过的数据记录为依赖，当依赖的setter被触发是，他会通知watcher，重而使关联的数据重新渲染，以下是代码展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj设置了一个myname属性，当访问obj.myname属性会执行get方法
},
set (data) {
// 当修改myname属性会执行set方法
// data会得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺点： {
1：无法监听es6的set，map变化
2：无法监听class类型的数据
3：属性的新增和删除也无法监听
4：数组元素的新整和删除也无法监听
}
所谓循环，就是重复执行一段代码，计算机的判断能力和人相比差的很远，计算机更擅长一件事情——不停的重复。而我们在JavaScript中把这叫做循环。下面让我们来了解了解JavaScript里的循环。
js循环结构有哪些
js循环结构有三种
for循环 ==> 用来多次遍历代码块
while循环 ==> 当指定条件为true时，循环代码块
do while ==> 当指定条件伪true时，循环代码块
1、for循环
for是由两个部分组成，条件控制和循环体
语法：
for(初始化表达式;循环条件表达式;循环后的操作表达式){
需要重复的代码块;
}
for语句结构如图：
for循环的执行顺序
1.初始化表达式
蓝蓝 http://www.lanlanwork.com