Vue 基本简介
Vue 概念
Vue:JavaScript框架,可以简化Dom操作,提供响应式数据驱动
Vue 引入
开发环境版本:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
生产环境版本:
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Vue 数据渲染
(1)使用id 选择器和el挂载,再用Vue对象渲染数据(只对双标签生效且HTML和BODY标签除外)
(2)使用class选择器和el挂载,再用Vue对象渲染数据(只对双标签生效且HTML和BODY标签除外)
<!--id选择器-->
<div id="app">
{{message}}
{{school.name}} {{school.mobile}}
{{area[0]}} {{area[1]}}
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
message:"yingxin", <!--基础数据-->
school:{ <!--对象数据-->
name:"caoxiaoke",
mobile:"13774130365"
},
area:["Beijing","Shanghai"] <!--数组数据-->
}
})
</script>
<!--class选择器-->
<div class="app">
{{message}}
{{school.name}} {{school.mobile}}
{{area[0]}} {{area[1]}}
</div>
<script>
var ap = new Vue({
el:".app",
data:{
message:"yingxin", <!--基础数据-->
school:{ <!--对象数据-->
name:"caoxiaoke",
mobile:"13774130365"
},
area:["Beijing","Shanghai"] <!--数组数据-->
}
})
</script>
Vue 本地应用
内容绑定指令
v-text 指令
<!--设置标签文本值-->
<div id="app">
<h2 v-text="message"></h2>
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
message:"yingxin"
}
})
</script>
v-html 指令
<!--设置标签超链接-->
<div id="app">
<h2 v-html="content"></h2>
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
content:"<a href='www.baidu.com'>网站网址</a>"
}
})
</script>
v-on 指令
<!--设置标签绑定事件-->
<!--click:单击事件;dblclick:双击事件;monseenter:光标移入事件-->
<!--keyup:输入字符事件,keyup.enter:输入会车事件-->
<!--"v-on:" == "@"-->
<div id="app">
<input type="button" value="加" v-on:clock="add"/>
<p>{{number}}</p>
<input type="button" value="减" v-on:clock="reduce"/>
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
number:0
},
methods:{
add:function(){
this.number++;
},
add:function(){
this.number--;
}
}
})
</script>
属性切换指令
v-show 指令
<!--设置标签显示或隐藏-->
<div id="app">
<image src="www.baidu.img1.png" v-show="IsShow1"></image>
<image src="www.baidu.img2.png" v-show="IsShow2"></image>
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
IsShow1:true,
IsShow2:false
}
})
</script>
v-if 指令
<!--设置标签存在或消失-->
<div id="app">
<image src="www.baidu.img1.png" v-if="IsShow1"></image>
<image src="www.baidu.img2.png" v-if="IsShow2"></image>
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
IsShow1:true,
IsShow2:false
}
})
</script>
v-bind 指令
<!--设置标签属性值-->
<!--"v-bind:" == ":"-->
<div id="app">
<iframe v-bind:src="AutoSrc[index]"></iframe>
<input type="button" value="切换地址" @click="ChangeAdd"/>
<input type="button" value="切换地址" @click="ChangeReduce"/>
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
index=0,
AutoSrc:[
"http://src00",
"http://src01",
"http://src02",
"http://src03"
]
}
methods:{
ChangeAdd:function(){
if(index <= 3){
index++;
}
},
ChangeReduce:function(){
if(index >= 0){
index--;
}
}
})
</script>
列表循环指令
v-for 指令
<!--根据数据生成列表结构-->
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}} {{item}}
</li>
</ul>
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
arr:["Beijing","Shanghai","Guangzhou"]
}
})
</script>
v-model 指令
<!--设置双向数据值绑定-->
<!--可以便捷地设置和获取表单元素的值-->
<div id="app">
<input type="text" v-model="message" />
</div>
<script>
var ap = new Vue({
el:"#app",
data:{
message:"yingxin"
}
})
</script>
Vue 网络应用
基本简介
axios 概念
axios是一个功能强大的网络请求库
axios 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
请求格式
get 请求
<script>
var ap = new Vue({
el:"#app",
methods:{
axios.get('http://www.baidu.com?parameter')
.then(
function(response){
console.log(response);
},
functinon(err){
console.log(err);
}
)
}
})
</script>
post 请求
<script>
var ap = new Vue({
el:"#app",
methods:{
axios.post('http://www.baidu.com?parameter')
.then(
function(response){
console.log(response);
},
functinon(err){
console.log(err);
}
)
}
})
</script>