Day3 - 前端技术-ES6和Vue

最新推荐文章于 2022-09-23 16:34:00 发布

weixin_39505091

最新推荐文章于 2022-09-23 16:34:00 发布

阅读量234

点赞数

分类专栏：在线教育项目开发

本文链接：https://blog.csdn.net/weixin_39505091/article/details/106302778

版权

在线教育项目开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一. VsCode安装及使用

下载地址：https://code.visualstudio.com/Download
安装插件：
在这里插入图片描述
在 vscode 中创建工作区：

在本地新建空文件夹；
使用 vscode 菜单中的【文件-打开文件夹…】打开刚才创建的文件夹；
使用 vscode 菜单中的【文件-工作区另存为…】选中刚才的文件夹，填写工作区名称，完成工作区创建。

创建 demo 示例：

选中工作区，创建文件夹 demo；
选中 demo 文件夹，创建文件 hello.html；
随便写句：< h1> hello world <\h1>；
在文件中右键，选择【Open With Live Server】（就是刚才安装的一个插件）即可查看效果。

二. ES6语法

1. ES6是什么

ES6全称ECMA Script 6.0，是浏览器脚本语言的一套标准。JavaScript是满足该标准的一种语言。ES6是2015年刚推行的，相比于ES5语法更简洁，但浏览器兼容性不好。

2. 变量的定义

（1）let与var的区别

let 定义的变量有作用范围，var定义的变量无作用范围；
let 不能重复定义同一个变量，var可重复定义变量。

<script>
	{
	    var a = 1
	    let b = 2
	}
	console.log(a)
	console.log(b) // Uncaught ReferenceError: b is not defined
</script>

<script>
    var a = 1
    var a = 10
    let b = 2
    let b = 20 //Uncaught SyntaxError: Identifier 'b' has already been declared
</script>

（2）常量的定义

常量定义必须初始化；
常量定义后不能改变。

<script>
	const PI = "3.1415"
</script>

3. 解构赋值

解构赋值包括数组解构和对象解构，能够很方便地进行变量赋值。

<script>
	//数组解构
    let [a, b, c] = [1, 2, 3]
    console.log(a, b, c) // 1 2 3
    
    //对象解构
    let user = {"name": "lucy", "age": 20}
    let {name, age} = user // 注意这里大括号中的变量必须为name和age,否则无法识别
    console.log(name, age) // lucy 20
</script>

4. ` 符号的作用

`符号可实现换行字符串；
`符号中可通过${}调用方法；
`符号中可通过${}调用方法

<script>
    // `符号可实现换行字符串
    let str1 = `hello 
world!`
    console.log(str1)

    // `符号中可通过${}获取变量
    let name = "lucy"
    let age = 20
    let str2 = `my name is ${name}, and my age is ${age}.`
    console.log(str2)

    //`符号中可通过${}调用方法
    function func() {
        return "hello world!"
    }
    console.log(`${func()}`)
</script>

在这里插入图片描述

5. 对象

（1）对象定义

<script>
    let name = "lucy"
    let age = 20
    let user = {name, age} // user = {name: name, age: age}
    console.log(user) // {name: "lucy", age: 20}
</script>

（2）对象拷贝
通过 … 实现对象的值拷贝

<script>
    let person1 = {name: "lucy", age: 20}
    let person2 = {...person1} //值拷贝
    person2.age = 22
    console.log(person1) //{name: "lucy", age: 20}
    console.log(person2) //{name: "lucy", age: 22}
</script>

（3）对象合并
通过 … 将两个对象合并为一个对象

<script>
    let name = {name: "lucy"}
    let age = {age: 20}
    let person = {...name, ...age} 
    console.log(person) //{name: "lucy", age: 20}
</script>

6. 方法的编写

<script>
    const person = {
        sayHi() { // 传统为sayHi:function()
            console.log("hello world")
        },
        //sayHi2() ...
    }
    //调用
    person.sayHi()
</script>

7. 箭头函数

箭头函数提供了更简洁的函数编写方式，多用于匿名函数的编写。
写法：函数名 = 参数 => 函数体

