vue笔记-1

本文围绕Vue.js展开,介绍其是用于构建用户界面的渐进式框架,核心库关注视图层。还阐述了Vue实例的创建、数据与方法的响应式原理、指令的使用,包括参数和动态参数,以及计算属性、条件渲染、变异方法等内容,同时指出因JS限制Vue不能检测的数组变动情况。
1.什么是Vue.js
  • Vue,是一套用于构建用户见面的渐进式框架,可以自底向上逐层应用。
  • Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
  • 当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能偶为复杂的单页应用提供驱动。

2.Vue实例

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的

var vm=new Vue({
	//选项
	})

一个Vue应用由一个通过new Vue创建的根Vue实例,以及可选的嵌套的,可复用的组件树组成,所有的Vue组件都是Vue实例,举例,一个todo应用的组件树可以是这样的:

根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics


4.数据与方法

当一个Vue实例被创建时,它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

注意:只有当实例被创建时data中存在的属性才是响应式的
这里唯一的例外是使用Object.freeze().这会阻止修改现有的属性,也意味着响应系统无法再追踪变化

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

5.指令
  • 带有v-前缀的特殊特性
  • 指令特性的值预期是单个JS表达式(v-for是例外)
  • 指令的指责是当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM

例如

<p v-if="seen">现在你看到我了</p>

这里v-if指令将根据表达式seen的真假来插入/移除< p >元素


6.使用JS表达式

对所有的数据绑定,Vuw,js都提供了完全的Js表达式支持

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属Vue实例的数据作用域下作为JS被解析,
但是有个限制,每个绑定都只能是单个表达式,所以下面的例子都不会生效

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

7.参数

一些指令能够接受一个“参数”,在指令名称之后以 冒号表示
例如,v-bind指令剋有同于响应式地跟新HTML特性

<a v-bind:href="url">...<a/>

在这里href是参数,告知v-bind指令该指令将元素的href特性与表达式url的值绑定
v-on指令同于监听DOM事件

<a v-on:click="doSomthing">...</a>

8.动态参数

从2.6.0开始,可以用方括号括号括起来的JS表达式作为指令的参数

<a v-bind:[attributeName]="url"> ... </a>

如果你的Vue实例有一个data属性attributeName,其值为"href",
那么这个绑定等价于v-bind:href
同样的,可以使用动态参数为一个动态的事件名绑定函数处理

<a v-on:[eventName]="doSomething"> ... </a>

9.计算属性

什么是计算属性
模板内的表达式非常便利,但是设计他们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
计算属性的用法
在一个计算属性里面可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就可以。
?计算属性的详解


10.条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1>

带有v-show的元素始终会被渲染并保留在DOM中,v-show只是简单地切换元素地CSS属性
注意:v-show不支持< template >元素,也不支持v-else


11.变异方法

Vue包含一组 观察数据的变异方法,所以它们也将会触发视图更新

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

非变异方法,这些不会改变原始数组,但总是返回一个新数组,当使用非变异方法时,可以用新数组替换旧数组

  • filter()
  • contacat()
  • slice()

12.由于JS的限制,Vue不能做的事

由于JS限制,Vue不能检测以下变动的数组

  • 1.当你利用索引直接设置一个项时,例如
    vm.items[indexOfItem] = newValue
  • 2.当你修改数组的长度时,例如
    vm.items.length = newLength
### 关于 Vue-admin-template 的使用笔记 #### 项目简介 Vue-admin-template 是个轻量级的后台前端解决方案,基于 Vue.js 和 Element UI 构建。此模板提供了完整的权限管理功能以及丰富的组件库,适用于快速搭建企业级后台管理系统[^1]。 #### 添加新页面及其路由配置 为了向应用程序中加入新的视图,在 `src/views` 文件夹下的 `view-tree` 中创建个新的 `.vue` 文件作为该页面的内容入口——例如命名为 `index.vue`。随后需编辑位于项目的根目录内的 `router/index.js` 来定义相应的路径映射关系,从而使得当访问特定 URL 路径时能够正确加载所期望显示的新页面[^2]。 ```javascript // router/index.js 示例代码片段 import Layout from '@/layout' { path: '/example', component: Layout, redirect: 'noRedirect', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'index', component: () => import('@/views/view-tree/index'), name: 'ViewTreeIndex', meta: { title: 'View Tree Index', noCache: true } } ] } ``` #### 登录流程解析 在登录过程中,`handleLogin()` 方法负责处理用户的输入验证并发起异步请求给服务器完成身份认证过程。旦表单数据被确认有效,则会调用 Vuex store 下的动作 (`user/login`) 向服务端发送 POST 请求尝试获取令牌;如果切顺利的话,客户端将会重定向至主页或其他指定位置继续后续操作[^3]。 ```javascript // login.vue 示例代码片段 methods: { handleLogin() { console.log('开始执行 handleLogin 登录方法'); this.$refs.loginForm.validate((valid) => { if (valid) { this.loading = true; console.log('表单校验通过,开始执行 vuex 中的 login 方法'); this.$store.dispatch('user/login', this.loginForm) .then(() => { console.log('监听调用后端登录接口成功,触发路由前置钩子,准备登录到首页'); this.$router.push({ path: this.redirect || '/' }); this.loading = false; }) .catch(() => { this.loading = false; }); } else { console.error('提交错误!'); return false; } }); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值