文章目录
官网
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KKK</title>
</head>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
{{reversedMessage}}</br>
<input v-model="question"/></br>
{{ answer }}
</div>
</body>
<script>
/* 创建Vue实例 */
var app = new Vue({
/* vue实例绑定的挂载元素 */
el: '#app',
/* vue中响应式属性 */
data: {
message: 'Hello Vue!',
question:'',
answer:''
},
// 定义vue实例的方法
methods: {
}
// 计算属性基于响应式依赖进行缓存的,只有依赖发生改变才重新计算
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
// 侦听器,在数据变化时执行异步或开销较大的操作使用
watch:{
question:function(question){
this.answer=question+'yes';
}
},
// 局部组件
components: {
'component-a': ComponentA
},
// 修改获取值的形式 {{}}->${}
delimiters:['${','}']
})
</script>
特点
- 只有当实例被创建时就已经存在于data中的数据才是响应式的(可以使用Object.freeze()来阻止属性响应)
- $data、$el等提供对Vue实例中属性的引用。更多引用
- Vue的所有生命周期函数都是自动绑定到this的上下文上(不要使用=>)
生命周期
new Vue实例初始化
beforeCreate(无数据,数据观测和事件配置前调用)
created(data有数据,但dom还未挂载)
判断有无el属性(无则不走mount),内部有template优先走内部,否则取外部html,渲染优先级render函数 > template属性 > 外部html
beforeMount({message},dom中数据还未解析)
mounted(dom中数据解析完成)
beforeUpdate(数据只有和模版中的数据绑定了才会发生更新)
updated
destroyed(VUE实例指示的所有东西都会解绑定)
语法
{{ msg }}:双大括号与vue实例的属性绑定
key属性:表示数据变化时当前标签不被复用,重新渲染
v-once:执行一次性地插值 <span v-once>这个将不会改变: {{ msg }}</span>
v-html:输出html代码 <span v-html="rawHtml"></span>
v-model:实现双向数据绑定
<input v-model="searchText">
等价于
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
条件判断,通过key属性不复用
v-if:标签显示 <p v-if="seen">现在你看到我了</p>
v-else-if:条件
v-else:if标签不成立显示
v-show:元素始终会被渲染并保留在 DOM 中
循环遍历,默认使用“就地更新”的策略,优先级高于v-if
v-for:遍历数组或对象属性 <li v-for="(item, index) in items">
<div v-for="(value, name) in object">
简写(:属性)
v-bind:(当前标签属性)-绑定标签属性 <div v-bind:id="dynamicId"></div>
简写(@事件)
v-on:(事件) -绑定dom事件 <a v-on:click="doSomething">...</a>
[动态参数]:空格和引号等字符放在其中会导致无效 <a v-bind:[attributeName]="url"> ... </a>
组件
// 全局组件注册
Vue.component('组件名', {
// 组件属性
props:['属性名']
// 组件中绑定的数据
data(){
return{
count:0
}
},
// 组件模板
template:'<p>{{count}}</p>'
});
通过$emit('事件名',参数)方法并传入事件名称来触发一个事件,父类组件响应组件内部事件
通过.native使组件调用构造器中方法
插槽:<slot name='具名插槽'>默认值</slot> 实现在组件中占位
全局命令
Vue.use( plugin )
安装 Vue.js 插件,需在new Vue()之前调用
Vue.prototype
在原型上定义组件,使其在每个 Vue 的实例中可用。
Vue.directive
注册或获取全局指令。
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
Vue.extend
使用基础 Vue 构造器,返回一个构造函数用于生成新组件
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
Vue.set( target, propertyName/index, value )
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。
Template
模板占位符,被display:none修饰的不可见的包裹元素,内部必须只有一个根元素
导入导出
- 对于导出的js中只能有一个export default,可以有多个export
- 使用require方法实现动态导入
部分导入导出
// test.js
export function test(){};
// 对于export的资源使用{}导入特定方法,对于自己写的js使用相对路径,导入依赖包直接引入包名即可
import { test } from './test.js';
// 导入全部
import * as XX from './test.js';
调用:XX.test()
全部导入导出
// 全部导出
export default{
a,
b
}
// 全部导入
import XX from './test.js';
调用:XX.a
路由及路由器
// 路由器设置
const router = new VueRouter({
mode:'history',
base:基路径,
routes:[{
path:'/',
name:'xx',
component:Home
}]
});
// 路径拦截 :name
通过this.$route.params.name可以调用到路径上的值
// get传参 http://www.baidu.com:80?name=king
通过this.$route.query.name获得请求中的参数
// 页面代码实现跳转
1. this.$route.push({path:'path',query:{name:'king'}}); --> /path?name=king
2. this.$route.push({path:'path',params:{name:'king'}}); --> /path/king
<router-link to="/xxx">go to xxx</router-link> --> 跳转到 /xxx
<router-view></router-view> 显示跳转后的组件
// 常用钩子函数
router.beforeEach((to, from, next)=>{
to:进入的路由对象
from:离开的路由对象
next:管道中的下一个方法,方法中必须调用next()才会解析hook
});
router.afterEach 全局钩子
在routes路由器中路由添加beforeEnter:(to, from, next)=>{xxx},路由独享hook
在组件中添加beforeRouteEnter(to, from, next)=>{xxx},组件独享hook
// 跳转滚动行为
在路由器中添加scrollBehavior(to,from,savePosition){
// 返回滚动位置
return {x:0,y:0};
}
axios
axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。
// get请求
axios.get('/path?name=king')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// post请求
axios.post('/path', {
a: 'aaa',
b: 'bbb'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 异步请求
const response = await axios.get('/path?name=king');
// 常用请求参数
axios({
method: 'post',
url: '/path',
headers: {'X-Requested-With': 'XMLHttpRequest'},
params: {
name:king // 在url中
},
data: { // request body中
a: 'aaa',
b: 'bbb'
}
});