vue3基础大全
vue3基础大全
创建vue应用实例
const app = Vue.createApp({
//实例里的选项
data() {
return { count: 4 }
}
})
//挂载到HTML dom 对象上 一般放在最后面
const vm = app.mount('#app')
插入响应 的值
<span :id="ddc" :class="{'demo': use}">Message: {{ msg }}</span>
条件和循环
<template v-if="show">
<li v-for="(item ,id) in items">666+{{id}}---{{item}}</li>
注册局部组件
<script>
const buttonC = {
data() {
return {
count: 0,
}
},
template: `
<button @click="count++">点了{{count}} 次</button>`
}
const app = Vue.createApp({
//实例里的选项
data() {
return { count: 4 }
}
//局部组件
components: {
/两个组件
'my-component-a': myComponentA,
'button-counter': buttonC
},
})
调用组件在这里插入代码片
<button-counter></button-counter>
父子组件传值
定义另一个组件
const myComponentA = {
//传值别忘了,这两个值是父组件,也就是挂载的根组件,以这个组件的 自定义属性传入的
props: ['title', 'name'],
template: `<h2>我的第一个组件666 + prop的数据 {{title}}+{{name}}</h2>
<footer>完蛋了</footer>
不要怕变红 多个根元素就加样式类了
<footer :class="$attrs.class">不要怕</footer>`
}
HTML中
绑定的两个自定义属性
<my-component-a class="believe_in_youself"
v-for="(value,name) in items"
:title="value"
:name="name">
</my-component-a>
prop验证
const myComponentA = {
//这样传值有点分不清父子关系 //本身就是一个根组件
// props: ['title', 'name'],
// //验证,警告
// props: {
// // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
// propA: Number,
// // 多个可能的类型
// propB: [String, Number],
// // 必填的字符串
// propC: {
// type: String,
// required: true
// },
// // 带有默认值的数字
// propD: {
// type: Number,
// default: 100
// },
// // 带有默认值的对象
// propE: {
// type: Object,
// // 对象或数组默认值必须从一个工厂函数获取
// default: function () {
// return {message: 'hello'}
// }
// },
// // 自定义验证函数
// propF: {
// validator: function (value) {
// // 这个值必须匹配下列字符串中的一个
// return ['success', 'warning', 'danger'].indexOf(value) !== -1
// }
// }
// },
//传值别忘了
props: ['title', 'name'],
template: `<h2>我的第一个组件666 + prop的数据 {{title}}+{{name}}</h2>
<footer>完蛋了</footer>
不要怕变红 多个根元素就加样式类了
<footer :class="$attrs.class">不要怕</footer>`
}
计算属性
需要一个函数返回作为getter
computed: {
card: {
get: function () {
return "babala";
},
set: function () {
this.msg = "babiq";
}
}
监听属性
watch: {
watched: function (val) {
this.watched = val;
this.changed = val;
},
changed: function (val) {
this.changed = val;
this.watched = val;
},
}
html
v=model 双向绑定
<input type="text" v-model="watched">
<input type="text" v-model="changed">
组件样式绑定
HTML中 第一行绑定给组件
<my-component-a class="believe_in_youself"
v-for="(value,name) in items"
:title="value"
:name="name">
</my-component-a>
组件有多个根元素就不会渲染样式,要在定义组件模板的时候用$attrs.class进行指定
template: `<h2>我的第一个组件666 + prop的数据 {{title}}+{{name}}</h2>
<footer>完蛋了</footer>
不要怕变红 多个根元素就加样式类了
<footer :class="$attrs.class">不要怕</footer>`
事件处理
v-bind 缩写 @
<button @click="clickEvent($event)">点了</button>
在方法选项中定义方法
methods:
{
clickEvent(event){
alert(event.target.tagName);
console.log(event);
console.log(event.target)
}
},
事件修饰符
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
给组件添加点击事件
native 修饰符可以解决这个问题
至于.native修饰符 它的作用就是监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。
//
子组件调用父组件的方法
方法一
<script >
const app = Vue.createApp({
methods: {
sayHi() {
console.log('Hi! 父组件方法')
}
}
})
app.component('welcome-button', {
//自定义事件,调用
emits: ['welcome'],
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
<section><p>srdfsdsdf</p></section>
`
})
app.mount('#emit-example-simple')
</script>
//html
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
如果在子组件中触发一个以 camelCase (驼峰式命名) 命名的事件,你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。
表单
v-model 会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值,使用的是 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为属性并将 change 作为事件。
自定义指令
<div id="app">
<p>页面载入时,input 元素自动获取焦点:</p>
<input v-focus>
</div>
<script>
const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
// 当被绑定的元素挂载到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus()
}
})
app.mount('#app')
</script>
路由
练习的源码
使用绑定之后 to 可以指定表达式
<div>
<!-- 路由来了 矢量操纵-->
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/">Go to Home</router-link>
<router-link to="/count">Go to About</router-link>
<router-link :to="{ path: '/home' }">Go to About</router-link>
<!-- 命名的路由 -->
<!-- <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>-->
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<!-- <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>-->
<router-link v-bind:to="{ path: '/route1'}" active-class="_active">Router Link 1</router-link>
<router-link to='/route1' tag="span">Router Link 2</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view>
</router-view>
要在脚本里定义一些路由关系,然后创建路由i
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{path: '/', component: myComponentA},
{path: '/count', component: buttonC},
{path: '/home', component: buttonC},
{path: '/route1', component: myComponentA}
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
//缩写 routes
routes: routes
})
最后挂载前使用路由
app.use(router)