尚硅谷尚医通项目整理03--前端知识01
作者:互联网
VSCode的安装与使用
ECMASript 6
介绍
- ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准, 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
- ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)
箭头函数
提供了更加简洁的函数书写方式
参数=>函数体
箭头函数多用于匿名函数的定义
//传统方式定义函数
var f1 = function(a) {
return a
}
//console.log(f1(3))
//es6使用箭头函数定义
//参数 => 函数体
var f2 = a => a
//console.log(f2(4))
// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var f3 = function(m,n) {
return m+n
}
//es6
var f4 = (m,n) => m+n
console.log(f4(4,5))
vue入门
介绍
- Vue.js 是一款流行的 JavaScript 前端框架,目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层,同时,它也能方便地获取数据更新,实现视图与模型的交互。
<body>
<script src="vue.min.js"></script>
<div id="app">
<!-- 插值表达式-->
{{message}}
</div>
<script>
new Vue({
el:'#app',
data: {
message:'hello vue'
}
})
</script>
</body>
- 这就是声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,这里的核心思想就是没有繁琐的DOM操作,例如jQuery中,我们需要先找到div节点,获取到DOM对象,然后进行一系列的节点操作
基本语法
- 基本数据渲染和指令
<script>
new Vue({
el: '#app',
data: {
msg:'color:green;'
}
})
</script>
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写冒号(:)
<div v-bind:style="msg">单向绑定</div>
<div :style="msg">单向绑定</div>
- 双向数据绑定
- 什么是双向数据绑定?
当数据发生变化的时候,视图也会跟着发生变化
数据模型发生了改变,会直接显示在页面上
当视图发生变化的时候,数据也会跟着同步变化
用户在页面上的修改,会自动同步到数据模型中去
- 什么是双向数据绑定?
<div id="app">
{{keyword}}
<br/>
<input type="text" :value="keyword"/>
<br/>
<input type="text" v-model="keyword"/>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword:'尚硅谷'
}
})
</script>
- 事件绑定
<div id="app">
<button v-on:click="show()">事件绑定1</button>
<button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
show() {
console.log("show.....")
}
}
})
</script>
- 条件渲染
<div id="app">
<input type="checkbox" v-model="ok"/>
<br/>
<div v-if="ok">选中了</div>
<div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
- 列表渲染
<div id="app">
<div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
<div v-for="(user,index) in userList">
{{index}} -- {{user.name}} -- {{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[ {"name":"lucy","age":20},{"name":"mary","age":30}]
}
})
</script>
axios
- axios是独立于vue的一个项目,可以用于浏览器和node.js中发送ajax请求
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[]
},
created() { //在页面渲染之前执行
//调用方法,得到返回json数据
this.getList()
},
methods:{
getList() {
//使用axios方式ajax请求
axios.get("user.json")
.then(response => {//请求成功
//console.log(response)
this.userList = response.data.data.items
console.log(this.userList)
})
.catch(error => {
console.log(error)
}) //请求失败
}
}
})
</script>
element-ui
- element-ui 是饿了么前端出品的基于 Vue.js的后台组件库,方便程序员进行页面快速布局和构建
Node.js
JavaScript引擎
- 浏览器的内核包括两部分核心:
DOM渲染引擎
JavaScript解析引擎 - 介绍
Node.js是一个基于Chrome V8引擎的JavaScript运行环境:即Node.js内置了Chrome的V8 引擎,可以在Node.js环境中直接运行JavaScript程序。
标签:03,01,console,尚医通,el,JavaScript,js,Vue,data 来源: https://blog.csdn.net/sakura824/article/details/121049077