js定义变量只有一个关键字:var
var
有一个问题,就是定义的变量有时会莫名奇妙的成为全局变量。
例如这样的一段代码:
for(var i = 0; i < 5; i++){
console.log(i);
}
console.log("循环外:" + i)
i最后一次打印值为5
let
所声明的变量,只在let
命令所在的代码块内有效。
const
声明的变量是常量,不能被修改
includes()
:返回布尔值,表示是否找到了参数字符串。
startsWith()
:返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith()
:返回布尔值,表示参数字符串是否在原字符串的尾部。
直接String类打点使用
var str =“test”; str.使用
在两个`之间的部分都会被作为字符串的值,不管你任意换行,甚至加入js脚本
let arr = [1,2,3]
const [x,y,z] = arr;// x,y,z将与arr中的每个位置对应来取值
// 然后打印
console.log(x,y,z);
const person = {
name:"jack",
age:21,
language: ['java','js','css']
}
// 解构表达式获取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);
注意解构时对应的名字必须一样。
const {name:n} = person;
打印n就显示的是person的name值
function add(a , b) {
// 判断b是否为空,为空就给默认值1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));
b = b || 1; 当b不为空时,b = b 。否则就等于1
function add(a , b = 1) {
return a + b;
}
// 传一个参数
console.log(add(10));
直接在方法参数处赋默认值
一个参数时:
var print = function (obj) {
console.log(obj);
}
// 简写为:
var print2 = obj => console.log(obj);
多个参数:
// 两个参数的情况:
var sum = function (a , b) {
return a + b;
}
// 简写为:
var sum2 = (a,b) => a+b;
代码不止一行,可以用{}
括起来
var sum3 = (a,b) => {
let c = a+b;
return c;
}
var hi = ({name}) => console.log("hello," + name);
数组方法。a数组.map(方法) 将a数组按该方法修改后,值给a数组
let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)
使用npm来操作。
npm init -y
进行初始化npm install vue --save
<body>
<div id="test">
<h2>{{name}},非常帅!!!h2>
div>
body>
<script src="node_modules/vue/dist/vue.js" >script>
<script>
// 创建vue实例
var vuejs = new Vue({
el:"#test", // el即element,该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "峰哥"
}
});
script>
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}},非常帅!!!有{{num}}位女神为他着迷。
h2>
div>
body>
<script src="node_modules/vue/dist/vue.js" >script>
<script>
// 创建vue实例
var app = new Vue({
el: "#app", // el即element,该vue实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "峰哥",
num: 5
}
});
script>
在页面中有一个input
元素,通过v-model
与num
进行绑定。
添加一个按钮,可以直接操作num数组。而不需要去绑定dom
例如一段html模板: 然后创建Vue实例,关联这个div 这样,Vue就可以基于id为 在html语句中添加,vue可以实时监测数据的变化并渲染数据。 html: js: html: js: 使用v-text和v-html指令来替代 HTML: JS: 可以避免出现插值闪烁 双向绑定,就是说可以直接在视图上改数据(比如选择框,表单)<div id="app">
div>
var vm = new Vue({
el:"#app"
})
app
的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。2. v-model
<div id="app">
<input type="text" v-model="name"/>
div>
var vm = new Vue({
el:"#app",
data:{
name:"刘德华"
}
})
input
的值3. 绑定事件以及函数
<div id="app">
{{num}}
<button v-on:click="add">加button>
div>
var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的当前vue实例
this.num++;
}
}
})
vue生命周期,钩子函数
{{}}插值表达式
{{}}
<div id="app">
v-text:<span v-text="hello">span> <br/>
v-html:<span v-html="hello">span>
div>
var vm = new Vue({
el:"#app",
data:{
hello: "
大家好,我是峰哥
"
}
})
v-model 双向绑定
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了:{{language.join(',')}}
h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: []
}
})
script>
v-on 事件绑定
<div id="app">
<button v-on:click="num++">增加一个button><br/>
<button v-on:click="decrement">减少一个button><br/>
<h1>有{{num}}个女神h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:100
},
methods:{
decrement(){
this.num--;
}
}
})
script>