参考官网
2属性绑定和事件绑定如果不使用vue就会改变dom层面数据
使用vue后 mounted会在浏览器加载完成后 执行 是在数据层面上加的
渲染结果
以上就是数据驱动视图
v-bind:title="message"
渲染结果
v-on:click="方法名"
用户名 密码响应 双向绑定
效果是点一下隐藏 点一下出来
v-if=‘show’ 在data()中定义为true
将其放到另一个组件的模板中：
ps：记得放在conter下面 因为是挂载在conter下面
<ol>
<!-- 创建一个 todo-item 组件实例 -->
<todo-item></todo-item>
</ol>
效果如下：
父组件是connter 子组件是TodoItem
这里是将父的参数传递给子参数
通过组件形式传递
分成了导航栏和view view又分成了sidebar和content两个组件
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
组件全局注册
const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)
Vue.createApp({})
.component('SearchInput', SearchInputComponent)
.directive('focus', FocusDirective)
.use(LocalePlugin)
Conter是根组件 counter是div
生命周期的钩子函数
效果
计算 computed是处理响应式数据
方法和计算属性效果一样 但是计算有缓存 方法需要调用多次
监听器
监听版本
const vm = Vue.createApp({
data() {
return {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
},
watch: {
firstName(val) {
this.fullName = val + ' ' + this.lastName
},
lastName(val) {
this.fullName = this.firstName + ' ' + val
}
}
}).mount('#demo')
计算版本
const vm = Vue.createApp({
data() {
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}).mount('#demo')
active样式
也可以用于对象中
不能同时使用 v-for 和v-if 否则会出问题
v-for需要绑定一个key属性 一般不用index 用name或id key是渲染的标识
会在按钮sayhi 中先后d出button和hi
多事件处理 用逗号隔开
{}取出值
import 和export default
实现延迟1s打印一个，将异步变同步,回调地狱，通过promise解决
和路由相关的代码放在 router下的index.js
const User = {
template: 'User {{ $route.params.id }}',
}
路径参数 用冒号 : 表示。
当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。
因此，我们可以通过更新 User 的模板来呈现当前的用户 ID （this 是vm实例）
2.10路由匹配语法 在参数中自定义正则由于，orderId 总是一个数字，而 productName 可以是任何东西，所以我们可以在括号中为参数指定一个自定义的正则：
const routes = [
// /:orderId -> 仅匹配数字
{ path: '/:orderId(\d+)' },
// /:productName -> 匹配其他任何内容
{ path: '/:productName' },
]
现在，转到 /25 将匹配 /:orderId，其他情况将会匹配 /:productName
可重复的参数如果你需要匹配具有多个部分的路由，如 /first/second/third，你应该用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重复：
接受的是一个数组['12','23','12']
在router下的index.js中用children引入子路由
在user下的index.vue下嵌套子页面
修改：跳转的id不写死 而是通过$route.parama.id获得
除了 path 之外，你还可以为任何路由提供 name。
这有以下优点：
没有硬编码的 URL
params 的自动编码/解码。
防止你在 url 中出现打字错误。
绕过路径排序（如显示一个）
const routes = [
{
path: '/user/:username',
name: 'user',
component: User
}
]
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link>
在这两种情况下，路由将导航到路径 /user/erina。
简单来说，就用路由名字代替复杂的url
12号用户的url与13号用户的url的传递方式 对比，12号是通过参数的形式传递
视图命名同一个页面 存在两个组件
有多个router view 时的渲染，这样会同时出现Home和About的关系
注意：在 Vue 实例中，你可以通过 $router 访问路由实例。
因此你可以调用 this.$router.push。
除了使用
当你点击 router.push(...) ：
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })
//如果提供了 path，params 会被忽略，
//上述例子中的 query 并不属于这种情况。
//取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path
const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user
由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。
router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。
在根主键App内 访问/时 利用setTimeout函数3s后自动跳转到about页面
也是通过 routes 配置来完成，下面例子是从 /home 重定向到 /：
const routes = [{ path: '/home', redirect: '/' }]
重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。
那么什么是别名呢？
将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。
const routes = [{ path: '/', component: Homepage, alias: '/home' }]
你的组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。
虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为：
我们可以将下面的代码
const User = {
template: 'User {{ $route.params.id }}'
}
const routes = [{ path: '/user/:id', component: User }]
替换成
const User = {
props: ['id'],
template: 'User {{ id }}'
}
const routes = [{ path: '/user/:id', component: User, props: true }]
当 props 设置为 true 时，route.params 将被设置为组件的 props
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
什么是“状态管理模式”？ 让我们从一个简单的 Vue 计数应用开始
const Counter = {
// 状态
data () {
return {
count: 0
}
},
// 视图
template: `
{{ count }}
`,
// *** 作
methods: {
increment () {
this.count++
}
}
}
createApp(Counter).mount('#app')
其实 有state属性就可以做到全局共享变量，我们甚至可以通过对state.count来修改对应的值，但是state是全局的，是多个组件的共享属性，那么对这个属性的 *** 作就不应该放在具体的组件当中，
所以需要mutations，保存了对共享数据的修改逻辑
可以通过 store.state 来获取状态对象，并通过 store.commit 方法触发状态变更：
store.commit(‘increment’)
console.log(store.state.count) // -> 1
plus函数通过store.commit(‘increment’)来对共享变量进行 *** 作逻辑
3.3async 和await
在store index.js下引入store 的实例
await 后面接一个会return new promise的函数并执行它
await 只能放在async函数里
使用computed 中this.$store.state.count 直接在template中引用count
mapstatus
或者 通过… 复合不同类型的函数
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步 *** 作
调用dispatch函数
action 提交mutation 然后m修改state的数据
module
3.9 element-plus 3.10组合式api在vue3.0 不使用setup 的写法
Delete 需要在export中导出
setup的理解：setup中return的东西可以暴露给任何一个组件
ref 变量变成响应式的
import {ref} from ‘vue’
效果
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）