Vue是什么?是一套构建用户界面(UI)的渐进式JavaScript框架
1.安装:`npm i -S vue`
2.引入:<script src="vue.js"></script>
3.HTML:<div id="app">{{ msg }}</div>
4:script: var vm = new Vue({el:'#app',data:{msg:'数据'} })
5:可以通过 `vm.$data` 访问到data中的所有属性,或者 `vm.msg`
Vue的指令:
v-text="msg"==={{msg}}
v-html="html" html:'<span>{{msg}}</span>'
v-bind:<a v-bind:href="url"></a>简写<a :href="url"></a>
<div v-bind:class="{ active: true }"></div>===><div class="active"></div>
<div :class="['active', 'text-danger']"></div> ===><div class="active text-danger"></div>
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
<div v-bind:style="{ color:red, 'font-size': 20+ 'px' }"></div>
<!-- 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
v-show: <p v-show="isShow">展示</p> data: {isShow:false//true}
v-on:click="say"简写:`@click="say"`说明:绑定的事件从`methods`中获取
v-model作用:在表单元素上创建双向数据绑定 <input type="text" v-model="message"><p>Message is: {{ message }}</p>
v-for:<div v-for="item in items" :key='item.id'> {{ item.text }}</div>
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
item 为值,key 为键,index 为索引
事件修饰符:
- `.stop` 阻止冒泡,调用 event.stopPropagation()
- `.prevent` 阻止默认行为,调用 event.preventDefault()
- `.capture` 添加事件侦听器时使用事件`捕获`模式
- `.self` 只当事件在该元素本身(比如不是子元素)触发时,才会触发事件
- `.once` 事件只触发一次
axios:
1.安装:`npm i -S axios`
2.引入 axios.js
3.直接调用axios提供的API发送请求
created: function () {
axios.get(url)
.then(res=>{log(res)})
}
url中带有query参数axios.get('/user?id=89')
url和参数分离,使用对象axios.get('/user', {params: { id: 12345} })
配合 webpack 使用方式如下:
import Vue from 'vue'
import axios from 'axios'
将 axios 添加到 Vue.prototype 中 Vue.prototype.$axios = axios js中 this.$axios.get()
设置请求公共路径:axios.defaults.baseURL = 'http://vue.url'