vue 基础（一）
一 vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
1.Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
2.View指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
3.ViewModel指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，
负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。
二.大致的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
// 创建vm对象
var vm = new Vue({
el: "#app",
data: {
name:"大标题",
age:16,
},
})
}
</script>
</head>
<body>
<div id="app">
<!-- 在双标签中显示数据要通过{{ }}来完成 -->
<h1>{{name}}</h1>
<p>{{age}}</p>
<!-- 在表单输入框中显示数据要使用v-model来完成 -->
<input type="text" v-model="name">
</div>
</body>
</html>
1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}
2. 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值
则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
3. 双花括号仅用输出文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出.
v-html必须在html标签里面作为属性写出来.
<span v-html="img"></span>
<script>
let vm = new Vue({
el:".app",
data:{
img:'<img src="data:images/shendan.png">',
}
})
</script>
4.在输出内容到普通标签的使用{{ }}还支持js代码。
<h1>{{str1.split("").reverse().join("")}}</h1>
5. 支持js的运算符
<h1>{{num1+3}}</h1>
6.三元运算符,类似于python里面的三元表达式
三元运算符的语法:
判断条件 ? 条件为true : 条件为false的结果
<h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>
python 三元表达式[三目运算符]的语法:
a if 条件 else b
7 .图片标签
<span v-html="img"></span>
<img :src="img2" alt="" width="200px"> <!-- 冒号：表示 设置属性 --> data:{ // data 相当于 model
img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
img2:'img/1.png' , //用设置属性的方法 :src='img2'
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<span v-html="img"></span>
<img :src="img2" alt="" width="200px"> <!-- 冒号：表示 设置属性 -->
<img v-bind:src="img2" width="50"> <!--1.0版本用 v-bind： 设置属性-->
</div> <script>
// 页面加载完执行
window.onload=function (ev) { let vm = new Vue({
// 至少两个数据el 和data
el:'#app', //通过css 选择器 确定vue要控制的范围
data:{ // data 相当于 model
img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
img2:'img/1.png' , //用设置属性的方法 :src='img2'
} }) }
</script> </body>
</html>
图片标签
常用指令
1.指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
vue1.x写法 ------> vue2.x的写法
v-html ------> {{ }}
v-bind:属性名 ----> :属性 表示： 设置属性
v-on:事件名 ----> @事件名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<span v-html="img"></span>
<p v-html="{{title}}"></p>
<img v-bind:src="img2" width="50"> <!--1.0版本用 v-bind： 设置属性-->
<button v-on:click="func">点击</button> <!-- 点击事件 -->
<button @click="(num<10)?(num):(num-10)">点击{{num}}</button> <!-- 点击事件 使用了三元运算符 -->
</div> <script>
// 页面加载完执行
window.onload=function (ev) { let vm = new Vue({
// 至少两个数据el 和data
el:'#app', //通过css 选择器 确定vue要控制的范围
data:{ // data 相当于 model
img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
title:"hello world",
num:10
},
methods:{
func:function () {
alert("你点我干嘛！");
}
} }) }
</script> </body>
</html>
2. 操作属性
格式：
<标签名 :标签属性="data属性"></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 -->
3.事件绑定
有两种写法，@事件名 和 v-on:事件名
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>
1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>
2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
案例1 ：
知识点：
1. v-model input 框
2. @click 点击事件
3. 三元运算符
核心代码：
<button @click="num+=1">添加商品</button>
<input type="text" v-model="num">
<button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<script>
// 页面加载完执行
window.onload=function (ev) { let vm = new Vue({
// 至少两个数据el 和data
el:'#app', //通过css 选择器 确定vue要控制的范围
data:{ // data 相当于 model
num:10
} }) }
</script>
<div id="app"> <button @click="num+=1">添加商品</button>
<input type="text" v-model="num">
<button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
</div> </body>
</html>
商品增减
4 操作样式
1.控制标签class类名
格式：
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组
添加class类名，值是一个对象
<style>
.box1{color: red;border: 1px solid #000;}
.box2{background-color: orange;font-size: 32px;}
</style>
<!---直接给标签设置class属性时，用的是 单花括号 -->
<p :class="{box1:mycls1}">段落一</p>
<p @click="mycls3=!mycls3" :class="{box2:mycls3,box1:mycls2,}">段落一</p> data:{ // data 相当于 model
mycls1:false, // class属性设置是 bool
mycls2:true,
mycls3:true
}
{
class类1:布尔值变量1,
class类2:布尔值变量2,
}
2. 一个属性间的来回切换
<style>
.box4{
background-color: red;
}
.box5{
color: green;
}
</style>
<div id="app2">
<!---通过点击事件来回的切换样式 ->
<!---给某个标签来回切换样式 点击事件，对样式进行取反 ，再给某个标签设置该样式就可以来回切换该样式 -->
<button @click="mycls.box5=!mycls.box5">改变背景</button>
<button @click="mycls.box4=!mycls.box4">改变字体颜色</button> <!--mycls3=!mycls3 表示取反 ，用于来回在该属性之间进行切换-->
<p :class="mycls">你好啊</p>
</div>
<script>
let vm2=new Vue({
el:"#app2",
data:{ mycls:{
box4:false,
box5:true
}
}
})
</script>
3. 批量给元素增加多个class样式类
<style>
.box4{
background-color: red;
}
.box5{
color: green;
}
</style> <!-- 批量给元素增加多个class样式类 -->
<style>
.box6{background-color: red;}
.box7{color: green;}
.box8{border: 1px solid yellow;}
</style> <div id="app3">
<p :class="[mycls1,mycls2]">第3段落</p>
</div>
<script>
let vm3=new Vue({
el:"#app3",
data:{ mycls1:{
box6:false,
box7:true
},
mycls2:{
box8:true
}
}
})
</script>
2 控制标签style样式
格式1：值是json对象，对象写在元素的:style属性中
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
格式2：值是对象变量名，对象在data中进行声明
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
格式3：值是数组
<div v-bind:style="[style1, style2]"></div>
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.box1{color: red;border: 1px solid #000;}
.box2{background-color: orange;font-size: 32px;}
</style>
</head>
<body> <!--方式一-->
<div id="box1">
<p :style="{color:mycolor,backgroundColor:mybg}">第一段内容</p> </div> <br>
<script> var vm1= new Vue({
el:"#box1",
data:{
mycolor:'red',
mybg:'pink'
}
}) </script> <!--方式二-->
<div id="box2">
<p :style="mystyle">第一段内容</p> </div> <br>
<script> var vm2= new Vue({
el:"#box2",
data:{
mystyle:{
color:"red",
backgroundColor:"pink"
}
}
}) </script> <!--方式三：-->
<div id="box3">
<div :style="[mystyle,mystyle2]">第一段内容</div> </div> <br>
<script>
var vm3= new Vue({
el:"#box3",
data:{
mystyle:{
color:"red",
backgroundColor:"pink"
},
mystyle2:{
height:"400px",
width:"400px"
} }
}) </script>
例子
3 条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
1. v-if
<!-- vue对象最终会把条件的结果变成布尔值 -->
<h1 v-if="ok">Yes</h1>
data:{
ok:false // true则是显示，false是该标签不会出现，不只是隐藏
}
2 v-else
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1> data:{
ok:false // true则是显示，false是隐藏
}
3 v-else-if
<h1 v-if="num==1">num的值为1</h1>
<h1 v-else-if="num==2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1> data:{
num:2
}
4 v-show
用法和v-if大致一样，区别在于2点：
1. v-show后面不能v-else
2. v-show隐藏元素时，使用的是display:none来隐藏的，
而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script> </head>
<body>
<div id="box">
<p v-if="is_login">欢迎再次登录我们网站</p>
<p v-else><a href="">注册</a><a href="">登录</a></p> <p v-if="num%3==0">这个数能被3整除</p>
<p v-else-if="num%5==0">这个数能被5整除</p>
<p v-else-if="num==1">这个数为{{num}}</p>
<p v-else>你好</p>
<!--v-show 符合条件就展示 ，不符合条件就隐藏 -->
<p v-show="num==3">这个数为3</p>
<p v-show="num">这个数为3</p>
</div> </body> <script>
var vm =new Vue({
el:'#box',
data:{
// is_login:true,
is_login:false,
num:3
} })
</script>
</html>
v-if v-else v-show
5 列表渲染指令
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。
数据是数组：
<ul>
<!--i是列表的每一个元素-->
<li v-for="i in list">{{i}}</li>
</ul>
数据是对象：
<ul>
<!--i是每一个value值,j是每一个键名-->
<li v-for="(i, j) in obj1">{{j}}:{{i}}</li>
</ul>
实用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<script>
// 页面加载完执行
window.onload=function (ev) { let vm = new Vue({
// 至少两个数据el 和data
el:'#app', //通过css 选择器 确定vue要控制的范围
data:{ // data 相当于 model
num:10
} }) }
</script>
<div id="app"> <button @click="num+=1">添加商品</button>
<input type="text" v-model="num">
<button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
</div> </body>
</html>
商品增减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style> span{
height: 100px;
width: 100px;
background: grey;
display: inline-block;
line-height: 100px;
text-align: center;
}
.new div{
width: 320px;
height: 300px;
background: red;
display: none;
}
.new .active{
display: block;
}
.current{
background: red;
}
</style>
</head>
<body>
<div id="box">
<div class='item'>
<span :class="num==1?'current':''" @click="num=1">国内新闻</span>
<span :class="num==2?'current':''" @click="num=2">国外新闻</span>
<span :class="num==3?'current':''" @click="num=3">银河新闻</span>
</div>
<div class="new" >
<div :class="num==1?'active':''">国内新闻</div>
<div :class="num==2?'active':''">国外新闻</div>
<div :class="num==3?'active':''">银河新闻</div>
</div>
</div> </body> <script>
var vm =new Vue({
el:'#box',
data:{
num:1
} })
</script>
</html>
内容切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<style>
.active {
color: red
} #good_add, #good_edit {
width: 300px;
height: 300px;
border: 1px solid grey;
background: grey;
text-align: center;
/*display: none;*/
}
.proform{
display: block;
}
.hide_cls{
display: none;
}
#good_edit div ,#good_add div{
margin-top: 20px;
} </style>
<body> <div id="box">
<div class="row">
<div class="col col-md-3">
<div id="good_add" :class="{'proform':add_cls1,'hide_cls':add_cls2}">
<h3>添加商品</h3>
<div>商品标题 <input type="text" v-model="add_name"></div>
<div>商品数量 <input type="text" v-model="add_num"></div>
<div>商品价格 <input type="text" v-model="add_price"></div>
<div><button class="btn btn-default" @click="add_keep" style="margin-right: 20px">保存</button ><button class="btn btn-default " @click="add_cancel" style="margin-left: 20px">取消</button></div> </div>
</div> <div class="col col-md-6 ">
<button class="btn btn-info" @click="add">添加</button> <table class="table table-bordered">
<tr>
<th>编号</th>
<th>书名</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<tbody>
<tr v-for="good,key in goods">
<td>{{key+1}}</td>
<td>{{good.name}}</td>
<td v-if="good.price>100" :class="{active:mycls}">{{good.price}}</td>
<td v-if="good.price<=100">{{good.price}}</td>
<td>{{good.num}}</td>
<td>
<button class="btn btn-info" @click="edit(key)">编辑</button>
<button class="btn btn-danger" @click="goods.splice(key,1)">删除</button>
</td>
</tr> </tbody>
</table>
</div>
<div class="col col-md-3 pull-right">
<div id="good_edit" :class="{'proform':edit_cls1,'hide_cls':edit_cls2}" >
<!--<div>编号<input type="text" v-model="k"></div>-->
<h3>编辑商品</h3>
<div>商品标题 <input type="text" v-model="name"></div>
<div>商品数量 <input type="text" v-model="num"></div>
<div>商品价格 <input type="text" v-model="price"></div>
<div><button class="btn btn-default" @click="edit_keep" style="margin-right: 20px">保存</button ><button class="btn btn-default" @click="edit_cancel" style="margin-left: 20px">取消</button></div> </div>
</div> </div>
</div> <script>
let l = new Vue({ el: "#box",
data: {
goods: [
{'name': "python1", 'price': 150,"num":1000},
{'name': "python2", 'price': 100,"num":2000},
{'name': "python3", 'price': 70,"num":3000},
{'name': "python4", 'price': 60,"num":4000},
{'name': "python5", 'price': 110,"num":5000}
],
//编辑所用的值
k:"",// 记录该书的索引值，方便编辑后保存用
name:"", //点击编辑时，把该书的开始name显示 ，之后修改后同步改变，下面的价格和数量也是一样
price:"",
num:"",
edit_init_dic:"",// 点击编辑时，记录最初 的书籍信息
// edit_init_k:"",//点击编辑时，记录该书最初索引值 可以不用 edit_cls1: false,
edit_cls2: true, //添加用的参数
add_name:"",
add_price:"",
add_num:"",
add_cls1:false,
add_cls2:true,
mycls:true },
methods:{
edit:function (key) {
//显示编辑框
this.edit_cls1=true;
this.edit_cls2=false;
//数据处理
this.k=key;
this.name=this.goods[key].name;
this.price=this.goods[key].price;
this.num=this.goods[key].num;
this.edit_init_dic={"name":this.goods[key].name,"price":this.goods[key].price,"num":this.goods[key].num};
this.edit_init_k=key
},
edit_keep:function () {
this.goods.splice(this.k,1,{"name":this.name,"price":this.price,'num':this.num})
this.edit_cls1=false;
this.edit_cls2=true;
},
edit_cancel:function () {
this.goods.splice(this.k,1,this.edit_init_dic);
this.edit_cls1=false;
this.edit_cls2=true;
},
add:function () {
//点击添加按钮弹出 添加框 //:class="{'proform':add_cls1,'hide_cls':add_cls2}
this.add_cls1=true;
this.add_cls2=false; //将上次的数据清空显示
this.add_name="";
this.add_price="";
this.add_num=""; },
add_keep:function () {
//保存数据
this.goods.splice(this.goods.length,1,{'name':this.add_name,'price':this.add_price,'num':this.add_num});
//隐藏 添加框
this.add_cls1=false;
this.add_cls2=true; },
add_cancel:function () {
//把数据清空
this.add_name="";
this.add_price="";
this.add_num="";
//隐藏 添加框
this.add_cls1=false;
this.add_cls2=true; } }
})
</script> </body>
</html>
表格的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
<style>
table,tr,th,td{
border: 1px solid;
border-collapse: collapse;
text-align: center;
}
table{
width: 600px;
margin-left: 100px;
}
th{
padding-top: 10px;
}
.box{
width: 300px;
height: 200px;
border: 1px solid;
border-radius: 5px;
position: fixed;
margin: auto;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.box div{
text-align: center;
margin: 15px;
}
.box button{
margin: 20px;
}
table button{
margin-left: 10px;
}
</style>
</head>
<div id="app">
<body>
<div><button @click="is_show=true">添加商品</button></div>
<table>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>操作</th>
</tr>
<tbody>
<tr v-for="good,key in goods">
<td>{{key+1}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.num}}</td>
<td><button @click="edit(key)">编辑</button><button @click="del(key)">删除</button></td>
</tr>
</tbody>
</table>
<div class="box" v-show="is_show">
<div>商品名称：<input type="text" v-model="name"></div>
<div>商品价格：<input type="text" v-model="price"></div>
<div>商品数量：<input type="text" v-model="num"></div> <div><button @click="keep" >保存</button><button @click="cancel">取消</button></div>
</div> </body>
</div> <script>
var vm = new Vue({ el:"#app", data:{
edit_key:'',
name:'',
price:'',
num:'',
is_show:false,
goods: [
{'name': "python1", 'price': 150,"num":1000},
{'name': "python2", 'price': 100,"num":2000},
{'name': "python3", 'price': 70,"num":3000},
{'name': "python4", 'price': 60,"num":4000},
{'name': "python5", 'price': 110,"num":5000}]
},
methods:{
//删除
del:function (key) {
this.goods.splice(key,1); },
// 保存
keep:function () {
// box 隐藏
this.is_show=false;
// 数据追加到后面
if (this.edit_key){
//编辑时保存
this.goods[this.edit_key].name=this.name;
this.goods[this.edit_key].price=this.price;
this.goods[this.edit_key].num=this.num; }else {
this.goods.push({"name":this.name,"price":this.price,"num":this.num});
}
//清空 数据
this.name="";
this.price="";
this.num="";
this.edit_key='';
},
cancel:function () {
//添加时取消
this.is_show=false;
//清空 数据
this.name="";
this.price="";
this.num="";
this.edit_key=''; },
//编辑
edit:function (key) {
//显示box
this.edit_key=key;
this.is_show=true;
//将数据显示
this.name=this.goods[key].name;
this.price=this.goods[key].price;
this.num=this.goods[key].num; } }
}) </script>
</html>
表格增删查改优化版
vue 基础（一）的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- Python3 tkinter基础 Listbox delete 删除单个、所有元素
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- （转）Redis & EhCache
(二期)6.redis与ehcache综合讲解 [课程六]ehcache简介.xmind0.1MB [课程六]redis的高可用.xmind0.1MB [课程六]redis的...结构.xmind0. ...
- POJ3580 SuperMemo
Your friend, Jackson is invited to a TV show called SuperMemo in which the participant is told to pl ...
- （转）Multi-Object-Tracking-Paper-List
Multi-Object-Tracking-Paper-List 2018-08-07 22:18:05 This blog is copied from: https://github.com/Sp ...
- [CodeForces 892A] Greed (Java中sort实现从大到小排序)
题目链接:http://codeforces.com/problemset/problem/892/A 具体的Java 中 sort实现降序排序:https://www.cnblogs.com/you ...
- Images之Dockerfile中的命令1
Dockerfile reference Docker can build images automatically by reading the instructions from a Docker ...
- demoshow - webdemo展示助手
demoshow - web demo展示助手 动态图演示页面: http://www.cnblogs.com/daysme/p/6790829.html 一个用来展示前端网页demo的小“助手”,提 ...
- H5手机移动端调起浏览器（qq浏览器，uc浏览器）自带分享功能实例
H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...
- 点击返回上一页 wx.navigateTo不管用了
做跳转的时候,发现想返回上一页,但是这个上一页又是tab上的页面,返回不了怎么办呢 wx.navigateTo({ url: '../search/search', }) 解决方法: wx.reL ...
- React Native 炫酷的动画库 实现任何AE动画 lottie-react-native
lottie-react-native 传送门 1.npm i --save lottie-react-native 2.react-native link lottie-ios 3.react-na ...