【Vue学习笔记】—— vue的基础语法 { }
学习笔记
-
作者：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>
div>
.white {
color: #fff;
}
new Vue({
data: {
canWhite: false,
}
}).$mount('#app')
{{ }}、v-text=" " 、v-html=" " （给 ++元素++ 绑定数据）
[v-cloak] {
display: none;
}
<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>
<template id="tmp_1">
<div>
<h1>这是通过 template 创建的组件(myCom3)，有代码提示 --- {{ msg }}h1>
<span>非常好用！span>
div>
template>
var com1 = Vue.extend({
template: '这是使用 Vue.extend 创建的组件(myCom1)
'
})
// 在注册 组件 的时候使用 “驼峰命名法”
// 在使用组件的时候就要使用 “短横线分割命名法”（my-com1）
Vue.component("myCom1",com1)
- 方式2
Vue.component("my_com2",{
template: "这是直接使用 Vue.component 创建的组件(myCom2)
有且只有一个'根元素'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中的追加数据1div>
<div>我是son中的追加数据2div>
<div>我是son中的追加数据3div>
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>
<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>
<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>
<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>
<slot v-bind: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: "登录界面
",
// 生命周期方法
created(){
console.log(this.$route)
// 第一种获取方式
console.log(this.$route.query.name + " " + this.$route.query.age)
}
}
const register = {
template: "注册界面
",
// 生命周期方法
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)
}
}
})