Vue基础总结

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>


<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'

猜你喜欢