JS
JavaScript是解释型语言，弱类型脚本语言，使用浏览器的JS引擎进行解释，例如Chrome浏览器的V8，读取网页内的js代码，对其处理后运行，逐行执行（变量收集和分号补全）
浏览器分为渲染引擎和JS引擎，渲染引擎俗称内核，用来解析HTML和CSS
JS由核心ESMAScript、DOM(文档对象模型)、BOM(浏览器对象模型)组成
ES6是JS核心，在var的基础上加了let和const
类比的话：JS–>JAVA，ES6–>jdk8，vue–>spring，npm–>maven
闭包
可以将变量保存在函数内，用函数将变量给包起来
普通函数包含变量，变量的作用域就是函数内，除非定义全局变量，但是闭包可以将变量封在函数内，实现变量的保护
var add = add_fuc();
function add_fuc() {
var counter = 0;
function innerFunction(){
return counter += 1;
}
return innerFunction;
}
print(add)
function innerFunction(){ return counter += 1; }
print(add())
1
以上例子可以看出，方法内嵌套，内方法引用了外方法的变量，最终返回内方法，使用add变量进行外方法的调用，返回的是内方法块，但是用add()就可以直接执行内方法，从而保护了外变量，闭包可以将内部嵌套函数变成外部可调用的，即add和add()的区别
更屌的写法：
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3
回调
JS是异步编程语言，函数的调用不是顺序执行的
var fs = require("fs");
var c
function f(x) {
console.log(x)
}
function writeFile() {
fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
if (!err) {
console.log("文件写入完毕!")
c = 1
}
});
}
c = 0
writeFile()
f(c)
例如这个，最后打印的是c=0而不是1，因为最后的f©先执行，io耗时所以执行的慢
可以把f©放到write函数内部，当然也可以将f()作为参数传入write函数
在大多数编程语言中，函数的形参总是由外往内向函数体传递参数，但在JS里如果形参是关键字"callback"则完全相反，它表示函数体在完成某种操作后由内向外调用某个外部函数。
var fs = require("fs");
function writeFile(callback) {
fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {
if (!err) {
console.log("文件写入完毕!")
c = 1
callback(c)
}
});
}
var c = 0
writeFile(function (x) {
console.log(x)
})
将f()作为匿名函数传入，使用callback在函数执行完后进行调用
下面是JQuery的一个典型回调
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
JQuery
js的框架，封装了js的一些方法，使js更易用
语法
选择器
- id选择器：
var obj = $("#one"); - class选择器：
var obj = $(".class") - 标签选择器：
var obj = $("div") - 所以选择器：
var obj = $(*) - 组合选择器：
var obj = $("#one,.two,div") - 表单选择器：
var obj = $(":text") //可选择一些表单的元素，不存在表单也可以
过滤器
- first：
$("选择器:first") //第一个选择的元素 - 可用文本框：
$(":text:enabled") - 复选框中的元素：
$(":checkbox:checked") //数组
函数
- val无参：
$(选择器).val() //获取DOM对象的value值 - val有参：
$(选择器).val(参数) //对DOM对象赋值
算了不写了，直接参考jquery手册吧！
AJAX
局部刷新页面数据，异步同步更灵活
https://www.cnblogs.com/yangguoe/p/8461932.html
三种写法
$(function () {
$.ajax({
// 设置ajax的参数
// 请求数据的url地址：接口地址
url: '/index_data',
// 请求数据方式：get post
type: 'get',
// 返回的数据格式 json
dataType: 'json',
// data:发送给接口的数据
data:{"code":"30026"},
// 请求成功之后要执行的回调函数
success: function (dat) {
//dat:服务端返回的数据
console.log(dat)
},
// 请求失败
error: function (e) {
alert('请求失败')
}
})
})
$(function () {
$.ajax({
url: '/index_data', //请求地址
type: 'get', //请求方式
dataType: 'json', //返回的数据格式
data:{'code':"000007"}
}).done(function(dat) {
// 请求成功之后要执行的回调函数
console.log(dat)
}).fail(function(e) {
// 请求失败之后要执行的回调函数
alert('请求失败')
})
})
$(function () {
$.get("/add_data", {
"code":"000007"
},
function(dat){
//请求成功时回调函数
alert(dat)
})
})
Vue
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
每个 Vue 应用都需要通过实例化 Vue 来实现。
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
</script>
</body>
简单实例
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
</body>
这个很有意思，使用$将vm内外的对象进行区分
语法
属性绑定
-
文本：p标签等文本标签，可以直接用
<p> {{msg}} </p>进行插入 -
html：对于div等标签，可以用
<div v-html="msg"></div> -
其他标签绑定：
使用 v-model 定义当前元素，使用 v-bind 绑定其他元素，ee 如果是 true 就使用 class1 的样式v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<style> .class1{ background: #444; color: #eee; } </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="ee" id="r1"> <br><br> <div v-bind:class="{'class1': ee}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data:{ ee: false } }); </script> </body> -
支持 js 表达式
<body> <div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join(' ') }} <div v-bind:id="'list-' + id">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } }) </script> </body>
指令
-
指令：指令是带有 v 前缀的特殊属性，用于在值改变后作用到 DOM 上，当然那个 ok 也可以改为 seen
<body> <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script> </body> -
参数：指令后以:指明，将 href 属性与表达式 url 绑定
<body> <div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script> </body> -
监听：使用 v-on 进行按钮事件的监听
<body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> </body> -
过滤：{{ A | B }}，使用管道符，可以进行文本格式化
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script> -
缩写：
v-bind 缩写：<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>v-on 缩写：
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
循环
使用 v-for，循环数组：
<body>
<div id="app">
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
<li>--------------</li>
</template>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
</body>
循环对象：
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
或者 key value 都参与迭代
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
迭代整数：
<div id="app">
<ul>
<li for="n in 10">
{{ n }}
</li>
</ul>
</div>
监听
通过 watch 监听数据变化
<body>
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
</body>
或者：
<body>
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
