vue笔记

创始人

2024-06-03 23:13:25

0次

第一个Vue应用


Document{{content}}
{{content}}
{{count}}
{{count+1}}
{{user}}
{{user.id}}，{{user.name}}，{{user.age}}

vue实例(对象)中el属性: 代表Vue的作用范围日后在Vue的作用范围内都可以使用Vue的语法
vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器注意: el属性值不能指定body或html标签

v-text和v-html

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部，类似于javascript 中 innerText

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部，类似于javascript中 innerHTML


 原本内容{{msg}}
原本内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hs0l4kG-1678803545834)(.\图片\1.png)]

总结

{{}}(插值表达式)和v-text获取数据的区别在于
使用v-text取值会将标签中原有的数据覆盖使用插值表达式的形式不会覆盖标签原有的数据
使用v-text可以避免在网络环境较差的情况下出现插值闪烁

v-on

基本使用


 {{msg}}
{{count}}
{{count}}

总结

事件源：发生事件dom元素

事件：发生特定的动作 click…

监听器：发生特定动作之后的事件处理程序通常是js中函数

在vue中绑定事件是通过v-on指令来完成的 v-on:事件名如 v-on:click
在v-on:事件名的赋值语句中是当前事件触发调用的函数名
在vue中事件的函数统一定义在Vue实例的methods属性中
在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据调用methods中相关方法

传参


{{msg}}
年龄: {{count}}

简化写法

日后在vue中绑定事件时可以通过@符号形式，简化 v-on 的事件绑定


{{msg}}
年龄: {{count}}

v-show，v-if， v-bind

v-show，v-if

作用

用来通过vue方式控制页面中哪些标签展示和隐藏

语法

控制那个标签显示隐藏直接在那个标签上加入v-if=“true|false|逻辑运算表达式” v-show=“true|false”

区别

1.v-if 底层通过控制dom树上元素节点实现页面标签展示和隐藏 dom树

2.v-show 底层通过控制标签css中display属性实现标签展示和隐藏 css样式

使用总结

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好，变化快用v-show 变化慢 v-if


{{msg}}
{{msg}}
{{msg}}
{{msg}}

发现if确实是操作dom树，直接删除，show改变css样式

动态更改ifshow里的值


{{msg}}
{{msg}}

v-bind

作用：用来绑定html标签中某个属性交给vue实例进行管理

好处：一旦属性交给vue实例进行管理之后,日后可以通过修改vue实例中绑定属性达到动态修改标签属性的效果

语法：对应标签上 v-bind:属性名


{{msg}}

简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名


{{msg}}

v-for

作用：用来对对象进行遍历的(数组也是对象的一种)

>
{{msg}}
遍历对象
   [{{index}} {{key}} {{value}}]  遍历数组
{{index+1}}--- {{item}}
遍历数组里面对象
编号 姓名 年龄 工资 简介 操作
{{user.id}} {{user.salary}} {{user.content}} 删除修改

编号	姓名	年龄	工资	简介	操作
{{user.id}}			{{user.salary}}	{{user.content}}	删除修改

v-model 双向绑定

v-bind：绑定作用: 用来将html标签的属性进行绑定,交给vue实例管理，单向的，只有修改vue种的数据，才能影响页面上的值，而修改页面上的值，无法影响vue中的值

v-model：模型作用: 用来将html标签的value属性进行绑定,交给vue实例管理主要用在表单元素上最能体现双向绑定机制一个指令

语法：在表单元素标签上直接加入 v-model="vue实例中一个变量"

双向绑定：表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化称之为双向绑定

MVVM架构双向绑定机制

Model：数据 Vue实例中绑定数据

VM：ViewModel 监听器

View：页面页面展示的数据


{{msg}}

表单提交示例

输入框里面的值改变，vue里的值也会改变


用户名:  
密码: 
邮箱: 
QQ: 
验证码:

购物车案例



vue系列课程

{{msg}}
编号: 名称: 价格: 数量: 


