当前位置：网站首页 > 热门文章 > 正文

Vue.js各指令、事件整理 vue常见指令和含义

bigegpt 2024-10-11 10:54 9 浏览

Vue基础常用指令循环v-for数组v-for="name in arr" , json格式v-for="name in jason", v-for="(k,v) in json"； {{$index}} , {{$key}}
事件v-on:click/mouseout/mouseover/...,如： v-on:click="函数"，该指令可以简写为@click="函数"
显示隐藏： v-show="true|false"
事件对象 @click="func($event)", 参数$event相当于js中的event
事件冒泡，阻止冒泡：js的方式:event.cancleBubble = true或@click.stop
事件默认行为，阻止默认行为：js的方式： event.preventDefault()或contextmenu.prevent
键盘事件：@keydown ，@keyup等等
属性v-bind，如v-bind:src="", 简写:src=""
样式clsaa和style:class="" 或 v-bind:class="":style="" 或 v-bind:style=""
模板文本{{msg}}}，指令v-text=""只输出一次 {{*msg}}html转义输出 {{{msg}}}，指令v-html=""
过滤器：{{msg | filterA}} ，{{msg | filterA, filterB}}
计算属性computed：里面可以放置一些复杂的业务逻辑代码
动画效果transitions：可以结合第三方 CSS 动画库，如 Animate.css 结合使用十分有用

webpack配置认识

entry：配置入口js：main.js
output：配置打包后的信息
path：输出文件的路径(_dirname：文件当前所在目录地址)
filename：输出的文件名称：build.js
loaders：下载编译相关文件的loader，如：vue-loader、css-loader、vue-style-loader，vue-html-loader、vue-hot-reload-api等

vue-cli 脚手架安装：

支持Vue的UI组件

Vue自定义组件的写法

Vue.use(componentName)方法引用，如编写loading.vue组件：目录结构：

|- components/|- loading/ |- loading.vue |- index.js

在loading.vue中按照一般组件的方式定义组件功能及样式模板，然后在index.js中导出组件:index.js

监听路由变化 (使用vue-router) watch(){ $route(to, from){ ... } }

相关推荐