Vue.js
文章平均质量分 65
Vue框架基础知识点介绍
请叫我杰拉德6
这个作者很懒,什么都没留下…
展开
-
Vue.js--自定义指令
在Vue中自定义指令分为:全局自定义指令和局部自定义指令1.全局自定义指令①首先自定义一个叫’focus’的自定义指令,使用时候加 v-focus 即可,加上v-focus,执行时候会干一件事情,会有一个叫 mounted 生命周期函数,指的是当这个指令挂载到 某个dom节点上,mounted函数会自动执行,并且接收第一个参数el(当前挂载dom节点), 然后开始自动执行el.focus()②不管是全局自定义指令和局部自定义指令,里面都可以调用Vue生命周期函数,比如mounted(),before原创 2021-07-21 22:21:02 · 327 阅读 · 2 评论 -
Vue.js--动画
1、在Vue中实现一个简单的小动画<style> @keyframes leftToRight { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 0% {原创 2021-07-21 22:20:37 · 924 阅读 · 3 评论 -
Vue.js基础---组件
Vue.js基础—组件组件,就是网页上面分割出来的一部分,一部分的内容,小到甚至一个购物车,一个输入框都可以看成是一个组件1、创建父组件和子组件创建一个父组件和一个子组件<body> <div id="root"></div> <script src="./vue.global.js"></script> <script> //创建一个Vue实例 const app原创 2021-07-21 22:20:02 · 306 阅读 · 6 评论 -
Vue.js基础---常用内置指令
Vue.js基础—常用内置指令1.v-html和v-text的区别v-html作用:更新元素的 innerHTML(innerHTML 指的是标签间的所有内容,并且innerHTML包含标签,标签会被识别,并且会被解析,呈现对应的效果)v-text作用:更新元素的 textContent相同点:2者在标签内设置内容都无效<body> <div id="app"> <div :style="{fontSize:fontSize + 'px' }原创 2021-07-07 21:53:19 · 368 阅读 · 1 评论 -
Vue.js基础---简单的模板页面
Vue.js基础—简单的模板页面1.模板页面包含了哪些东西?–> html + js2.js以什么形式(语法)存在?插值: 双大括号表达式,插入一个动态的值在标签内文本内容上,动态显示数据指令: vue自定义标签属性(以v-开头),属性值是一个js的表达式 v-model=“msg”,指令操作的是标签指令和插值中的表达式 自动 从data中动态取数据3.双向数据绑定, 2个重要特点:只要改变data中的数据值, 界面就自动更新 ===> 数据(单向)绑定 data =原创 2021-07-03 17:07:57 · 1179 阅读 · 1 评论 -
过滤器
理解:对要显示的数据进行特定的格式化后再显示,但它并没有改变原数据,只是产生新的对应数据项目需求,接收到数据为35000,展示数据时显示3.5万过滤器分为全局和局部,先用局部过滤器,后面再用全局的办法来解决局部过滤器:用于差值表达式和v-bind<div id="demo"> {{price | priceFilter}}</div><!-- 插值表达式走边:要展示数据 ,右边:局部过滤器的名字 --></div><script原创 2021-05-23 22:00:22 · 52 阅读 · 0 评论 -
Vue实例生命周期钩子函数
理解:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会这些生命周期钩子函数,是Vue定义好了的,它没有去使用,是给你干活用的...原创 2021-05-23 21:07:29 · 59 阅读 · 0 评论