3 
编号 名称 价格 购买数量 小计
{{item.id}} {{item.name}} {{item.price}}  {{item.count}} {{(item.count * item.price).toFixed(2)}}
总价格: {{ totalPrice() }}

编号	名称	价格	购买数量	小计
{{item.id}}	{{item.name}}	{{item.price}}	{{item.count}}	{{(item.count * item.price).toFixed(2)}}

computed 计算属性

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新


{{sum}}
输入什么值都加10：

事件修饰符

stop：用来阻止事件冒泡用来阻止事件继续向外传递

prevent：用来阻止标签的默认行为

self：只监听自身标签触发的事件

once：该事件只触发一次


{{msg}}
stop修饰符

`prevent修饰符`

点我点我self修饰符(事件修饰符可以连用)

`once修饰符`

按键修饰符

事件修饰符：用来对事件一些列描述修饰

按键修饰符：用来对键盘按键事件进行修饰修饰符，keyup keydown …

.enter：对键盘回车键修饰

.tab：对键盘切换tab按键修饰

.delete：(捕获“删除”和“退格”键)

.esc：对键盘esc按键修饰

.space：对键盘的空格按键修饰

.up：对上

.down：下

.left：左

.right：右


{{msg}}

axios

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染


Axios的基本使用

vue 生命周期

在这里插入图片描述


{{msg}}
数据 v-for

组件

组件作用

用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。

全局组件注册

说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件

注意

1.Vue.component用来开发全局组件参数1: 组件的名称参数2: 组件配置{} template:''用来书写组件的html代码 template中必须有且只有一个root元素
2.使用时需要在Vue的作用范围内根据组件名使用全局组件
3.如果在注册组件过程中使用驼峰命名组件的方式在使用组件时必须将驼峰的所有单词小写加入-线进行使用

局部组件注册

通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加

//局部组件登录模板声明
let login ={   //具体局部组件名称template:'用户登录'
};
const app = new Vue({el: "#app",data: {},methods: {},components:{  //用来注册局部组件login:login  //注册局部组件}
});//局部组件使用 在Vue实例范围内

组件中定义组件数据data、methods、computed、components


{{msg}}

通过-Prop-向子组件传递数据

通过在组件上声明静态数据传递给组件内部

通过在组件上声明动态数据传递给组件内部

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

向子组件传递事件

子组件通过事件传参给父组件

插槽solt

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。)

在这里插入图片描述

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。


父组件count：{{count}}



替换到插槽aa的内容


替换到插槽bb的内容

路由

理解：一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理

前端路由：key是路径，value是组件

作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）

工作过程：当浏览器的路径改变时，对应的组件就会显示。


用户登录用户注册

router-link

组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的标签，可以通过配置 tag 属性生成别的标签.。

好处:就是可以自动给路由路径加入#不需要手动加入

属性

to

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击时，这个方法会在内部调用，所以说，点击等同于调用 router.push(...)。

