包引入
开发者版本,有提示,学习阶段使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
生产者版本,特点小 ,相当于jquerymini 实际开发时用(地址自己找)
挂载点
el挂载点,选择标签后,被选择的标签,及其后代元素,里面的内容被改变
挂载点不能挂载html和body标签
var v = new Vue({
// 挂载点 只能选择一个元素
el: "div",
data: {
message: "你好世界",
address: {
where: "中国"
}
}
})
data属性
data属性:
data标签相当于时一个json对象
data里面可以写json对象,数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div>
<!-- 插值表达式 -->
{{ message }} {{ address.where }}
</div>
</body>
<script>
var v = new Vue({
// 挂载点 只能选择一个元素
el: "div",
data: {
message: "你好世界",
address: {
where: "中国"
}
}
})
</script>
</html>
v开头的一家
v-text
vue指令 v开头的指令
v-text 相当于js中的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div>
<div v-text="message+'拼接'">不保留</div>
<div>保留{{ message }}拼接</div>
</div>
</body>
<script>
var v = new Vue({
el: "div",
data: {
message: "v-test测试"
}
})
</script>
</html>
v-html
v-html 相当于js的innerHTML标签,能解析html
<body>
<div>
<div v-html="info"></div>
<div v-text="info"></div>
<div v-html="message"></div>
<div v-text="message"></div>
</div>
</body>
<script>
var v = new Vue({
el: "div",
data: {
message: "都一样",
info: " <a href='#'>不一样</a>"
}
})
</script>
v-on
v-on 为元素绑定事件 事件方法写到methods中
也可以用@替换v-on: 常用
在方法内部可以通过this关键字访问在data中的数据
<body>
<div></div>
<input type="button" value="v-on测试" v-on:click="c">
<h1 @click="cc">卢本伟说:{{ info }}</h1>
</body>
<script>
var vue = new Vue({
el: "input",
methods: {
c: function() {
console.log("你点你了v-on测试");
}
}
})
var v = new Vue({
el: "h1",
data: {
info: "得得得得得得得"
},
methods: {
cc: function() {
console.log(this.info);
this.info += "得得得";
}
}
})
</script>
v-show
v-show 元素的显示和隐藏,实际操作的是display属性
<body>
<span>
<div @click="add">+</div>
<span>{{ num }}</span>
<div @click="sub">-</div>
</span>
</body>
<script>
// 点击事件要能实现,必须是挂载点元素或者其子元素
var vue = new Vue({
el: "span",
data: {
num: 0
},
methods: {
add: function() {
console.log(213);
this.num++;
},
sub: function() {
this.num--;
}
}
})
</script>
v-if
v-if 根据表达式的真假,切换元素的真假,切换元素的显示和隐藏,实际是元素本身是否存在,操作的是dom树,要和v-bind区别开(这里不在演示)
v-bind
v-bind 设置元素的属性(src href)可以简写为:属性
<body>
<div id="app">
<a v-bind:href="where" alt="">dian</a>
<a :href="where" alt="">dian</a>
<h1 :class="isActive?'active':''">标签</h1>
<h1 :class="{active:isActive}">标签</h1>
<button @click="toggleActive">点击改变颜色</button>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
where: "https://www.baidu.com/",
isActive: true
},
methods: {
toggleActive: function() {
console.log(this.isActive);
this.isActive = !this.isActive;
}
}
})
</script>
v-for
v-for 根据数组生成列表结构
语法(item,index)in 数组
<body>
<ul id="app">
<button @click="add">add</button>
<button @click="remove">remove</button>
<li v-for="(item,index) in array">
{{ item }}
</li>
<li v-for="name in array2">
{{ name.name }}
</li>
</ul>
</body>
<script>
var u = new Vue({
el: "#app",
data: {
array: ["北京", "上海", "广州"],
array2: [{
name: "1"
}, {
name: "2"
}, {
name: "3"
}]
},
methods: {
add: function() {
this.array.push("新乡")
},
remove: function() {
this.array.shift()
}
}
})
</script>
v-on 补充
v-on补充,传递参数和事件修饰符 比较常用的就是@keyup.enter=""想找其他的,下面这个网站
## v-model
v-model 获取和设置表单元素的值
(双向数据绑定)一边改另一边也会跟着改(感觉非常神奇,一个数据改变,不用刷新页面,页面的数据就能改变)
{{ message }}
axios网络编程
axios网络编程,他的底层是ajax(要注意,axios和vue整合的时候,axios.get方法里面的this不是外面的this,需要使用外卖呢的this,要声明一个中间变量that,
axios的包要引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<div>
<input type="text" v-model="num" @keyup.enter="getMeg">回车获取笑话,输入获取笑话的个数
<ul>
<li v-for="item in data">{{ item }}</li>
</ul>
</div>
</body>
<script>
var vue = new Vue({
el: "div",
data: {
num: "",
data: []
},
methods: {
getMeg: function() {
// console.log(this.num);
var that = this;
axios.get("https://autumnfish.cn/api/joke/list?num=" + this.num).then(function(resp) {
// that.data = resp.data.data;
console.log(resp.data.jokes);
that.data = resp.data.jokes;
})
}
}
})
</script>
只用axios时的格式