Vue 基础语法
44 / 0 / 创建于 3年前 /
HuDu 的个人博客
绑定
v-bind被称为指令。指令带有前缀v-
{{}} v-bind=""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模版-->
<!--<div id="app">-->
<!-- {{message}}-->
<!--</div>-->
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒查看此动态绑定的提示信息！
</span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
//Model：数据
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>判断
- if
<div id="app">
<!-- <h1 v-if="ok">Yes</h1>-->
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data: {
// ok: true
type: 'A'
}
});
</script>- for
<div id="app">
<!-- <li v-for="item in items">-->
<li v-for="(item,index) in items">
{{item.message}}---{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
items:[
{message: 'Hudu'},
{message: "Alex"}
]
}
});
</script>事件
- on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "HuDu"
},
methods: {
sayHi: function () {//方法必须定义在Vue的Methods对象中，v-on：事件
alert(this.message);
}
}
});
</script>
</body>
</html>v-model
<div id="app">
下拉框：
<select name="" id="" v-model="selected">
<option value="" disabled>--请选择--</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<span>value：{{selected}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data: {
// message: "123"
// checked: false
// hudu: ''
selected: ''
}
});
</script>自定义 Vue 组件 component
<div id="app">
<!-- <hudu></hudu>-->
<!-- <li v-for="item in items">-->
<!-- {{item}}-->
<!-- </li>-->
<!--组件：传递给组件中的值：props-->
<hudu v-for="item in items" v-bind:hu="item"></hudu>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//定义一个Vue组件component
Vue.component("hudu",{
props: ['hu'],
template: '<li>{{hu}}</li>'
})
let mv = new Vue({
el: "#app",
data: {
items: ["hudu","Java","Html"]
},
methods: {
sayHi: function () {
}
}
})
</script>axios
<div id="vue" v-clock>
<div>{{ info.name }}</div>
<div>{{ info.address.street }}</div>
<a v-bind:href=" info.links[0].url ">点击</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: "#vue",
data(){
return{
info:{
}
}
},
mounted(){//钩子函数 链式编程
// axios.get('data/data.json').then(response=>(console.log(response.data)))
axios.get('data/data.json').then(response=>(this.info=response.data))
}
})
</script>网络通信
- jQuery.ajax()
- Axios
- 从浏览器中创建
XMLHttpRequests - 从node.js创建http请求
- 支持Promise API [JS中链式编程]
- 拦截请求和响应
转换请求数据和响应数据 - 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF (跨站请求伪造)
GitHub: github.com/axios/axios
文文档: www.axios-js.com/ - Axios 异步通信
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号