Vue入门基础篇
Vue入门基础篇
- 包引入
- 挂载点
- data属性
- v开头的一家
-
- v-text
- v-html
- v-on
- v-show
- v-if
- v-bind
- v-for
- v-on 补充
- axios网络编程
包引入
开发者版本，有提示，学习阶段使用
<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: " 不一样" } })</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时的格式
