【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 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)
		}
	}
})