2、初始ES6及Vue
今日内容
es6的语法
let
特点:
1.局部作用域
2.不会存在变量提升
3.变量不能重复声明
const
特点:
1.局部作用域
2.不会存在变量提升
3.不能重复声明,只声明常量 不可变的量
模板字符串
tab键上面的反引号 ${变量名}来插值
let name = '未来';
let str = `我是${name}`
箭头函数
function(){} === ()=>{} this的指向发生了改变
es6的类
原型 prototype 当前类的父类(继承性)
class Person{
constructor(name){
this.name = name;
}
fav(){
}
}
Vue的基本用法
vue的介绍
前端有三大框架: 可以去github查看三个框架的 star星
框架 | 介绍 |
---|---|
vue | 尤雨溪,渐进式的JavaScript框架 |
react | Facebook公司,里面的高阶函数非常多,对初学者不用好 |
| angular | 谷歌公司,目前更新到6.0,学习angular得需要玩一下typescript
Vue angular2.0 3.0~6.0 React(高阶函数 es6)初学者不友好 |
vue的基本引入和创建
1.下载
cdn方式下载
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2.引包
<script src='./vue.js'></script>
3.实例化
//2.实例化对象
new Vue({
el:'#app', //绑定那块地
data:{
//数据属性 种子
msg:'黄瓜',
person:{
name:'wusir'
},
msg2:'hello Vue'
}
});
Vue的模板语法
可以插入任何你想插入的内容,除了if-else if-else用三元运算符代替
<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hhahda' }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? '真的': '假的' }}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>
Vue的指令系统之v-text和v-html**
v-text相当于innerText
v-html相当于innerHTML
Vue的指令系统之v-if和v-show
v-show 相当于 style.display
v-if和v-show的区别
记住:
v-if vs v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-bind 和v-on
v-bind可以绑定标签中任何属性
v-on 可以监听 js中所有事件
简写:
v-bind:src 等价于 :src
v-on:click 等价于 @click
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<!--<button v-on:click = 'handlerChange'>切换颜色</button>-->
<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
<!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
<!--<div class="box" v-bind:class = '{active:isActive}'></div>-->
<button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>
<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
<img :src="imgSrc" :alt="msg">
<div class="box" :class = '{active:isActive}'></div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
//数据驱动视图 设计模式 MVVM Model View ViewModel
//声明式的JavaScript框架
// v-bind和v-on的简便写法 : @
new Vue({
el: '#app',
data() {
//data中是一个函数 函数中return一个对象,可以是空对象 但不能不return
return {
imgSrc:'./1.jpg',
msg:'美女',
isActive:true
}
},
methods:{
handlerChange(){
// this.isActive = !this.isActive;
this.isActive = false;
},
handlerLeave(){
this.isActive = true;
}
}
})
</script>
</body>
</html>
v-for 遍历列表
v-for可以遍历列表,也可以遍历对象
在使用vue的v-for指令的时候,一定要绑定key,避免vue帮咱们计算DOM
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<ul v-if="data.status === 'ok'">
<!--v-for的优先级是最高的 diff算法-->
<li v-for = '(item,index) in data.users' :key="item.id" >
<h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>
</li>
</ul>
<div v-for = '(value,key) in person'>
{{ key }}-----{{ value }}
</div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: {
status: 'ok',
users: [
{id: 1, name: 'alex', age: 18},
{id: 2, name: 'wusir', age: 30},
{id: 3, name: 'yuan', age: 48}
]
},
person:{
name:'alex'
}
}
},
methods: {}
})
</script>
</body>
</html>
MVVM设计模式
数据驱动逻辑流程
Typora中markdown图片相对路径设置
文件-》偏好设置->
2、初始ES6及Vue的更多相关文章
- 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)
写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...
- Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期
目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...
- es6下 vue实例属性template不能使用
esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...
- ES6(vue)对象词法扩展
ES6 允许声明在对象字面量时使用简写语法,来初始化属性变量和函数的定义方法,并且允许在对象属性中进行计算操作: function getCar(make, model, value) { retur ...
- 1.Vue初始及相关Vue核心组件
1.Vue官方文档 官网文档:https://cn.vuejs.org/v2/guide/ 2.Vue-cli官方文档(脚手架) 官网文档:https://cli.vuejs.org/zh/guide ...
- 2017 年比较 Angular、React、Vue 三剑客(转载)
为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事.现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博得了很多人的关注.更重要的是,这只是一些 ...
- [译] 2017 年比较 Angular、React、Vue 三剑客
原文地址:Angular vs. React vs. Vue: A 2017 comparison 原文作者:Jens Neuhaus 译文出自:掘金翻译计划 本文永久链接:github.com/xi ...
- vue进阶:基于vue-cli创建项目(搭建手脚架)
vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- struts2中的数据类型自动转换
参考:https://blog.csdn.net/qq_35326718/article/details/72453042 https://www.cnblogs.com/aigeileshei/p/ ...
- 第二阶段:2.商业需求分析及BRD:6.商业需求文档2
BRD的三个诉求:1.项目很重要,支持.2.有价值,获得重视,纳入战略规划中.3.需要资源,横向的协调资源. 方法:知道决策层是哪些组成,同时找到合适的决策层. BRD决策分类:1.找资本类(CF ...
- 【软件】Gimp内容识别填充开启工具1.0
*源文件起初存于Gimp-Registry,后因服务器维护成本问题,Gimp将原服务器中所有文件迁移至GimpGithub *博主只是将原插件中的内容识别填充功能进行打包处理,方便大家一键启用. 下载 ...
- MySQL中的CHAR和VARCHAR到底支持多长?
最近在研究MySQL的数据类型,我们知道,选择合适的数据类型和数据长度对MySQL的性能影响是不可忽视的,小字段意味着可以MySQL可以读取更多的记录,从而加快查询速度. 网上该问题的答案有很多版本, ...
- $HDU1846\ Brave\ Game$ 博弈论
正解:博弈论 解题报告: 传送门! 巴什博奕板子题鸭$QwQ$ 就有个结论,是说当$(m+1)\mid n$时先手必败,否则必胜 这个瞎证明一下就能出来 就考虑当$(m+1)\mid 1$时,若先手取 ...
- .NET设计篇08-线程统一取消模型和跨线程访问UI
知识需要不断积累.总结和沉淀,思考和写作是成长的催化剂,输出倒逼输入 内容目录 一.线程统一取消模型1.取消令牌2.可以中断的线程1.设计一个中断函数2.创建CancellationTokenSour ...
- shopnc 二次开发问题(一)
1.关于shopnc商品详情页面多规格抢购,价格显示都是显示的抢购价格问题 路径: data/model/groupbuy.model.php 方法:getGroupbuyInfoByGoodsCom ...
- 「SP25784」BUBBLESORT - Bubble Sort 解题报告
SP25784 BUBBLESORT - Bubble Sort 题目描述 One of the simplest sorting algorithms, the Bubble Sort, can b ...
- redis 为什么是单线程,为什么速度快。
redis 5中存储方式 String.List.Set.Hash.ZSet这5种 数据库的工作模式按存储方式可分为: 硬盘数据库和内存数据库.Redis 将数据储存在内存里面,读写数据的时候都不会受 ...
- 二、Spring Cloud之注册中心 Eureka
前言 算是正式开始学习 spring cloud 的项目知识了,大概的知道Springcloud 是由众多的微服务组成的,所以我们现在一个一个的来学习吧. 注册中心,在微服务中算是核心了.所有的服务都 ...