<script>
    //传统方法
    var f1 = function(a, b) {
        return a + b;
    }
    console.log(f1(1, 2)) //3

    // es6
    f2 = (a, b) => a +b;
    console.log(f2(10, 20)) //30
</script>

三. Vue 基础语法

Vue是前端框架。

1. Vue入门案例

使用 vscode 快捷键 “!” 生成基础代码；
引入 vue.js 文件；
写一个 < div>< /div> 用于存放页面显示的代码；
在 < script> < /script> 中 new 一个 Vue 绑定之前的 div;
在< div>< /div> 中使用 {{xxxx}} 进行取值。

<body>
   <script src="vue.min.js"></script>
   <div id="app"> {{message}} </div>
   <script>
       new Vue({
           el: '#app', //绑定vue的作用范围
           data: { //定义页面中显示的数据
               message: "Hello Vue!"
           }
       })
   </script>
</body>

2. 数据绑定

Vue 中的数据绑定包括单向绑定和双向绑定。单向绑定通过 vue-bind: 实现，可以简写为：；双向绑定通过 v-model 实现。

<body>
    <script src="vue.min.js"></script>
    <div id="app"> 
        <!--单向绑定-->
        <input type="text" :value="content">
        </input>
        <!--双向绑定-->
        <input type="text" v-model="content">
        </input>
        <h1 :title="message">
            {{content}}
        </h1>
    </div>
    <script>
        new Vue({
            el: '#app', //绑定vue的作用范围
            data: { //定义页面中显示的数据
                content: "首页面",
                message: "页面加载于" + new Date().toLocaleString()
            }
        })
    </script>
</body>

单向绑定效果：
在这里插入图片描述
双向绑定效果：

3. 事件绑定

v-on: 或 @ 实现按钮的事件绑定。

<body>
    <script src="vue.min.js"></script>
    <div id="app"> 
        <button v-on:click="search">查询</button>
        <button @click="search">查询</button>
    </div>
    <script>
        new Vue({
            el: '#app', //绑定vue的作用范围
            data: { //定义页面中显示的数据
                content: "首页面",
                message: "页面加载于" + new Date().toLocaleString()
            },
            methods: {
                search() {
                    console.log("search...")
                }
            }
        })
    </script>
</body>

4. 条件指令

v-if 与 v-else 的使用。（也可以使用 v-show）
区别：v-if是惰性加载的，只有条件第一次为真才加载；v-show是在页面刚开始渲染就已经加载了。

<body>
    <script src="vue.min.js"></script>
    <div id="app"> 
        <input type="checkbox" v-model="ok">同意条款？</input>
        <h1 v-if="ok">同意</h1> 
        <h1 v-else>不同意</h1>
        <!--
            <h1 v-show="ok">同意</h1>
            <h1 v-show="!ok">同意</h1>
        -->
    </div>
    <script>
        new Vue({
            el: '#app', //绑定vue的作用范围
            data: { //定义页面中显示的数据
                ok: false,
            }
        })
    </script>
</body>

5. 循环指令

<body>
    <script src="vue.min.js"></script>
    <div id="app"> 
        <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app', //绑定vue的作用范围
            data: { //定义页面中显示的数据
                userList: [
                    {
                        id: 1, name: "bobo", age: 20
                    }, {
                        id: 2, name: "mary", age : 16
                    }, {
                        id: 3, name: "Lili", age: 18
                    }
                ]
            }
        })
    </script>
</body>

在这里插入图片描述

6. Vue生命周期

created：页面渲染之前执行；
mounted：页面渲染之后执行。

weixin_39505091

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day3 - 前端技术-ES6和Vue

文章目录一. VsCode安装及使用二. ES6语法1. ES6是什么2. 变量的定义3. 解构赋值4. ` 符号的作用5. 对象6. 方法的编写7. 箭头函数三. Vue 基础语法1. Vue入门案例2. 数据绑定3. 事件绑定4. 条件指令5. 循环指令一. VsCode安装及使用下载地址：https://code.visualstudio.com/Download安装插件：在 vscode 中创建工作区：在本地新建空文件夹；使用 vscode 菜单中的【文件-打开文件夹…】打开刚
复制链接

扫一扫