day86-ES6一般的语法和Vue的认识
原创day86-ES6一般的语法和Vue的认识
原创
少年包青菜
修改于 2019-12-02 11:20:24
修改于 2019-12-02 11:20:24
代码可运行
运行总次数：0
代码可运行
1.ES6常用语法之变量的定义
1.块级作用域
<script>
if (1){
var username = 'zhangsan'; // 块级里面，var定义的变量全局可以使用
let age = 22; // 块级里面 let 定义的变量只能在块级里面使用
console.log(age) // 块级内部可以正常打印
}
console.log(username); // 可以正常打印
console.log(age) // 块级外面不能打印
</script>2.变量的重复定义之 var，可以被重复定义
<script>
var username = 'zhangsan';
var username = 'lisi';
console.log(username) // username 被重复定义之后还可以正常打印
</script>3.变量的重复定义之 let，不可以被重复定义
<script>
let username = 'zhangsan';
let username = 'lisi';
console.log(username) // username 被重复定义之后已经不可以正常打印
</script>2.ES6常用语法之模板字符串
<div id="app"></div>
<script>
let username1 = 'leon';
let username2 = 'belmont';
let inner = document.getElementById('app');
inner.innerHTML =
`
<h1>username1==>${username1}</h1>
<h1>username2==>${username2}</h1>
`
// ` XXX ` 内部可以存放大量的 HTML 代码
// ${}的形式可以引用变量
</script>3.ES6常用语法之数据的结构和赋值
<script>
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b, c) // 数组位置对应的方式取值
</script><script>
let obj = {username: 'leon', age: 23};
let {username: user, age: person_age} = obj;
console.log(user, person_age); // 字典对应的方式映射赋值
</script>4.ES6常用语法之函数的扩展
1.一般函数
<script>
// 默认值参数
function func(x, y=10){ // 本质上没什么实际意义。跟 python 一样
let number = y; // 不传就返回默认值，传参就返回实际参数
return number
}
let ret = func(0, 1);
console.log(ret)
</script>2.箭头函数
<script>
// 箭头函数 参数->箭头->返回值
// 一个参数
let foo = v => v;
ret1 = foo(10);
console.log('ret1==>', ret1);
//0个或多个参数的箭头函数的写法，参数使用 括号，返回值使用 大括号
let bar = (x, y) => {return x+y};
ret2 = bar(1, 2);
console.log('ret2==>', ret2)
</script>3.一般函数和箭头函数的 this 指向的区别
<script>
// 箭头函数的 this 在定义的时候就已经确定了。不跟随调用的对象而改变
function foo(){console.log(this)} // 这里定义一个一般函数
let bar = () => console.log(this); // 这里定义一个箭头函数
let obj = {
foo: foo,
bar: bar,
};
foo(); // 此时的 this 指向window
obj.foo(); // 此时的 this 指向obj
bar(); // this 指向 window
obj.bar(); // this 依然指向 window
</script>5.ES6常用语法之类的定义和继承
1.ES5的定义类(了解即可)
<script>
// ES5的实例化的方式。没啥用了
// 定义一个类
function Person(){
this.name = 'leon';
this.age = 25;
}
// 定义类方法，类名.prototype.方法名
Person.prototype.showInfo = function () {
console.log(this.name + this.age)
}
</script>2.ES6的定义
<script>
// ES6的定义类的方法以及类的继承
class Person{
// 初始化的关键字
constructor(username, age, money=100000){
this.name = username;
this.age = age;
this.money = money;
}
// 类方法
showInfo(){
console.log('用户名==>', this.name, '年龄==>', this.age, '本金==>', this.money)
}
}
// 继承类，关键字 extends
class Son extends Person{
constructor(username, age){
super(); // 初始化的时候，必须使用 super() 方法
this.name = username;
this.age = age;
}
showInfo() {
super.showInfo();
}
}
let son = new Son('belmont', 35);
son.showInfo()
</script>6.ES6常用语法之对象的单体模式
<script>
// 单体对象。拥有自己的方法
let obj = {
name: 'leon',
func(){
console.log(this.name)
}
} ;
obj.func()
</script>7.Vue框架初识
<body>
<div id="app">{{ greeting }}</div>
</body>
<script>
new Vue({ // new Vue，固定用法
el: "#app", // 定位到该元素
data: { // data 固定用法。存放数据
greeting: 'Hello World' // 固定用法。接收键值对的形式，可以根据键找到值
}
})
</script>8.安装Vue
上官网找啊。直接复制就好了9.Vue常用指令v-text
<body>
<div id="app" v-text="greeting"></div> // greeting 将被使用在这里。页面将展示 'Hello v-text'
</body>
<script>
new Vue({
el: '#app',
data: {
greeting: 'Hello v-text'
}
})
</script>10.Vue常用指令v-html
<body>
<div id="app" v-html="greeting"></div>
</body>
<script>
new Vue({
el: '#app',
data: {
greeting: '<h1>Hello v-html</h1>'
}
})
</script>11.Vue常用指令v-for
<body>
<div id="app">
<ul>
<li v-for="course in courses">{{ course }}</li>
</ul>
<ul>
<li v-for="student in students">{{ student.name }}+{{ student.age }}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
courses: ['Python', 'Java', 'C#', 'Linux'],
students: [
{name: 'leon', age: 27},
{name: 'hulk', age: 25},
{name: 'func', age: 35},
]
}
})
</script>12.Vue常用指令v-if
<body>
<div id="app">
<div v-if="person=='Leon'">欢迎你，leon</div>
<div v-else-if="person=='Bel'">还钱，Bel</div>
<div v-else="person=='Bob'">Bob，你又胖了</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
// person: 'leon',
// person: 'Bel',
person: 'Bob'
}
})13.Vue常用指令v-show
<body>
<div id="app">
<div v-show="isShow">Hello Vue</div>
<div v-show="notShow">人生何处不青山</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
isShow: true,
notShow: false
}
})
</script>14.Vue常用指令v-bind
<body>
<div id="app">
<a v-bind:href="JD">指向京东</a>
<div :class="[isActive]"></div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
JD: "https://www.jd.com",
isActive: 'active',
}
})
</script>15.Vue常用指令v-on
<style>
.active {
color: green;
}
</style>
<body>
<div id="app">
<h1 :class="{ active: isActive }">贾乃亮</h1>
<!-- <button @click="changeColor">点击让贾乃亮变绿</button>-->
<button v-on:click="changeColor">点击让贾乃亮变绿</button> <!--加函数名即可-->
</div>
<script>
new Vue({
el: '#app',
data:{
isActive: false
},
methods: { // methods 声明方法
changeColor: function(){
this.isActive = !this.isActive; // 点击使其转换属性
},
}
})
</script>16.Vue常用指令v-model
<body>
<div id="app">
<input type="text" v-model="name">
<select v-model="hobby">爱好
<option>抽烟</option>
<option>喝酒</option>
<option>烫头</option>
</select>
<textarea v-model="textContent">区域默认值</textarea>
<br>
{{ name }}、 <!--展示使用-->
{{ hobby }}、
{{ textContent }}
</div>
<script>
new Vue({
el: '#app',
data: {
name: '默认值名字', // 和input之间互相同步
hobby:[], // 和 hobby 之间互相同步
textContent: [] // 和 textContent 之间互相同步
}
})
</script>17.Vue常用指令之计算属性
<body>
<h3>成绩计算示例</h3>
<div id="app">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input type="text" v-model="python"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model="vue"/></td>
</tr>
<tr>
<td>Go</td>
<td><input type="text" v-model="go"/></td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
<hr>
{{ python }}
{{ vue }}
{{ go }}
{{ sumScore }}
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
python: 88,
vue: 100,
go: 65
},
computed: { // 声明计算属性的关键字
sumScore: function () {
return this.python + this.vue + this.go
},
}
})
</script>18.Vue常用指令之侦听属性
<body>
<h3>成绩计算示例</h3>
<div id="app">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input type="text" v-model="python"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model="vue"/></td>
</tr>
<tr>
<td>Go</td>
<td><input type="text" v-model="go"/></td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
<hr>
{{ python }}
{{ vue }}
{{ go }}
{{ sumScore }}
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
python: 88,
vue: 100,
go: 65
},
computed: { // 声明计算属性的关键字
sumScore: function () {
return this.python + this.vue + this.go
},
},
watch: { // watch 关键字，python一旦发生改变
python: function () {
console.log(3);
alert('python被改变了');
}
}
})
</script>19.Vue常用指令之指令修饰符
<style>
.active {
color: green;
}
</style>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input type="text" v-model.number.lazy="python"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model.lazy="vue"/></td>
</tr>
<tr>
<td>Go</td>
<td><input type="text" v-model.trim="go"/></td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
<hr>
{{ python }}
{{ vue }}
{{ go }}
{{ sumScore }}
</div>
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
let vm = new Vue({
el: "#app",
data: {
python: 88,
vue: 100,
go: 65
},
computed: {
sumScore: function () {
console.log(1);
return this.python + this.vue + this.go;
},
},
})
</script>20.Vue常用指令之获取DOM元素
<style>
.active{
color: green;
}
</style>
</head>
<body>
<div id="app">
<div ref="myRef">贾乃亮</div>
<button v-on:click="changeColor">点击让贾乃亮变绿</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isActive: 'active'
},
methods: {
changeColor: function(){
this.$refs.myRef.className = this.isActive;
}
}
})
</script>21.Vue常用指令之自定义指令
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ box: isShow }" v-pos="leftBottom">Hello Vue!</div>
</div>
<script>
Vue.directive('pos', function (el, bindding) {
if (bindding.value) {
el.style['position'] = 'fixed';
el.style['right'] = 0;
el.style['bottom'] = 0;
}
});
new Vue({
el: '#app',
data: {
leftBottom: true,
isShow: true
}
})
</script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
