if else 语
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
ok: true
}
});
</script>
for循环获取数据
<div id="app">
<li v-for="text in allTexts">
{{text.message}}
</li>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
allTexts: [
{message: "1"},
{message: "2"},
{message: "3"},
]
}
});
</script>
事件绑定
<div id="app">
<button v-on:click="sayOk()">点我</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "ycj"
},
methods: {
sayOk: function () {
alert(this.message);
}
}
});
</script>
什么是双向数据绑定
Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定
在Vue.js 中,如果使用vuex ,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据
在表单中使用双向数据绑定
<div id="app">
数据双向绑定示例:<input type="text" v-model="message">{{message}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message: ""
},
});
</script>
什么是组件
组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,类似JSTL的自定义标签、
<div id="app">
<cqh v-for="item in items" v-bind:test="item"></cqh>
</div>
<script>
/*定义一个vue组件*/
Vue.component("cqh", {
props: ['test'],
template: '<li>{{test}}</li>'
});
let vm = new Vue({
el: "#app",
data: {
items: ["Java", "Linux", "前端"]
}
});
</script>
Axios异步通信(通信框架)
Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:
●从浏览器中创建XMLHttpRequests
●从node.js创建http请求
●支持Promise API [JS中链式编程]
●拦截请求和响应
●转换请求数据和响应数据
●取消请求
●自动转换JSON数据
●客户端支持防御XSRF (跨站请求伪造)
GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/
{
"name": "cqh",
"age": "18",
"sex": "男",
"url":"https://www.baidu.com",
"address": {
"street": "缇香郡",
"city": "宁波",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com"
},
{
"name": "baidu",
"url": "https://www.baidu.com"
},
{
"name": "cqh video",
"url": "https://www.4399.com"
}
]
}
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
<div>{{info.name}}</div>
<a v-bind:href="info.url">点我到百度链接</a>
</div>
<script>
let vm = new Vue({
el: "#app",
//和data: 不同 属性:vm
data() {
return {
info: {
name:null,
url:null,
},
}
},
mounted() {
//钩子函数 链式编程 ES6新特性
axios.get("../data.json").then(response => (this.info=response.data));
}
});
</script>