声明式	编程式
	`router.push(...)`

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')// 对象
router.push({ path: 'home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

https://segmentfault.com/q/1010000021157248/a-1020000021159208

to=‘这里不管写什么都是字符串’；

:to=‘这里写的内容是会运行逻辑’,比如：
:to=‘home’;//传了变量home进去；home在data中定义的；
:to=’ “home” ‘;//传了个字符串进去；
:to=’{path:“home”}';//传了个对象进去；

你不理解主要是路由的跳转支持好几种方式：
:to=‘home’;相当于调用router.push({path:‘home’});//简写而已
:to=‘{path:“home”}’;//这么写是应为push支持的参数多一些：router.push({path:‘home’,name:‘’,param:‘’,query:‘’});


Home

Home


{{msg}}
< a href="#/login" >方式点击跳转login组件-展示用户登录点击跳转register组件-展示用户注册

< router-link to="/login" >方式点击跳转login组件-展示用户登录点击跳转register组件-展示用户注册

< router-link :to="{path:'/login'}" >方式点击跳转login组件-展示用户登录点击跳转register组件-展示用户注册

< router-link :to="{name:'Login'}" >方式点击跳转login组件-展示用户登录点击跳转register组件-展示用户注册

展示路由组件

在这里插入图片描述

路径上没有login，就不会展示任何组件

在这里插入图片描述

此时点击注册链接，访问了注册路径，就展示了用户注册组件

动态路由切换

当点击按钮访问完后台，等访问完毕，在切换到不同组件，这时候就需要动态切换组件


{{msg}}
用户登录用户注册

路由传参


{{msg}}
用户登录用户注册用户登录用户登录用户登录用户注册用户注册

嵌套路由（子路由）

在应用界面开发中通常由多层嵌套的组件组合而成。但随着页面的增多，如果把所有的页面都塞到一个 routes 数组里面会显得很乱，你无法确定哪些页面存在关系。借助 vue-router 提供了嵌套路由的功能，让我们能把相关联的页面组织在一起。


{{msg}}
用户列表

id	name	age	salary	操作
{{user.id}}	{{user.name}}	{{user.age}}	{{user.salary}}	删除修改

在这里插入图片描述

让添加和修改内容，展示在同一页面，如果不使用多个，会直接替换掉，表格内容

plate:

姓名:  
 年龄:  
 工资:

};

const useredit = {template: `id:  
 姓名:  
 年龄:  
  工资:  
 `,data() {return {user: {}}},methods: {editUser() {//发送axios请求更新用户// axios.post("url",this.user).then(res=>{//     this.user = {};//清空数据//     this.$router.push({name:'users'})//切换路由// });this.$router.push({ name: 'users' })//切换路由}},created() {let id = this.$route.query.id;console.log("updated: ", id);//发送axios请求//axios.get("url?id="+id).then(res=>this.user = res.data);this.user = { id: id, name: 'xiaochen', age: 23, salary: 2300 };}
};//定义路由规则对象
const router = new VueRouter({routes: [{path: '/users', name: 'users', component: users,//1.定义子路由children: [ //嵌套子组件路由 注意:嵌套路由中子路由不能使用/开头   访问子路由 /users/useradd{ path: 'useradd', name: 'useradd', component: useradd },msg: ](https://img-blog.csdnimg.cn/cb4ed29872bd43f4ab518b9aaaf3c762.png#pic_center)

让添加和修改内容，展示在同一页面，如果不使用多个，会直接替换掉，表格内容

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Unity自带类 --- Time类

下一篇：gma 1.1.4 (2023.03.14) 更新日志

vue笔记

第一个Vue应用

{{content}}

v-text和v-html

v-on

基本使用

{{msg}}

{{count}}

{{count}}

传参

{{msg}}

年龄: {{count}}

简化写法

{{msg}}

年龄: {{count}}

v-show，v-if， v-bind

v-show，v-if

{{msg}}

{{msg}}

{{msg}}

{{msg}}

动态更改ifshow里的值

{{msg}}

{{msg}}

v-bind

{{msg}}

简化写法

{{msg}}

v-for

{{msg}}

遍历对象

遍历数组

遍历数组里面对象

v-model 双向绑定

MVVM架构 双向绑定机制

{{msg}}

表单提交示例

购物车案例

{{msg}}

总价格: {{ totalPrice() }}

computed 计算属性

事件修饰符

{{msg}}

stop修饰符

prevent修饰符

self修饰符(事件修饰符可以连用)

once修饰符

按键修饰符

{{msg}}

axios

Axios的基本使用

vue 生命周期

{{msg}}

组件

组件作用

全局组件注册

局部组件注册

用户登录

组件中定义组件数据data、methods、computed、components

{{msg}}

通过-Prop-向子组件传递数据

通过在组件上声明静态数据传递给组件内部

通过在组件上声明动态数据传递给组件内部

单向数据流

向子组件传递事件

子组件通过事件传参给父组件

插槽solt

父组件count：{{count}}

路由

router-link

属性

to

{{msg}}

动态路由切换

{{msg}}

路由传参

{{msg}}

嵌套路由（子路由）

{{msg}}

用户列表

MVVM架构双向绑定机制

`prevent修饰符`

`once修饰符`