vue学习（3）
回顾昨天内容
1.let和const
2.模板字符串 `` 插变量${变量名}
3.箭头函数 function(){} == ()=>{}
1.this的指向问题
2.arguments不能使用
4.对象单体模式
var person={
name:"张三",
fav(){ }
}
5.es6的面向对象
class Animal{
constructor(){ }//构造方法，后面不加逗号
showName(){ }//定义方法
}
前端工具介绍：
webpack：打包机，它能将我们的html、css、js,font,png进行打包，交给服务器。
loader 加载器
插件：一个功能，js文件
组件：BootStrap组件，包含js，html，css
html压缩
css压缩
js压缩
js进行混淆
图片压缩
webpage火起来以前，前端工程师都使用grunt和gulp
nodejs+webpack 热重载 有代码改变的时候，浏览器跟着变
nodejs 服务器语言
新建一个项目：
1.在cmd下，cd到项目目录下，执行：npm init --yes 初始化我们的项目，自动生成一个package.json的文件
2.安装依赖包：npm install jquery --save
如果拿到了一个新的项目：
1.cd到当前目录
2.npm install 将依赖包批量安装，如果报错可能是项目版本太久了，可以先执行一次：npm rebuild
3.npm run dev 启动项目，类似的指令还有npm start，还有重新打包命令：npm run build
淘宝镜像：
有时候用npm会因为某些原因，国外的模块下载的太慢，这时就需要用淘宝镜像的cnpm代替npm进行安装了，使用淘宝镜像，首先要安装淘宝镜像，cmd下执行：
npm install -g cnpm --registry=https://registry.npm.taobao.org
v-if指令和v-on指令
vue适合单页面应用，主要移动端。
v-if指令
<!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="app01">
{{msg}}
<div v-if='d'>哈哈哈</div>
<!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
</div>
<!-- 插值语法 --> <script src="vue.js"></script>
<script>
//vue的实例化
//MVVM Model View ViewModel
//指令系统 v-* var app=new Vue({
el:"#app01",
data:{
msg:"今天学习VUE",
d:false,
}
})
</script> </body>
</html>
v-on指令
<!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="app01">
{{msg}}
<div v-if='d'>哈哈哈</div>
<!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
<button v-on:click="qie">切换</button>
</div>
<!-- 插值语法 --> <script src="vue.js"></script>
<script>
//vue的实例化
//MVVM Model View ViewModel
//指令系统 v-* var app=new Vue({
el:"#app01",
data:{
msg:"今天学习VUE",
d:false,
},
methods:{
qie(){
this.d=!this.d;//取反 }
//相当于
// qie:function(){
// this.d=!this.d;//取反
// }
}
})
</script> </body>
</html>
v-on的简便写法：
<!-- <button v-on:click="qie">切换</button> -->
<!-- v-on的简便写法@ -->
<button @click="qie">切换</button>
指令系统
v-else指令
<div id="app01">
{{msg}}
<div v-if='d'>哈哈哈</div>
<!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
<button v-on:click="qie">切换</button> <div v-if="Math.random()>0.5">
How you see me
</div>
<div v-else>
How you don't
</div>
<!-- 刷新网页随机产生不同的内容 --> </div>
v-else-if指令
<div id="app01">
{{msg}}
<div v-if='d'>哈哈哈</div>
<!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
<button v-on:click="qie">切换</button> <div v-if="Math.random()>0.5">
How you see me
</div>
<div v-else-if="0.5>Math.random()>0.3">
How you don't
</div>
<div v-else>
emmm....
</div>
<!-- 刷新网页随机产生不同的内容 --> </div>
v-show指令
<h3 v-show="isShow">我是一个三级标题</h3>
<!-- 是修改css属性中的display，有更高的初始渲染开销，比v-if更加适合做多次切换 -->
v-bind指令
<h3 v-show="isShow" v-bind:title="t">我是一个三级标题</h3>
<!-- 是修改css属性中的display，有更高的初始渲染开销，比v-if更加适合做多次切换 -->
<img v-bind:src="SrcImage"> …… data:{
msg:"今天学习VUE",
d:false,
isShow:true,
t:"哈哈哈",
SrcImage:"./mei.jpg",
},
绑定字符串，v-bind指令的简便写法，就是省略v-bind直接：
……
<img v-bind:src="SrcImage" :alt="alt">
<!-- v-bind:省略为： -->
……
data:{
msg:"今天学习VUE",
d:false,
isShow:true,
t:"哈哈哈",
SrcImage:"./mei.jp",
alt:`页面加载于${new Date().toLocaleString()}`,//取当前时间
},
v-bind:class指令
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
background-color: green;
} </style>
…… <div id="app01"> <div class="box" v-bind:class='{box2:isGreen}'> </div>
<button @click="changecolor">切换颜色</button> </div> ……
<script src="vue.js"></script>
<script>
//vue的实例化
//MVVM Model View ViewModel
//指令系统 v-* var app=new Vue({
el:"#app01",
data:{
msg:"今天学习VUE",
d:false,
isShow:true,
t:"哈哈哈",
SrcImage:"./mei.jp",
alt:`页面加载于${new Date().toLocaleString()}`,//取当前时间
isGreen:true,
},
methods:{
changecolor(){
this.isGreen=!this.isGreen;
}
}
})
</script>
监听事件
<div id="app01">
<div class="box" v-bind:class='{box2:isGreen}'>
</div>
<button @click="changecolor">切换颜色</button>
<button @click="count+=1">加{{count}}</button>
<!-- 每点击一次加1，简单的运算 -->
</div>
……
data:{
……
count:0,
},
列表渲染
<div id="app01">
<div>
<img v-bind:src="tu">
<ul>
<li v-for="(item,i) in imgArr" @click='f(item)'>{{i+1}}</li>
</ul>
</div>
</div>
<!-- 插值语法 -->
<script src="vue.js"></script>
<script>
var app=new Vue({
el:"#app01",
data:{
imgArr:[
{id:1,src:'./1.jpg'},
{id:2,src:'./2.jpg'},
{id:3,src:'./3.jpg'},
{id:4,src:'./4.jpg'},
],
tu:"./2.jpg",
},
methods:{
f(item){
this.tu=item.src;
}
}
})
</script>
点击<li>标签切换图片显示
用vue做的轮播图
<!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>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
width: 180px;
overflow: hidden;
list-style: none;
}
ul li{
float: left;
width: 30px;
height: 30px;
line-height: 30px;
background: purple;
margin-left: 10px;
text-align: center;
color:white;
}
button{
margin-top: 10px;
margin-left: 5px;
margin-right:50px ;
}
.box{
background: red;
} </style>
</head>
<body>
<div id="app01">
<div>
<img v-bind:src="tu" @mouseenter='closebanner' @mouseleave='startbanner'>
<ul>
<li v-for="(item,i) in imgArr" @click='f(item)'
:class="{box:isred}"
@mouseenter='red(item)' @mouseleave='purple(item)'>{{i+1}}</li>
</ul>
</div>
<button @click="pre">上一张</button>
<button @click="next">下一张</button>
</div> <script src="vue.js"></script>
<script>
var app=new Vue({
el:"#app01",
data:{
imgArr:[
{id:1,src:'./1.jpg'},
{id:2,src:'./2.jpg'},
{id:3,src:'./3.jpg'},
{id:4,src:'./4.jpg'},
],
tu:"./1.jpg",
index:0,
banner:null,
isred:false,
},
//dom元素创建之前来完成的方法
//可以提前获取cookie和session
created(){
this.banner=setInterval(this.next,2000); },
methods:{
f(item){
this.tu=item.src;
},
pre(){
if(this.index==0){
this.index=this.imgArr.length;
}
this.index--;
this.tu=this.imgArr[this.index].src;
},
next(){
if(this.index==this.imgArr.length-1){
this.index=-1;
}
this.index++;
this.tu=this.imgArr[this.index].src;
},
closebanner(){
clearInterval(this.banner);
},
startbanner(){
this.banner=setInterval(this.next,2000);
},
red(item){
this.isred=true;
},
purple(item){
this.isred=false;
}, }
})
</script> </body>
</html>
做出来有缺陷，鼠标悬浮在选项上，所有选项都变红。。。。
v-html指令
……
<div>{{str}}</div> <!-- <p>嘿嘿嘿</p> -->
<div v-html='str'></div><!-- 嘿嘿嘿 -->
……
data:{
str:"<p>嘿嘿嘿</p>"
},
计算属性的使用和v-model的实现原理
计算属性
1.传统的用模板语法进行简单运算
<!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="computed">
<div>
{{msg.split('').reverse().join('')}}
</div>
<!-- 浏览器中字符串被反转了 !dlrow olleh --> </div>
<script type="text/javascript" src="vue.js"></script>
<script>
var com=new Vue({
el:"#computed",
data:{
msg:"hello world!",
},
methods:{ },
computed:{ }
})
</script>
</body>
</html>
2.通过计算属性，将模板语法中的计算，封装到computed里其中一个方法里
<!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="computed"> {{fangfa1}} </div>
<script type="text/javascript" src="vue.js"></script>
<script>
var com=new Vue({
el:"#computed",
data:{
msg:"hello world!",
},
methods:{ },
computed:{
//默认只有getter方法，有返回值的方法
fangfa1(){
return this.msg.split('').reverse().join('');
} }
})
</script>
</body>
</html>
3.计算属性：监听
computed里的方法，绑定了this.msg，一旦监听到this.msg发生了改变，与this.msg有关的数据计算的结果，也跟着改变。
<!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="computed"> {{fangfa1}}
<button @click="gai">修改</button> </div>
<script type="text/javascript" src="vue.js"></script>
<script>
var com=new Vue({
el:"#computed",
data:{
msg:"hello world!",
},
methods:{
gai(){
this.msg="hello luffy!"
}
},
computed:{
//默认只有getter方法，有返回值的方法
//计算数据属性，watch监听
fangfa1(){
return this.msg.split('').reverse().join('');
} }
})
</script>
</body>
</html>
4.computed里的方法中定义set
<!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="computed"> {{fangfa1}}
<button @click="gai">修改</button> </div>
<script type="text/javascript" src="vue.js"></script>
<script>
var com=new Vue({
el:"#computed",
data:{
msg:"hello world!",
},
methods:{
gai(){ console.log(this.fangfa1)//直接用this.fangfa1调用，则默认是使用get方法
this.fangfa1="hello luffy!"//给this.fangfa1赋值，则使用的set方法
}
},
computed:{
//默认只有getter方法，有返回值的方法
//计算数据属性，watch监听
//想要使用set，需要自定义set，写法如下：
//直接用this.fangfa1调用，则默认是使用get方法，如果
fangfa1:{
set:function(newValue){
this.msg=newValue; },
get:function(){
return this.msg.split('').reverse().join('');
}
} }
})
</script>
</body>
</html>
5.数据的双向绑定指令：v-model
<!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>
<form id="computed">
<input type="text" v-model="msg">
<h3>{{msg}}</h3> </form>
<script type="text/javascript" src="vue.js"></script>
<script>
var com=new Vue({
el:"#computed",
data:{
msg:"",
},
methods:{ },
computed:{ }
})
</script>
</body>
</html>
v-model数据双向绑定的实现原理
数据的双向绑定=数据单项绑定+UI的事件监听
计算属性的应用：set的应用场景
虽然使用set看起来是不使用set的多此一举，但是其却有着其应用场景，就是数据双向绑定的本质
<!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>
<form id="computed">
<!-- <input type="text" v-model="msg"> -->
<input type="text" v-bind:value="getValue" @input="msgChange">
<h3>{{getValue}}</h3> </form>
<script type="text/javascript" src="vue.js"></script>
<script>
var com=new Vue({
el:"#computed",
data:{
msg:"123",
},
methods:{
msgChange(e){
console.log(e.target.value);//e是事件监听对象，e.target.value是每次发生事件后的值
this.getValue=e.target.value;
}
},
computed:{ getValue:{
set:function(newValue){
this.msg=newValue;
},
get:function(){
return this.msg;
}
}
}
})
</script>
</body>
</html>
v-model只适用于表单控件里面
表单文本、多行文本、复选框、单选按钮、多选按钮、选择框……
使用案例：https://cn.vuejs.org/v2/guide/forms.html
.lazy修饰符和.number修饰符和.trim修饰符
<!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>
<form id="computed">
<input type="text" v-model="msg"> <input type="text" v-model.lazy="msg">
<!-- 加了.lazy修饰符，则不是时时监听，而是当输入完以后，完成同步 --> <input type="number" v-model.number="msg">
<!-- 只能输入数字 --> <input type="text" v-model.trim="msg">
<!-- 自动消除用户输入的收尾空白字符 --> <h3>{{msg}}</h3> </form>
<script type="text/javascript" src="vue.js"></script>
<script>
var com=new Vue({
el:"#computed",
data:{
msg:"123", },
methods:{ },
computed:{ }
})
</script>
</body>
</html>
vue学习（3）的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue学习笔记（二）——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习2：模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- idea 方便的设置代码段
使用快捷键(ctrl+alt+s)找到:从idea的菜单File->Settings->Editor->Live Templates 先添加Template Group,然后添加Li ...
- spec文件中的 %pre %post %preun %postun
转载http://meinit.nl/rpm-spec-prepostpreunpostun-argument-values RPM has 4 parts where (shell) scripts ...
- ConnectTimeout和ReadTimeout所代表的意义
参考:ConnectTimeout和ReadTimeout所代表的意义 ConnectTimeout 指的是建立连接所用的时间,适用于网络状况正常的情况下,两端连接所用的时间. 在java中,网络状况 ...
- Sql server 系统表
sql server系统表详细说明 SQL Server 用户库中系统表说明 名称 说明 备注 syscolumns 每个表和视图中的每列在表中占一行,存储过程中的每个参数在表中也占一行. sys ...
- orcale建表脚本
declare v_cnt number; V_SQL VARCHAR2 (500) := '';begin select count(*) into v_cnt from dual where ex ...
- How to create DMG on macOS
hdiutil create -srcfolder /users/test1/ -volname test1 /users/test/test1.dmg
- 转载 大话pcie
原文https://blog.csdn.net/abcamus/article/details/76167747 一.PCIe DMA机制 PCIe控制器也提供DMA(Direct Memory ac ...
- 用于Azure功能的Visual Studio 2017工具
今天我们很高兴地宣布发布第一个预览的Visual Studio 2017工具的Azure功能.这个预览介绍了一些令人兴奋的变化,我们以前的版本.此外,除了支持Visual Studio 2017之外, ...
- .resx文件与.cs文件的自动匹配
图中myCommands.Resx是<DependentUpon> myCommands.cs文件的. 如何为其他的.cs文件添加类似的资源文件呢? 其实挺简单, 添加与.cs文件同名的资 ...
- PHP——base64的图片转为文件图片
前言 网上很多,真的是有毒吧,一个那么简单至于写的乱七八糟的嘛,醉了. 代码 具体都写注释中了,不懂的可以评论或者私信我 public function upload() { //接收前台的值 $ba ...