文章目录
- 一、VSCode的安装及创建
- 二、ES6简介
- 三、ES6基本语法
- 1、let声明变量
- 2、const声明常量(只读变量)
- 3、解构赋值
- 4、模板字符串
- 5、声明对象简写
- 6、定义方法简写
- 7、对象拓展运算符
- 8、箭头函数
- 四、Vue介绍
-
- 五、Vue基本语法
- 1、基本数据渲染和指令
- 2、双向数据绑定
- 3、事件
- 4、修饰符
- 5、条件渲染
- 6、列表渲染
- 六、组件
-
- 七、实例生命周期
- 八、路由
-
- 九、axios
- 1、页面引入js文件
- 2、创建json文件,模拟数据
- 3、编写js
- 4、显示数据
- 十、element-ui
一、VSCode的安装及创建
1、下载地址
https://code.visualstudio.com/
2、安装
一路下一步。
3、插件安装
为方便后续开发,建议安装如下插件(红色矩形框标记的插件)
5、创建项目
vscode本身没有新建项目的选项,所以要先创建一个空的文件夹,如vscode2020。
然后打开vscode,再在vscode里面选择 文件 -> 打开文件夹,这样才可以创建项目。
6、保存工作区
打开文件夹后,选择“ 文件 -> 将工作区另存为…”,为工作区文件起一个名字,存储在刚才的文件夹下即可
7、新建文件夹和网页
8、预览网页
以文件路径方式打开网页预览
需要安装“open in browser”插件:
文件右键 -> Open In Default Browser
以服务器方式打开网页预览
需要安装“Live Server”插件:
文件右键 -> Open with Live Server
9、设置字体大小
左边栏Manage -> settings -> 搜索 “font” -> Font size
二、ES6简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
es6是一套标准,一套规范
JavaScript很好遵循了这套规范
三、ES6基本语法
ES标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
1、let声明变量
创建 let.html
<script>
{
var a = 0
let b = 1
}
console.log(a)
console.log(b)
</script>
<script>
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m)
console.log(n)
</script>
2、const声明常量(只读变量)
创建 const.html
<script>
const PI = "3.1415926"
PI = 3
const MY_AGE
</script>
3、解构赋值
创建 解构赋值.html
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
<script>
let a = 1, b = 2, c = 3
console.log(a, b, c)
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)
</script>
<script>
let user = {name: 'Helen', age: 18}
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
let { name, age } = user
console.log(name, age)
</script>
4、模板字符串
创建 模板字符串.html
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
<script>
let str1= `hello,
es6 demo up!`
console.log(str1)
</script>
<script>
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
</script>
<script>
function f(){
return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);
</script>
5、声明对象简写
创建 声明对象简写.html
<script>
const age = 12
const name = "Amy"
const person1 = {age: age, name: name}
console.log(person1)
const person2 = {age, name}
console.log(person2)
</script>
6、定义方法简写
创建 定义方法简写.html
<script>
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi()
</script>
7、对象拓展运算符
创建 对象拓展运算符.html
拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
<script>
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)
</script>
8、箭头函数
创建 箭头函数.html
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
参数 => 函数体
<script>
var f1 = function(m) {
return m
}
console.log(f1(2))
var f2 = m => m
console.log(f2(8))
var f3 = function(a,b) {
return a+b
}
console.log(f3(1,2))
var f4 = (a,b) => a+b
console.log(f4(2,2))
</script>
箭头函数多用于匿名函数的定义
四、Vue介绍
1、Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
官方网站:https://cn.vuejs.org
2、初始Vue.js
创建 01 vue入门.html
<div id="app">
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
在vs code中创建代码片段:
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段:vue-html.code-snippets
注意:制作代码片段的时候,字符串中如果包含文件中复制过来的“Tab”键的空格,要换成“空格键”的空格
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
五、Vue基本语法
1、基本数据渲染和指令
创建 03 指令v-bind.html
你看到的 v-bind
特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind
指令,它的简写的形式就是一个冒号(:)
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}
<h1 v-bind:title="message">
{{content}}
</h1>
<h1 :title="message">
{{content}}
</h1>
2、双向数据绑定
创建 04 指令v-model.html
双向数据绑定和单向数据绑定:使用 v-model
进行双向数据绑定
data: {
searchMap:{
keyWord: '尚硅谷'
}
}
<input type="text" v-bind:value="searchMap.keyWord">
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是:{{searchMap.keyWord}}</p>
3、事件
创建 05 vue事件操作.html
需求:点击查询按钮,按照输入框中输入的内容查找公司相关信息
data: {
searchMap:{
keyWord: '尚硅谷'
},
result: {}
},
methods:{
search(){
console.log('search.....')
},
f1() {
console.log('f1.....')
}
}
html中增加 button 和 p
使用 v-on
进行数件处理,v-on:click
表示处理鼠标点击事件,事件调用的方法定义在 vue 对象声明的 methods 节点中
<button v-on:click="search()">查询</button>
<p>您要查询的是:{{searchMap.keyWord}}</p>
简写
<button @click="search()">查询1</button>
4、修饰符
创建 06 vue修饰符.html
修饰符 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,.prevent
修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
即阻止事件原本的默认行为
data: {
user: {}
},
methods: {
onSubmit() {
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}
<form action="save" v-on:submit.prevent="onSubmit">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>
5、条件渲染
创建 07 vue指令v-if.html
v-if
:条件指令
data: {
ok: false
}
注意:单个复选框绑定到布尔值
<input type="checkbox" v-model="ok">同意许可协议
<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>
6、列表渲染
创建 08 vue指令v-for.html
v-for
:列表循环指令
例1:简单的列表渲染
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
<li v-for="(n, index) in 10">{{ n }} -- {{ index }} </li>
</ul>
例2:遍历数据列表
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
<table border="1">
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
六、组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
1、局部组件
创建 09 vue组件.html
定义组件
var app = new Vue({
el: '#app',
components: {
'Navbar': {
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
使用组件
<div id="app">
<Navbar></Navbar>
</div>
2、全局组件
创建 10 vue组件全局组件.html
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
定义全局组件:components/Navbar.js
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
七、实例生命周期
创建 11 vue生命周期.html
data: {
},
created() {
debugger
console.log('created....')
},
mounted() {
debugger
console.log('mounted....')
}
八、路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用。
创建 12 vue路由.html
1、引入js
Vue.js 路由需要载入 vue-router 库
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
2、编写html
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<router-view></router-view>
</div>
3、编写js
<script>
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
const routes = [
{ path: '/', redirect: '/welcome' },
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router
})
</script>
九、axios
axios是独立的项目,不是vue里面的一部分,使用axios经常和vue 一起使用,实现ajax操作。
创建 05-axios.html
1、页面引入js文件
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
注意:测试时需要开启后端服务器,并且后端开启跨域访问权限
2、创建json文件,模拟数据
创建 data.json 文件
{
"sucess":true,
"code":20000,
"message":"成功",
"data":{
"items":[
{"name":"lucy","age":20},
{"name":"mary","age":30},
{"name":"jack","age":40}
]
}
}
3、编写js
data: {
userList:[]
},
created() {
this.getUserList()
},
methods:{
getUserList() {
axios.get("data.json")
.then(response =>{
this.userList = response.data.data.items
console.log(this.userList)
})
.catch(error =>{
})
}
}
4、显示数据
<div id="app">
<div v-for="user in userList">
{{user.name}} -- {{user.age}}
</div>
</div>
十、element-ui
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和构建
官网: http://element-cn.eleme.io/#/zh-CN
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)