vue v-on扩展，钩子函数，模板

最新推荐文章于 2024-05-08 10:00:07 发布

张施文

最新推荐文章于 2024-05-08 10:00:07 发布

阅读量1.9k

点赞数

分类专栏： vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41344974/article/details/122326042

版权

vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的事件处理，包括v-on的基本用法、事件修饰符及其在实际应用中的示例，如阻止事件冒泡和默认行为。此外，还探讨了Vue的生命周期钩子函数，如beforeCreate、created、mounted等，以及它们在不同阶段的作用。最后，提到了Vue的模块化开发，包括单文件组件、Vue脚手架的使用以及如何导入和使用element-ui进行快速开发。

摘要由CSDN通过智能技术生成

一
1、v-on
1、基本用法
v-on 指令用于给页面元素绑定事件。
语法： v-on:事件名=“js 片段或函数名”
示例：

<div id="app">
<!--事件中直接写js 片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是Vue 实例中定义的函数-->
<button v-on:click="decrement">取消</button>
<h1>有{{num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
decrement() {
this.num--; //要使用data 中的属性，必须this.属性名
}
}
})
</script>

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'
2、事件修饰符
在事件处理程序中调用event.preventDefault() 或event.stopPropagation() 是非常常见的
需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，
而不是去处理DOM 事件细节。
为了解决这个问题，Vue.js 为v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来
表示的。
 .stop ：阻止事件冒泡到父元素
 .prevent：阻止默认事件发生
 .capture：使用事件捕获模式
 .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
 .once：只执行一次

<div id="app">
<!--右击事件，并阻止默认事件发生-->
<button v-on:contextmenu.prevent="num++">点赞</button>
<br />
<!--右击事件，不阻止默认事件发生-->
<button v-on:contextmenu="decrement($event)">取消</button>
<br />
<h1>有{{num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
decrement(ev) {
// ev.preventDefault();
this.num--;
}
}
})
</script>

效果：右键“点赞”，不会触发默认的浏览器右击事件；右键“取消”，会触发默认的浏览
器右击事件）
3、按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为v-on 在监听键盘事件时添
加按键修饰符：

2、钩子函数
 beforeCreated：我们在用Vue 时都要进行实例化，因此，该函数就是在Vue 实例化时调
用，也可以将他理解为初始化函数比较方便一点，在Vue1.0 时，这个函数的名字就是
init。
 created：在创建实例之后进行调用。
 beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
 mounted：我们可以将他理解为原生js 中的window.οnlοad=function({.,.}),或许大家也在
用jquery，所以也可以理解为jquery 中的$(document).ready(function(){….})，他的功能就
是：在dom 文档渲染完毕之后将要执行的函数，该函数在Vue1.0 版本中名字为
compiled。此时页面中的{{name}}已被渲染成张三
 beforeDestroy：该函数将在销毁实例前进行调用。
 destroyed：改函数将在销毁实例时进行调用。
 beforeUpdate：组件更新之前。
 updated：组件更新之后。
示例

<body>
<div id="app">
<span id="num">{{num}}</span>
<button v-on:click="num++">赞！</button>
<h2>
{{name}}，非常帅！！！有{{num}}个人点赞。
</h2>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("=========beforeCreate=============");
console.log("数据模型未加载：" + this.name, this.num);
console.log("方法未加载：" + this.show());
console.log("html 模板未加载：
" + document.getElementById("num"));
},
created: function () {
console.log("=========created=============");
console.log("数据模型已加载：" + this.name, this.num);
console.log("方法已加载：" + this.show());
console.log("html 模板已加载：
" + document.getElementById("num"));
console.log("html 模板未渲染：
" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("=========beforeMount=============");
console.log("html 模板未渲染：
" + document.getElementById("num").innerText);
},
mounted() {
console.log("=========mounted=============");
console.log("html 模板已渲染：
" + document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=========beforeUpdate=============");
console.log("数据模型已更新：" + this.num);
console.log("html 模板未更新：
" + document.getElementById("num").innerText);
},
updated() {
console.log("=========updated=============");
console.log("数据模型已更新：" + this.num);
console.log("html 模板已更新：
" + document.getElementById("num").innerText);
}
});
</script>

9、vue 模块化开发
1、npm install webpack -g
全局安装webpack
2、npm install -g @vue/cli-init
全局安装vue 脚手架
3、初始化vue 项目；
vue init webpack appname：vue 脚手架使用webpack 模板初始化一个appname 项目
4、启动vue 项目；
项目的package.json 中有scripts，代表我们能运行的命令
npm start = npm run dev：启动项目
npm run build：将项目打包
5、模块化开发
1、项目结构
 运行流程
 进入页面首先加载index.html 和main.js 文件。
 main.js 导入了一些模块【vue、app、router】，并且创建vue 实例，关联index.html
页面的

元素。使用了router，导入了App 组件。并且使用标签
引用了这个组件
 第一次默认显示App 组件。App 组件有个图片和，所以显示了图片。
但是由于代表路由的视图，默认是访问/#/路径（router 路径默认使用
HASH 模式）。在router 中配置的/是显示HelloWorld 组件。
 所以第一次访问，显示图片和HelloWorld 组件。
 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用Go to Foo标签
2、Vue 单文件组件
Vue 单文件组件模板有三个部分；

<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
Template：编写模板
Script：vue 实例配置
Style：样式

3、vscode 添加用户代码片段（快速生成vue 模板）
文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定

{
"生成vue 模板": {
"prefix": "vue",
"body": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json
文件，图片文件等等）",
"//例如：import 《组件名称》from '《组件路径》';",
"",
"export default {",
"//import 引入的组件需要注入到对象中才能使用",
"components: {},",
"props: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//计算属性类似于data 概念",
"computed: {},",
"//监控data 中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期- 创建完成（可以访问当前this 实例）",
"created() {",
"",
"},",
"//生命周期- 挂载完成（可以访问DOM 元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期- 创建之前",
"beforeMount() {}, //生命周期- 挂载之前",
"beforeUpdate() {}, //生命周期- 更新之前",
"updated() {}, //生命周期- 更新之后",
"beforeDestroy() {}, //生命周期- 销毁之前",
"destroyed() {}, //生命周期- 销毁完成",
"activated() {}, //如果页面有keep-alive 缓存功能，这个函数会触发
",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引入公共css 类",
"$4",
"</style>"
],
"description": "生成vue 模板"
}
}

4、导入element-ui 快速开发
1、安装element-ui： npm i element-ui
2、在main.js 中引入element-ui 就可以全局使用了。
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
3、将App.vue 改为element-ui 中的后台布局
4、添加测试路由、组件，测试跳转逻辑
(1) 、参照文档el-menu 添加router 属性
(2) 、参照文档el-menu-item 指定index 需要跳转的地址
五、Babel
Babel 是一个JavaScript 编译器，我们可以使用es 的最新语法编程，而不用担心浏览器兼
容问题。他会自动转化为浏览器兼容的代码
六、Webpack
自动化项目构建工具。gulp 也是同类产品