Diagram of the relationship between MVC and MVVM
1. mvc (back-end thinking)
2. mvvm (front-end thinking)
Simple instructions
1.v-cloak
<div v-cloak>{ { msg }}</div>
Solve the flickering problem of interpolation expressions ({ {}} appearing when the page is refreshed and loaded.
Note: matching style [v − cloak] dislpay: none \color{red}{Note: matching style [v-cloak] {dislpay: none }}Note : with engagement comp formula [ V−cloak]dislpay:none
**
- Do not parse tags
- Only replace placeholders, do not overwrite the original content
2. v-text
<div v-text = "msg"></div>
- No flicker problem by default
- Override the content of the element
- Do not parse tags
3.v-html
<div v-html= "msg"></div>
- Overwrite the content of the element
- Will parse tags
4.v-bind: (abbreviated as':')
<input type='button' v-bind:title='mytitle'></div>
Binding attributes, one-way data binding. When
v-bind is not added,'mytitle' is considered to be a string, and after it is added, it is a variable or legal js expression5.v-on: (abbreviated'@')
Bound event
- Click: v-on:click ='Method name' -------@click
- Floating: v-on:mouseover ='method name' -------@mouseover
- Leave: v-on:mouseout ='method name' -------@mouseout
- Mobile touchstart, touchend, touchmove...
6. Event modifier
Written after the binding event name: such as @click.stop
- .stop: stop bubbling
- .prevent: Prevent default behavior
- .capture: Change to event capture
- .self: The event triggers a callback when the element itself is triggered
- .once: trigger only once
7. Data two-way binding instruction v-model
<input type ='text' v-module = '属性名'>
Note: Only applicable to form elements\color{red}{Note: Only applicable to form elements} Note : only suitable for use in the Table single element hormone8.v-for loop traversal
<p v-for = '(值, 索引) in 数组名/对象名' :key=''></p>
- The value of key can only be srting or number type
- Specify the key value in the form of binding attributes
9.v-if、v-show
<p v-if = '条件'></p>
<p v-show = '条件'></p>
- v-if delete or create element
- High switching performance consumption, if elements need to be switched frequently, v-if is not applicable
- v-show hides or shows elements, which is equivalent to switching the display value =>'none'
- There is a high initial rendering cost. If the element does not need to be displayed, v-show is not applicable
filter
Used as a common text formatting, it can be used in: mustache interpolation and v-bind expression;
{
{msg | filter name (passing parameter)}} ===> After processing the data through the filter, return Display the name;
'|' => pipe character; the
filter call adopts the principle of proximity, when the global filter and the private filter have the same name, the private filter is preferred;
1. Global filter
All vm instances are shared
Definition: Vue.filter('filter name', function(msg,arg){ //data processing})
Definition location: Define outside the vm instance
Parameters:
- msg: the data before the pipe character
- arg: received parameter
2. Private filter (partial)
Definition location: inside vm, filters: {}, at the same level
as methods Definition:filters:{ 过滤器名称(管道符前数据,接受的参数) {}}
"========="
(small knowledge): string.padStart(2, '0') is used to supplement the single digit zero
Custom instruction
The name of the custom command starts with'v-'
1. Overall
Definition: Vue.directive('Custom command?', {})
Parameter 1: When defining the command name, the custom command name is not prefixed with'v-', and
parameter 2: Object, there are some in the object Instruction related functions, perform corresponding operations at a specific stage
Example: focus event
<input type='text' v-focus>
Vue.directive('focus', { 每个函数第一个参数为 el,表示被绑定指令的元素,此时可使用原生的方法 bind:function(el){ //指令绑定到元素上时执行,仅一次 el.focus() //元素还未插入到DOM 中,不生效 //多为与样式相关的操作 } inserted:function(el){ //元素插入到 DOM 中的时候执行,仅一次 el.focus() //元素已经插入到DOM 中,生效 //多为与js相关的操作 } updated:function(){ //VNode 更新时执行,可能触发多次 } })
Function related parameters
2. Private
Definition location: defined in the vm instance, at the same level
as methods Definition:directives: {'自定义指令名': {相关函数}}
function abbreviation (global/private):
Instance life cycle
Life cycle functions are at the same level as methods
**html:** <div id='app'> <input type='button' value='改变msg' @click="msg='No'"> <p id='p'>{ { msg }}</p> </div> **js:** var vm = new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('执行了show方法') } }, })
***创建期间的生命周期函数*** beforCreate(){ //实例被完全创建之前执行 //在这个生命周期内,data 和 methods 中的数据未初始化 console.log(this.msg); //undefined this.show() //报错,this.show() is not a function } created() { //在这个生命周期内,data 和 methods 中的数据初始化完成 //可调用 methods 中的方法和操作 data 中的数据 console.log(msg) //ok this.show() //执行了show方法 } beforeMount() { //模板在内存中编译完成,还未渲染到页面中 //在这个生命周期内,页面中的元素未被替换,还是原来写好的模板字符串 console.log(document.getElementById('p').innerHtml) //{ { msg }} } mounted() { 实例创建期间的最后一个生命周期函数 //将编译好的内存中的模板挂在到页面中 console.log(document.getElementById('p').innerHtml) //ok } ***组件运行阶段的生命周期函数*** beforeUpdate() { //界面还未被更新,但数据已被更新 //组件/数据被改变时触发 //例:当点击input按钮时: console.log(document.getElementById('p').innerHtml) // ok ===>页面未更新 console.log(this.msg) // No ===>数据已经改变 } undaated(){ //页面与数据都已更新 //组件/数据被改变时触发 //例:当点击input按钮时: console.log(document.getElementById('p').innerHtml) // No ===>页面已更新 console.log(this.msg) // No ===>数据已经改变 } ***组件销毁阶段的生命周期函数*** beforeDestroy() { //还未执行销毁过程 } destroyed() { //组件被完全销毁,此时组件中所有的数据、方法、指令、过滤器等 都不可用 }
Animation
Wrap the elements that need animation with tags.
Style:
v-enter, v-leave-to {} ——>Enter and leave
v-enter-active, v-leave-active {} ——>Intermediate process animation
Click to view: vue Animation detailed introduction
Components
Definition: Split the amount of code of the vue instance, divide different components into different functional modules, and call them when needed
1. Create globally
<div id='app'> <my-com1></my-com1>//引用组件 </div> <template id='tmp1'> <div> //根元素 <p>创建的组件</p> </div> </template> ****Vue.component('组件名称', { //创建的组件模板对象 })**** Vue.component('myCom1', { template: '#tmp1' }) 注: 1.若组件名称使用驼峰命名时,调用时用小写,并且单词之间‘-’连接,若未使用驼峰命名,则直接引用组件名; 2.常见的模板对象必须有一个根元素包裹
2. Partial creation (private)
Inside the instance, at the same level as methods
components: { //定义实例内部私有组件 组件名: { template: '' } }
3. Data and methods in the component
Vue.compontent('com1', { template: '', data: function() { return {} //组件中的 data 为一个函数,且必须 return 一个对象 }, methods: {} })
4. Component switching
<component :is="'组件名'"></component>
5. Component pass value
1. Father to Son
<div id='#app'> <com1 :parentmsg='msg' v-on:func='show'></com1> </div> <template id='son'> <div> <input type='button' value='点击调用父组件传递的方法' @click=‘parentfunc’> <p>子组件---{ { parentmag }}</p> </div> </template> var vm = new Vue({ el: '#app', data: { msg: '父组件数据' }, methods: { show() { console.log('调用了父组件方法') } }, //定义子组件: components: { com1: { template: '#son', props: ['parentmsg'], //将父组件传递的parentmsg属性在props数组中定义,然后才能使用,但是不做更改 methods: { parentfunc() { this.$emit(‘func’) } } } } }) 总结: (1)在父组件调用子组件的地方,绑定一个自定义属性,属性值为要传递的数据,在子组件定义的地方通过props数组接收 (2)若调用父组件的方法,在父组件调用子组件的地方,使用事件绑定方式,自定义事件名,在子组件的方法中,通过this.$emit('方法名')调用父组件方法
2. The child passes the parent
method to the parent component through the child component. The data to be passed to the parent component is returned as a parameter. In the parent component, the parameter is accepted when the method is called. If the passed is an object, it is in the parent component Define variable reception in data