当前位置：首页 > news >正文

前端_006_Vue2

news 2025/7/4 7:55:36

文章目录

vue常用属性
生命周期
模版语法
自定义组件
- 全局注册
单文件组件
路由

本文全部参考Vue2

简介：Vue是一个数据响应式，MVVM模型的JS框架

官网：https://v2.cn.vuejs.org/v2/guide/

API：https://v2.cn.vuejs.org/v2/api/#methods

引用：

或者

示例：

var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

vue常用属性

属性名		参数范围	限制	注意点
el	绑定Vue实例挂载的DOM元素	String\|Element	只在用 `new` 创建实例时生效	实例挂载之后，元素可以用 `vm.$el` 访问
data	数据	Object\|Function	自定义组件实例时只接受Function参数，正常Vue实例一般都是不含状态行为的Object	实例创建之后，可以通过 `vm.$data` 访问原始数据对象
methods	函数	{ [key: string]: Function }	methods中不要使用箭头函数，this将不会指向Vue实例	可以直接通过 VM 实例访问这些方法
computed	计算属性	{ [key: string]: Function \|{ get: Function, set: Function } }		计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。计算属性默认只有 getter
watch	监听回调	{ [key: string]: string\|Function\|Object\|Array}		值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 `$watch()`，遍历 watch 对象的每一个 property

生命周期

ps:生命周期函数参数只能是Function,具体几个钩子函数参考官方手册，用时查

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

模版语法

#文本
{{message}}
{{message.split('')}} //支持JS表达式v-once  无值  //表示该值只渲染一次v-html 值为Stringv-bind:[attribute]  缩写 :[attribute] //支持属性值中使用JS表达式v-if 值为String //控制是否移除该元素
v-show 值为String //控制是否展示，DOM元素一直在v-on:[Event]   缩写 @[event]  //绑定事件   支持属性值中使用JS表达式v-for 值为String  "item in items" "(value,name) in object" //可以遍历数组或者对象里属性v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle"><!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected"><option value="abc">ABC</option>
</select>v-model,v-for,v-bind组合使用
<select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<span>Selected: {{ selected }}</span>

注意：v-on:[event] 事件处理支持事件修饰符

键盘修饰符

系统修饰符

自定义组件

ps：Vue自定义组件只能在Vue实例里面使用

组件中常用属性

属性名	作用	参数范围	注意
data		Object\|Function
props	设定自定义组件元素属性	Array \| Object	可以指定该元素属性限制条件
template	模板，会替换原有的DOM元素	String	板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。template值字符串里可以使用Vue的数据绑定{{param}}
	组件属性，可以局部注册	Object

全局注册

// 简单语法
Vue.component('props-demo-simple', {props: ['size', 'myMessage']
})// 对象语法，提供验证
Vue.component('props-demo-advanced', {props: {// 检测类型height: Number,// 检测类型 + 其他验证age: {type: Number,default: 0,required: true,validator: function (value) {return value >= 0}}}
})

单文件组件

.vue后缀文件，基本就是Vue文件里 template,script,style 一个网页需要的元素放在一个文件里，不同的设计思路

<template><p>{{ greeting }} World!</p>
</template><script>
module.exports = {data: function() {return {greeting: "Hello"};}
};
</script><style scoped>
p {font-size: 2em;text-align: center;
}
</style>