学习笔记
作者：oMing
vue
v-on: 简称 @
<div id='app'>
<button v-on:click='Show1'> </button>
<button @click='Show2'> </button>
</div>
new Vue({
methods: {
show1(){
console.log("show1")
},
show2(){
console.log("show2")
}
}
}).$mount('#app')
v-model（数据双向绑定）
<div>
<input type="text" v-model='name'>
</div>
var vm = new Vue({
el: '#app',
data: {
name: ''
}
}
- 只要 input 内容发生变化，vue app 实例的 data 中的数据也会发生变化，反之亦然
v-bind: （给元素的 ++属性++ 绑定数据）
<div id='app'>
<h1 v-bind:class="{ white: canWhite }"</h1>
</div>
.white {
color: #fff;
}
new Vue({
data: {
canWhite: false,
}
}).$mount('#app')
{{ }}、v-text=" " 、v-html=" " （给 ++元素++ 绑定数据）
[v-cloak] {
display: none;
}
<!-- v-cloak 解决插值表达式闪烁的问题 -->
<p v-cloak>{{ data }}</p>
<p v-text='data'></p>
<p v-html='data'></p>
v-for
<div id="app">
<input type="text" v-model='name'>
<input type="submit" @click.prevent='add'>
<ul>
<li v-for='(person,index) in persons' :key='person.id'><input type="checkbox">{{ person.name }}</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
name: '',
id: 0,
persons: [
{name: 'javascript',id: 1},
{name: 'Vue',id: 2},
{name: 'jQuery',id: 3}
]
},
methods: {
add(){
let lastId = ++this.id
let newObj = {name: this.name,id: lastId}
this.persons.unshift(newObj)
this.name = ''
}
},
created(){
this.id = this.persons[this.persons.length-1].id
}
});
组件（component）
创建组件
- 方式1
<div id='app'>
<!-- 使用标签的形式使用已创建好的组件 -->
<my-com1></my-com1>
<my_com2></my_com2>
<my_com3></my_com3>
</div>
<!-- 在被控制的 app 外面，使用 template 元素创建组件的 HTML 模板结构 -->
<template id="tmp_1">
<div>
<h1>这是通过 template 创建的组件(myCom3)，有代码提示 --- {{ msg }}</h1>
<span>非常好用！</span>
</div>
</template>
var com1 = Vue.extend({
template: '<h1>这是使用 Vue.extend 创建的组件(myCom1)</h1>'
})
// 在注册 组件 的时候使用 “驼峰命名法”
// 在使用组件的时候就要使用 “短横线分割命名法”（my-com1）
Vue.component("myCom1",com1)
- 方式2
Vue.component("my_com2",{
template: "<div><h1>这是直接使用 Vue.component 创建的组件(myCom2)</h1><span>有且只有一个'根元素'div</span></div>"
})
- 方式3
Vue.component("my_com3",{
template: "#tmp_1",
// 组件中的 data
data: function(){
return {
msg: "这是组件中 data 定义的数据"
}
},
})
- 渲染组件的另一种方式
new Vue({
// 注意，这种方式和使用标签渲染的方式只能选择其中一种
render: function(createElement){
let myCom1 = createElement("myCom1")
return myCom1
},
})
插槽 slot
<!-- 匿名插槽 -->
<div class="app">
<father></father>
</div>
<template id="father">
<div>
<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
<son>
<div>我是son中的追加数据1</div>
<div>我是son中的追加数据2</div>
<div>我是son中的追加数据3</div>
</son>
</div>
</template>
<template id="son">
<div>
<div>我是头部</div>
<slot>我是默认数据</slot>
<div>我是尾部</div>
</div>
</template>
<!-- 具名插槽 -->
<div class="app">
<father></father>
</div>
<template id="father">
<div>
<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
<son>
<div slot="one">我是son中one的追加数据</div>
<div slot="two">我是son中two的追加数据</div>
</son>
</div>
</template>
<template id="son">
<div>
<div>我是头部</div>
<slot name="one">我是one默认数据</slot>
<slot name="two">我是two默认数据</slot>
<div>我是尾部</div>
</div>
</template>
<!-- v-slot插槽 -->
<div class="app">
<father></father>
</div>
<template id="father">
<div>
<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
<son>
<template v-slot:one>
<div>我是son中one的追加数据</div>
</template>
<template v-slot:two>
<div>我是son中two的追加数据</div>
</template>
<!-- #default == v-slot:default="scope" default用于匿名插槽-->
<!-- <template #default="scope">
<div>names --- {{ scope.names }}</div>
<li v-for="(name,i) in scope.names" :key="i">{{ name }}</li>
</template> -->
<!-- 具名的v-slot 插槽名字为names -->
<template #names="scope">
<div>names --- {{ scope.names }}</div>
<li v-for="(name,i) in scope.names" :key="i">{{ name }}</li>
</template>
</son>
</div>
</template>
<template id="son">
<div>
<div>我是头部</div>
<slot name="one">我是one默认数据</slot>
<slot name="two">我是two默认数据</slot>
<slot name="names" v-bind:names="names">我是names默认数据</slot>
<div>我是尾部</div>
</div>
</template>
<!-- 作用域插槽 -->
<div class="app">
<father></father>
</div>
<template id="father">
<div>
<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
<son>
<!-- slot-scope="scope"的作用：接收子组件暴露的数据 -->
<template slot-scope="scope">
<div>names: {{ scope.names }}</div>
<li v-for="(name,i) in scope.names" :key="i">{{ name }}</li>
</template>
</son>
</div>
</template>
<template id="son">
<div>
<div>我是头部</div>
<!-- v-bind:names="names"的作用：将当前子组件的names数据暴露给父组件 -->
<slot v-bind:names="names">我是one默认数据</slot>
<!-- <slot :names="names">我是one默认数据</slot> -->
<div>我是尾部</div>
</div>
</template>
Vue.component("father",{
template: "#father",
components: {
"son": {
template: "#son",
data: function(){
return {
names: ['oMing','Unity','Vue','JS'],
}
},
}
},
})
new Vue({
el: ".app",
})
vue-router 路由
<div id="app">
<!-- 第一种赋值方式 -->
<router-link to="/login?name=oMing&age=21" tag="button">登录</router-link>
<!-- 第二种赋值方式 -->
<router-link to="/register/vue/5" tag="button">注册</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
// 1、定义组件
const login = {
template: "<h1>登录界面</h1>",
// 生命周期方法
created(){
console.log(this.$route)
// 第一种获取方式
console.log(this.$route.query.name + " " + this.$route.query.age)
}
}
const register = {
template: "<h1>注册界面</h1>",
// 生命周期方法
created(){
console.log(this.$route)
// 第二种获取方式
console.log(this.$route.params.name + " " + this.$route.params.age)
}
}
// 2、根据自定义的路由规则创建 路由对象
const vue_router = new VueRouter({
// 3、定义路由（切换规则）
routes: [
// 数组中的每一个对象就是一条规则
{ path: '/login', component: login },
// 第二种赋值方式
{ path: '/register/:name/:age', component: register },
// 路由重定向
{ path: '/', redirect: '/login' }
],
// 修改 router-link 的类名
linkActiveClass: "lr-active",
})
new Vue({
// 4、将创建好的 路由对象 绑定 到 app实例
router: vue_router,
}).$mount("#app")
过滤器（格式化文本内容）
- 把 # 替换为 vue
<div id='app'>
// 不需要传message
<p>{{ message | messageFormat('vue') }}</p>
</div>
Vue.filter('messageFormat',function(message,arg){
return message.replace(/#/g,arg)
})
new Vue({
el: '#app',
data: {
message: 'Fireming love #,# is great'
}
})
自定义指令（使用 Vue.directive() 定义全局的 指令）
- 全局
<div id='app'>
<input type="text" v-focus v-color="'blue'" v-fontweight="1000">
</div>
Vue.directive("focus", {
// el 是一个原生的 js 对象，DOM对象
// 当指令绑定到元素上的时候触发
bind: function (el) {
},
// 当绑定元素 input 插入到 DOM 中的时候触发
inserted: function (el) {
// 聚焦元素
el.focus()
},
// 当 VNode 更新的时候触发
updated: function () {
}
})
Vue.directive("color", {
bind: function (el, binding) {
el.style.color = binding.value
}
})
- 局部
new Vue({
el: '#app',
// 自定义私有 指令
directives: {
"fontweight": function (el, binding) {
el.style.fontWeight = binding.value
}
}
})
自定义按键修饰符
<input v-on:keyup.113="submit">
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
watch (用于监听数据变化)
<div id='app'>
<input type="text" v-model:value='num'>
</div>
new Vue({
el: '#app',
data: {
num: 1,
}
watch: {
num: function(newValue,oldValue){
console.log(newValue,oldValue)
}
}
})
