Vue 简单的总结一
let 变量
1. 局部作用域
2. 不会存在变量提升
3. 变量不能重复声明
const 变量
1. 局部作用域
2. 不会存在变量提升
3. 变量不能重复声明
4. 只能声明常量,不可变得量
this 指向
与vm实例没有任何关系。而是与箭头函数和普通函数的区别。总结:
不是看到{ }就是一个对象
1、es5的普通函数,this指向是指向了调用者,比如vue实例的方法(在methods中声明了一个方法)是由vue实例vm调用的,所以this指向vm。 (vm 是 new Vue({}) 的返回值) 2、箭头函数的this指向它的调用者所在的上下文,也就是vm实例所在的上下文(定义vm的父类),即window.
3、箭头函数的会使当前函数的this指向当前对象的父类,当一个方法中再套一个方法 this 指向就会改变,(定时器, ajax),在methods方法和computed、data等中this指向不会改变
<script> 比如这个jquery中的定时器方法setInterval 它的this指向改变了 因为它是juery调用,created是vue种的钩子语法 所以 使用箭头函数使当前this指向它的父级 即vue
created() {
//this指向问题 能用箭头函数 不要用匿名函数
setInterval(() => {
// console.log(this);
this.currentIndex++;
if (this.currentIndex == 4) {
this.currentIndex = 0;
}
}, 2000);
</script>
模板字符串
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> # 反转注意只有list类型才有reverse方法 <script>
new Vue({
el:'#app',
data:{
msg:'hhhh',
person:{
name:'wxd'
},
msg2:'hello vue',
text:'<h1>季红</h1>'
}
}) </script>
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
<div class="box" v-bind:class = '{active:isActive}'></div> 当isActive 为真这个标签就会加上active这个属性 如果为假就不会有这个属性
<!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可以遍历列表,也可以遍历对象 v-for的优先级是最高的
在使用vue的v-for指令的时候,一定要绑定key(key前要加:号),避免vue帮咱们计算DOM 绑定key对象如果有id绑定id 如果没有id绑定index
<!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>
watch 和 computed
watch可以监听单个属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<button @click = 'clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
msg:"alex",
age:18
} },
methods:{
clickHandler(){
this.msg = "wusir"
}
},
watch:{
//watch单个属性,如果想监听多个属性 声明多个属性的监听
'msg':function (value) { console.log(value); if (value === 'wusir'){
alert(1);
this.msg = '大武sir'
}
},
'age' :function (value) { }
}
})
</script>
</body>
</html>
计算属性 computed
监听多个属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ myMsg }}</p>
<button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
msg: "alex",
age: 18
} },
created() {
//定时器 ajax 库 function(){}
setInterval(() => { })
},
methods: {
clickHandler() {
//this的指向就是当前对象
this.msg = "wusir";
this.age = 20;
},
clickHandler: function () {
console.log(this);
} },
computed: {
myMsg: function () {
//业务逻辑 // 计算属性默认只有getter方法
return `我的名字叫${this.msg},年龄是${this.age}`;
}
}
}) console.log(vm);
</script>
</body>
</html>
MVVM 设计模式
数据驱动逻辑流程
轮播图
<body>
<div id="app">
<img :src="data:images[currentIndex].imgSrc" alt="" @click='imgHandler'>
<br>
<button @click='prevHandler'>上一张</button>
<button @click='nextHandler'>下一张</button> </div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
images: [
{id: 1, imgSrc: './images/1.jpg'},
{id: 2, imgSrc: './images/2.jpg'},
{id: 3, imgSrc: './images/3.jpg'},
{id: 4, imgSrc: './images/4.png'} ],
currentIndex: 0
}
},
methods: {
nextHandler(e) { //这里的e 表示js中的event,(e.target)表示作用的对象
this.currentIndex++;
//更改图片地址
if (this.currentIndex == 4) {
this.currentIndex = 0;
}
},
prevHandler(e) { },
imgHandler(e) {
console.log(e.target);
console.log(this);
}
},
//组件创建完成, ajax vue的钩子函数 即当vue 初始化完成 这个函数就执行了
created() {
//this指向问题 能用箭头函数 不要用匿名函数
setInterval(() => {
// console.log(this);
this.currentIndex++;
if (this.currentIndex == 4) {
this.currentIndex = 0;
}
}, 2000); // let _this = this;
// setInterval( function () {
// console.log(_this);
// },1000) }
})
</script>
</body>
侦听器 watch (单个监听 这个了解 我们使用计算属性 )当监听的单位发生改变时 立即执行watch这个函数
<body>
<div id="app">
<p>{{ msg }}</p>
<button @click = 'clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
msg:"alex",
age:18
} },
methods:{
clickHandler(){
this.msg = "wusir"
}
},
watch:{
//watch单个属性,如果想监听多个属性 声明多个属性的监听 这里的msg 就是上面的msg
'msg':function (value) { console.log(value); //这个value 是上面发生改变的msg值 if (value === 'wusir'){
alert(1);
this.msg = '大武sir'
}
},
'age' :function (value) { }
}
})
</script>
</body>
计算属性 computed 可监听多个单位属性 会监听data中所有的对象属性
他会产生缓存,当监听变量发生改变的时候会在缓存中寻找,减少内存开销
<body>
<div id="app">
<p>{{ myMsg }}</p> // 使用时直接将computed中的方法拿上来
<button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
msg: "alex",
age: 18
} },
created() {
//定时器 ajax 库 function(){}
setInterval(() => { })
},
methods: {
clickHandler() {
//this的指向就是当前对象
this.msg = "wusir";
this.age = 20;
},
clickHandler: function () {
console.log(this);
} },
computed: {
myMsg: function () {
//业务逻辑 // 计算属性默认只有getter方法
return `我的名字叫${this.msg},年龄是${this.age}`;
}
}
}) console.log(vm);
</script>
Vue 简单的总结一的更多相关文章
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue简单实现
vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,
- html vue简单
1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果
在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...
- vue(2)—— vue简单语法运用,常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
- vue简单介绍
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- vue简单demo
为了学习基础语法,我并没有用vue-cli脚手架来vue init [基于什么类型] [项目名称]初始化项目,而是直接<script>../vue.js</script> & ...
- parcel vue 简单使用
1.安装依赖 yarn global add parcel-bundler yarn add babel-preset-env --dev yarn add parcel-plugin-vue --d ...
随机推荐
- Chrome浏览器导入数字证书
1.打开 chrome ,点击 右上角的选项图标,在下拉列表中找到 设置 . 2.在设置页面中,滚动到页面的最底部,找到,并点击显示高级设置,找到 HTTPS/SSL 这一项,点击 管理证书 按键.
- 启动tomcat时出现The specified JRE installation does not exist 如何解决?
卸载JDK1.6,安装JDK1.7,启动tomcat6.0提示 The specified JRE installation does not exist 如何解决? window -->pre ...
- linux rsync-文件同步和数据传输工具
一.rsync的概述 rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync是Linux系统下的文件同步和数据传输工具,它采用“rsync” ...
- Go语言开发中MongoDB数据库
伴随着移动端的兴起,Nosql数据库以其分布式设计和高性能等特点得到了广泛的应该用,下面将介绍下Nosql中的mongoDB在Go语言中的应用,在开发前,有必要了解下基础知识 在开发前,导入开发需要用 ...
- 西交利物浦大学Java PAPER CODE: CSE105/12-13/S1/Resit Coursework
Question 6:What is an accessor method?What is a mutator method? 答案参考:http://www.xmsydw.com Number An ...
- 使用 minio 搭建私有对象存储云。aws-php-sdk 操作object
How to use AWS SDK for PHP with Minio Server aws-sdk-php is the official AWS SDK for the PHP program ...
- POJ1251 Jungle Roads
解题思路:看懂题意是关键,Kruskal算法,最小生成树模板. 上代码: #include<cstdio> #include<cstring> #include<algo ...
- 神奇的TextField(1)
先看一大段测试代码,每个小方法的注释行是输出结果. private var text_content:TextField; private function textFieldDemo():void{ ...
- HihoCoder 1053 居民迁移
居民迁移 时间限制:3000ms 单点时限:1000ms 内存限制:256MB 描述 公元2411年,人类开始在地球以外的行星建立居住点.在第1326号殖民星上,N个居住点分布在一条直线上.为了方便描 ...
- wifi文件传输
步骤: 1.下载CocoaHTTPServer 2.解压后,将CocoaHTTPServer-master目录下的Core导入工程. 3.打开Samples/SimpleFileUploadServe ...