Vue 前端框架
文章目录
- Vue
- Vue 简介
- Vue示例
- 利用Vue获取元素
- 简单的点击计数器
- 事件冒泡
- 阻止冒泡
- 优先捕获
- 自己捕获
- 提交一次
- 阻止跳转
- 条件语句示例
- if语句
- if-else语句
- if-elseif-else
- for循环
- 基本用法
- 添加index
- 纯数字循环
- 属性绑定
- 双向绑定
- 多种风格的数据绑定
- .lazy
- .number
- .trim
- 数字计算
- watch来实现变量监听
- 过滤器
- 首字母过滤器
- 多层过滤器
- 全局过滤器
- 组件
- 简单的实现
- 全局方法
- 引入参数
- 动态参数
- 点击事件
- 使用json数组
- 最终成果
- 自定义指令
- 带参数的自定义指令
- Vue路由
- ajax请求
- fetch.js
- axios.js
- fetch.js 加载数据
- axios.js
- CRUD 实现 Vue
- 参考
Vue
Vue 简介
Vue示例
Vue学习资源代码来自：how2java
利用Vue获取元素
下面是使用了js的实现方法：
<div id="div1">
</div>
<script>
//准备数据
var gareen = {"name":"盖伦","hp":616};
//获取 html dom
var div1 = document.getElementById("div1");
//显示数据
div1.innerHTML= gareen.name;
</script>
使用Vue的实现方法：
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
{{gareen.name}}
</div>
<script>
//准备数据
var gareen = {"name":"盖伦","hp":616};
//通过vue.js 把数据和对应的视图关联起来
new Vue({
el: '#div1',
data: {
message: gareen
}
})
</script>
实现的结果：
在div1里面：显示了盖伦两个字。
简单的点击计数器
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div>一共点击了 {{clickNumber}}次</div>
<button v-on:click="count">点击</button>
</div>
<script>
new Vue({
el: '#div1',
data: {
clickNumber:0
},
methods:{
count: function(){
this.clickNumber++;
}
}
})
</script>
其中，上面的v-on 可以替换为@。
显示结果：
事件冒泡
<script src="http://how2j.cn/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: green;
}
#father {
background: blue;
}
#me {
background: red;
}#son {
background: gray;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
运行的结果：
当我们点击son的时候，会依次弹出提示框son、me、father、grandfather这么消息。这么因为事件是冒泡的，事件会从最底层被点击元素开始往上传。
阻止冒泡
那么如果我们不想要上面的冒泡效果，怎么办呢？ 如果，我们想要某个元素的提示首先弹出来。 使用 使用 下面是一个简单的if语句实现： 实现效果： index从0开始： 实现效果： 使用v-bind来实现属性的绑定。 即当我们表单要提交的时候，一开始先给它绑定一个初始值，但当实际后面使用的时候返回一个真实的输入值进行绑定。 下面就是一个简单的例子,使用了 运行结果如下： 就像 修饰过的输入，它会被定义为number类型。 修饰过的地方会自动删除字符串前后的空格。 Vue中可以在 或者，也可以编写方法实现同样的效果 下面的代码实现了跟上面一样的美元汇率兑换效果，当watch观察到rmb或者dollar的值变化，另一个也随之变化。 下面我们构造一个简单的过滤器。 通过以下 实现的效果： 定义两个过滤器： 使用 下面的代码使用了全局过滤器。 就是说相当于一个模板，给他传不同的参数，实现不同的显示效果即可。 实现效果： 直接添写静态参数。 使用前面的 实现效果： 下面的template，由于不好写可以外部写一个display：none的模板，然后通过 下面我们使用了 这里我们需要引入一个新的js： 用户管理页面的内容 产品管理页面的内容 订单管理页面的内容 实现的效果： 下面介绍一些Vue比较流行的ajax框架。 一般Vue使用一些框架来实现ajax请求，其中fetch.js就是一个比较流行的框架。 首先，列举出所有属性的表格、并添加编辑、删除按钮。
需要的仅仅是一个冒泡修饰符.stop
优先捕获
这就要用到优先捕获的概念了。
利用自己捕获
提交一次
阻止跳转
.prevent可以阻止一个按钮点击的跳转，如果后面跟了函数，那么依然会执行。
下面是a、submit三个测试：
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<a href="http://12306.com" @click="jump" >正常的链接 http://12306.com</a>
<br>
<a href="http://12306.com" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a>
<br>
<a href="http://12306.com" @click.prevent >纯prevent之后的链接 http://12306.com</a>
<br>
<br>
<form @submit="jump" action="http://12306.com">
<button type="submit">正常的form</button>
</form>
<form @submit.prevent="jump" action="http://12306.com">
<button type="submit">prevent jump()之后的form</button>
</form>
<form @submit.prevent action="http://12306.com">
<button type="submit">纯prevent之后的form</button>
</form>
</div>
<script>
new Vue({
el: '#div1',
data: {
},
methods:{
jump:function(){
alert("jump()函数被调用");
}
}
})
</script>
条件语句示例
if语句
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<button v-on:click="toggle">切换隐藏显示</button>
<div v-if="show"> 默认这一条是看得见的</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
show:true
},
methods:{
toggle: function(){
this.show=!this.show;
}
}
})
</script>
if-else语句
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<button v-on:click="moyiba"> 摸一把彩票 10%的几率，建议一边点击一边心里默数，多少次了,站长表示最多点了40次才中奖，妈蛋~ </button>
<div v-if="show"> 中了500万！</div>
<div v-else>谢谢惠顾！</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
show:false
},
methods:{
moyiba: function(){
this.show=Math.random()<0.1
}
}
})
</script>
if-elseif-else
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<button v-on:click="toutai"> 看看下辈子投胎是做什么的 </button>
<div v-if="number>98"> 神仙</div>
<div v-else-if="number>95"> 国家领导人</div>
<div v-else-if="number>90"> 大富商</div>
<div v-else-if="number>80"> 大企业主</div>
<div v-else-if="number>70"> 演艺明星</div>
<div v-else-if="number>60"> 小企业主</div>
<div v-else-if="number>50"> 普通公务员</div>
<div v-else-if="number>40"> 小个体户</div>
<div v-else-if="number>30"> 血汗工厂工人</div>
<div v-else-if="number>20"> 偏远山区农民</div>
<div v-else> 流浪汉</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
number:0
},
methods:{
toutai: function(){
this.number=Math.random()*100
}
}
})
</script>
for循环
基本用法
<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var data = [
{name:"盖伦",hp:341},
{name:"提莫",hp:225},
{name:"安妮",hp:427},
{name:"死歌",hp:893}
];
new Vue({
el: '#div1',
data: {
heros:data
}
})
</script>
添加index
<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>number</td>
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero,index in heros">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var data = [
{name:"盖伦",hp:341},
{name:"提莫",hp:225},
{name:"安妮",hp:427},
{name:"死歌",hp:893}
];
new Vue({
el: '#div1',
data: {
heros:data
}
})
</script>
纯数字循环
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-for="i in 10">
{{ i }}
</div>
</div>
<script>
new Vue({
el: '#div1'
})
</script>
属性绑定
其中v-bind可以省略不写。<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<a v-bind:href="page">http://12306.com</a>
</div>
<script>
new Vue({
el: '#div1',
data:{
page:'http://12306.com'
}
})
</script>
双向绑定
v-model来实现该效果:<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
hero name: <input v-model="name" >
<button @click="doClick" >提交数据</button>
</div>
<script>
new Vue({
el: '#div1',
data:{
name:"teemo"
},
methods:{
doClick:function(){
alert(this.name);
}
}
})
</script>
多种风格的数据绑定
<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>
单行文本
</td>
<td>
<input v-model="input" placeholder="输入数据">
</td>
<td>
<p>{{ input }}</p>
</td>
</tr>
<tr>
<td>
多行文本
</td>
<td>
<textarea v-model="textarea" placeholder="输入数据"></textarea>
</td>
<td>
<p>{{ textarea }}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
<input type="checkbox" id="checkbox" v-model="checked">
</td>
<td>
<p>{{ checked }}</p>
</td>
</tr>
<tr>
<td>
多个复选框
</td>
<td>
<input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
<label for="teemo">teemo</label>
<input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
<label for="gareen">gareen</label>
<input type="checkbox" id="annie" value="annie" v-model="checkedes">
<label for="annie">annie</label>
</td>
<td>
<p>{{ checkedes }}</p>
</td>
</tr>
<tr>
<td>
单选按钮
</td>
<td>
<input type="radio" id="one" value="One" v-model="radio">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="radio">
<label for="two">Two</label>
</td>
<td>
<p>{{ radio }}</p>
</td>
</tr>
<tr>
<td>
单选选择框
</td>
<td>
<select v-model="selected" size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selected }}</p>
</td>
</tr>
<tr>
<td>
多选选择框
</td>
<td>
(通过ctrl或者shift进行多选)<br>
<select v-model="selecteds" multiple size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selecteds }}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
默认值是true或者false,也可以修改为自定义的值<br>
<input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
</td>
<td>
<p>{{ toggle }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input:'',
textarea:'',
checked:'',
checkedes:[],
radio:'',
selected:'',
selecteds:[],
toggle:'',
}
})
</script>
.lazy
延迟属性的变化，等到完全数据，聚焦结束才进行属性变化。.number
.trim
数字计算
{{x/y}}直接进行计算。<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>人民币</td>
<td>美元</td>
</tr>
<tr>
<td align="center" colspan="2">
汇率： <input type="number" v-model.number="exchange" />
</td>
</tr>
<tr>
<td align="center">
￥: <input type="number" v-model.number = "rmb" />
</td>
<td align="center">
$: {{ rmb/exchange }}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0
}
})
</script>
{{ getDollar() }}。
一般使用computed直接计算是有缓存的，可以节约重复计算时间。
运行结果：
watch来实现变量监听
<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>人民币</td>
<td>美元</td>
</tr>
<tr>
<td align="center" colspan="2">
汇率： <input type="number" v-model.number="exchange" />
</td>
</tr>
<tr>
<td align="center">
￥: <input type="number" v-model.number = "rmb" />
</td>
<td align="center">
$: <input type="number" v-model.number = "dollar" />
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0,
dollar:0
},
watch:{
rmb:function(val) {
this.rmb = val;
this.dollar = this.rmb / this.exchange;
},
dollar:function(val) {
this.dollar = val;
this.rmb = this.dollar * this.exchange;
},
}
})
</script>
过滤器
首字母过滤器
filters:{
capitalize:function(value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.charAt(0).toUpperCase() + value.substring(1)
}
}
{{ data|capitalize }}来使用过滤器capitalize。<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>输入数据</td>
<td>过滤后的结果</td>
</tr>
<tr>
<td align="center">
<input v-model= "data" />
</td>
<td align="center">
{{ data|capitalize }}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
data:''
},
filters:{
capitalize:function(value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.charAt(0).toUpperCase() + value.substring(1)
}
}
})
</script>
多层过滤器
他们分别是首字母过滤器和尾字母过滤器。filters:{
capitalize:function(value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.charAt(0).toUpperCase() + value.substring(1)
},
capitalizeLastLetter:function(value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
}
}
{{ data|capitalize|capitalizeLastLetter }}来使用多重过滤器capitalize和capitalizeLastLetter。全局过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
Vue.filter('capitalizeLastLetter', function (value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
})
组件
包含各种product。简单的实现
<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product></product>
<product></product>
<product></product>
</div>
<script>
new Vue({
el: '#div1',
components:{
'product':{
template:'
全局方法
Vue.component('product', {
template: '引入参数
<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product>
<product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product>
<product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
</div>
<script>
Vue.component('product', {
props:['name'],
template: '动态参数
v-bind来实现。<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
组件外的值：<input v-model="outName" ><br>
<product v-bind:name="outName"></product>
</div>
<script>
Vue.component('product', {
props:['name'],
template: '点击事件
<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮" sale="10" ></product>
<product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包" sale="20" ></product>
<product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮" sale="30" ></product>
</div>
<script>
Vue.component('product', {
props:['name','sale'],
template: '
点击一下增加销量。
使用json数组
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
]
最终成果
var tempalateDiv=document.getElementById("tempalate").innerHTML;获取。<script src="http://how2j.cn/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
div.product:hover{
border:1px solid #c40000;
}
div.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
div.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
div.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
div.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
</style>
<div id="tempalate" style="display:none">
<div class="product" v-on:click="increaseSales">
<div class="price">
¥ {{product.price}}
</div>
<div class="productName">
{{product.name}}
</div>
<div class="sale"> 月成交 {{product.sale}} 笔</div>
<div class="review"> 评价 {{product.review}} </div>
</div>
</div>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
props: ['product'],
template: tempalateDiv,
methods: {
increaseSales: function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale += 1
this.$emit('increment')
}
}
}
Vue.component('product', templateObject)
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
]
}
})
</script>
自定义指令
directive定义了一个指令：xart，其中el是使用了该指令的元素，它会执行我们指令的内容。<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-xart> 好好学习，天天向上 </div>
</div>
<script>
Vue.directive('xart', function (el) {
el.innerHTML = el.innerHTML + ' ( x-art ) '
el.style.color = 'pink'
})
new Vue({
el: '#div1'
})
</script>
带参数的自定义指令
v-xart="{color:'red',text:'best learning video'}"这是一条指令={ } 里面以键值对的方式提供了参数，在我们的函数中使用binding.value来获取。
如binding.value.text获取到了best learning video这一字符串。<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-xart="{color:'red',text:'best learning video'}"> 好好学习，天天向上 </div>
</div>
<script>
Vue.directive('xart', function (el,binding) {
el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
el.style.color = binding.value.color
})
new Vue({
el: '#div1'
})
</script>
Vue路由
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/vue-router.min.js"></script>
<head>
<style>
a{
text-decoration: none;
}
a.router-link-active{
/* color:blue; */
background-color: lightGray;
}
div.menu{
border:1px solid gray;
float:left;
}
div.menu a{
display:block;
}
div.workingRoom{
margin-left:100px;
}
div#app{
width:500px;
padding:10px;
margin:10px auto;
}
</style>
</head>
<div id="app">
<div class="menu">
<!--
router-link 相当于就是超链
to 相当于就是 href
-->
<router-link to="/user">用户管理</router-link>
<router-link to="/product">产品管理</router-link>
<router-link to="/order">订单管理</router-link>
</div>
<div class="workingRoom">
<!--
点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
-->
<router-view></router-view>
</div>
</div>
<script>
/*
* 申明三个模板( html 片段 )
*/
var user = { template: '
ajax请求
ajax使用指南：
fetch.js
准备相关的json数据：{"name":"gareen","hp":"355"}。
下面就是一个简单的ajax获取json数据例子。<script src="http://how2j.cn/study/fetch.min.js"></script>
<div id="hero">
</div>
<script>
var url = "http://how2j.cn/study/json.txt"
fetch(url).then(function(response) {
response.json().then(function (jsonObject) {
var jsonString = JSON.stringify(jsonObject)
document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
</script>
axios.js
<script src="http://how2j.cn/study/axios.min.js"></script>
<div id="hero">
</div>
<script>
var url = "http://how2j.cn/study/json.txt"
axios.get(url).then(function(response) {
var jsonObject = response.data;
var jsonString = JSON.stringify(jsonObject)
document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据："+ jsonString;
})
</script>
fetch.js 加载数据
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/fetch.min.js"></script>
<head>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
</head>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
el:'#div1',
data:{
heros:[]
},
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
self=this
fetch(url).then(function(response) {
response.json().then(function (jsonObject) {
self.heros = jsonObject
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
}
})
</script>
axios.js
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/axios.min.js"></script>
<head>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
</head>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
el:'#div1',
data:{
heros:[]
},
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
var self = this
axios.get(url).then(function(response) {
self.heros= response.data; //此时还是字符串
self.heros = eval("("+self.heros+")"); //字符串转换为数组对象
})
}
})
</script>
CRUD 实现 Vue
<html>
<head>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://how2j.cn/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
<td>
<a href="#nowhere" @click="edit(hero)">编辑</a>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
<div id="div4Update">
英雄名称:
<input type="text" v-model="hero4Update.name" />
<br>
血量：
<input type="number" v-model="hero4Update.hp" />
<input type="hidden" v-model="hero4Update.id" />
<br>
<button type="button" v-on:click="update">修改</button>
<button type="button" v-on:click="cancel">取消</button>
</div>
</div>
<script type="text/javascript">
//修改区域隐藏起来先
$("#div4Update").hide();
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
},
deleteHero: function (id) {
console.log("id"+id);
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
},
edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
}
});
</script>
<div style="height:300px"></div>
</body>
</html>
参考