大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

文章目录

关于 vue 设计模式的简介
1.Vue实例
2.Vue 数据绑定
3.VUE数据绑定测验
4. Vue 事件
5. Vue 组件
6. Vue 生命周期
- 钩子函数：

关于 vue 设计模式的简介

今天讲实例，原理请参照这篇文章！vue 设计模式的简介

1.Vue实例

下面是vue 中一些属性的说明~

data	说明
el	唯一根元素
data	Vue实例数据对象
watch	监听数据变化
filters	过滤器
methods	定义Vue实例中的方法
computed	计算属性
components	定义子组件

创建简单 vue 实例

<script>
  //需要使用 new 关键字
  var vm = new Vue({ 
   
    // 内容
  })
<script>

Jetbrains全家桶1年46，售后保障稳定

声明一下，以下所有案例均引用 vue.js 文件< script src=”…/js/vue2.6.10.js”> </ script> 注意引用的路径~如果怕错的话，src中可以使用这个网址”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”，代码中出现的 yzx ,可以忽略，这是我加的作者标识~

el 唯一根标签：

在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。

<!-- 定义唯一根元素div -->
<div id="app">{ 
   { 
   yzxname}}</div>
<script>
var vm = new Vue({ 
   
  el: '#app', // 通过 el 与 div 元素绑定
  data: { 
   yzxname: 'yzx成功创建Vue实例！'}
})
</script>

在这里插入图片描述

data:

data初始数据：Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。data选项的值是对象，对象里面可以写多个值。

<!-- 定义唯一根元素 div -->
<div id="app"><p>{ 
   { 
   name}}</p></div>
<script>
var vm = new Vue({ 
   
  el: '#app', // 通过el与div元素绑定
  data: { 
   name: 'yzx定义初始数据'}
})
// js中获取 data数据 两种方法都可以~
console.log(vm.$data.name)
console.log(vm.name)
</script>

methods：

methods属性用来定义方法，通过Vue实例可以直接访问这些方法。在定义的方法中，this指向Vue实例本身。定义在methods属性中的方法可中的事件处理方法使用。

<div id="app">
    <!-- 为button按钮绑定click事件 -->
    <button @click="showInfo">请单击</button>
    <p>{ 
   { 
   msg}}</p>
</div>
<script>
var vm = new Vue({ 
   
el: '#app',
data: { 
   
  msg: '原始的值'
},
methods: { 
   
   // 定义事件处理方法showInfo
   	showInfo () { 
   
        this.msg = 'yzx触发单击事件'
     }
  }
})
</script>

computed：

computed 计算属性：计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

    <div id="app">
        <p>总价格：{ 
   { 
   totalPrice}}</p>
        <p>单价 yzx：{ 
   { 
   price}}</p>
        <p>数量 yzx：{ 
   { 
   num}}</p>
        <div>
            <button @click="num == 0 ? 0 : num--">减少数量</button>
            <button @click="num++">增加数量</button>
            <button @click="logTotalPrice">计算总价格</button>
        </div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                price: 20,
                num: 0
            },
            computed: { 
      
                // 总价格totalPrice
                totalPrice() { 
   
                    console.log("totalprice执行了")
                    return this.price * this.num
                }
            },
            methods:{ 
   
                logTotalPrice(){ 
   
                    console.log('totalprice的计算结果为'+this.totalPrice)
                }
            }
        })
    </script>

watch:

通过 watch 获取 cityName 的新值和旧值

<div id="app">
        <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
        <input type="text" v-model="cityName">
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                cityName: 'yzxyzx'
            },
            watch: { 
   
                cityName(newName, oldName) { 
   
                    console.log(newName, oldName)
                }
            }
        })
    </script>

filters:

filters过滤器：在页面中直接操作数据，返回最终结果

    <div id="app">
        <div>{ 
   { 
   message | toUpcase}}</div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                message: 'hello yzx'
            },
            filters: { 
   
                // 将 hello yzx 转换为 HELLO YZX
                toUpcase(value) { 
   
                    return value ? value.toUpperCase() : ''
                }
            }
        })
    </script>

2.Vue 数据绑定

绑定样式：

Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方式来实现。

绑定内联样式：

在vm实例的data中定义myDiv样式对象，通过v-bind绑定data中定义的myDiv对象。

    <div id="app">
        <!-- 绑定样式属性值 -->
        <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
            <!-- 绑定样式对象 -->
            <div v-bind:style="myDiv"></div>
        </div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: "#app",
            data: { 
   
                pink: 'pink',
                width: '100%',
                height: '200px',
                myDiv: { 
   
                    backgroundColor: 'red',
                    width: '100px',
                    height: '100px'
                }
            }
        });
    </script>

绑定样式类名：

通过绑定data中的类名实现元素的样式。

    <style>
        .box { 
   
            background-color: pink;
            width: 100%;
            height: 200px;
        }
        .inner { 
   
            background-color: red;
            width: 100px;
            height: 50px;
            border: 2px solid white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{box}">我是 box,,,yzx
            <div v-bind:class="{inner}">我是inner1</div>
            <div v-bind:class="{inner}">我是inner2</div>
        </div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                box: 'box',
                inner: 'inner'
            }
        })
    </script>

内置指令

v-model指令：

v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。

v-text指令：

v-text是在DOM元素内部插入文本内容，页面结构代码如下:

    <div id="app">
        <p v-text="msg"></p>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                msg: '我是v-text'
            }
        })
    </script>

v-html指令：

v-html（单向绑定）是在DOM元素内部插入HTML标签内容，页面结构代码如下：

  <div id="app">
    <div v-html="msg"></div>
  </div>
  <script>
    var vm = new Vue({ 
   
      el: '#app',
      data: { 
   
        msg: '<h2>我是v-html yzx </h2>'
      }
    })
  </script>

v-bind指令：

v-bind可以实现单向数据绑定，页面结构代码如下:

<div id="app">
   <input v-bind:value="msg">   
</div>  
<script>
   var vm = new Vue({ 
   
       el: '#app',
       data: { 
   
       msg: '我是v-bind yzx'
       }
     })
</script>

v-on指令：

v-on是事件监听指令，直接与事件类型配合使用，页面结构代码如下：

    <div id="app">
        <p>{ 
   { 
   msg}}</p>   
        <button v-on:click="showInfo">请单击 yzx</button>   
      </div>   
      <script> 
        var vm = new Vue({ 
     
          el: '#app',   
          data: { 
   msg: '请单击按钮查看内容'},   
          methods: { 
       
            showInfo () { 
    
              this.msg = '我是v-on指令'  
            }  
          }   
        })   
      </script>

【重要】v-for指令：

v-for可以实现页面列表渲染，常用来循环数组，页面结构代码如下。
注意：核心技能，通过遍历循环读取数组或序列，来依次展示对应的内容。索引是从 0开始的，JavaScript 数组可以存不同类型的数据,一般不建议存不同数据类型~?

  <div id="app">
    <div v-for="(value,key) in list" data-id="key">
      索引是：{ 
   { 
   key}}，元素内容是：{ 
   { 
   value}}
    </div>
  </div>
  <script>
    var vm = new Vue({ 
   
      el: '#app',
      data: { 
   
        list: [1, 2, 3,'y','z','x']
      }
    })
  </script>

v-if和v-show指令：

v-if用来控制元素显示或隐藏，属性为布尔值，页面结构代码如下:

    <div id="app">
        <div v-if="isShow" style="background-color:#ccc;">我是v-if yzx</div>
        <button @click="isShow=!isShow">显示/隐藏</button>  
      </div>  
      <script>  
        var vm = new Vue({ 
    
          el: '#app',  
          data: { 
    
            isShow: true   
          }  
        }) 
      </script>

3.VUE数据绑定测验

写一个添加的功能，添加可以是固定的写法,删除默认删除最后一个的学生的记录，代码如下：

<div id="app">
<button @click="add">添加学生</button>
<button @click="del">删除学生</button>
<hr/>
<table border="1" width="36%" style="border-collapse:collapse">
<tr align="center">
<td>班级</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="center" v-for="student in students">
<td>{ 
{ 
student.grade}}</td>
<td>{ 
{ 
student.name}}</td>
<td>{ 
{ 
student.gender}}</td>
<td>{ 
{ 
student.age}}</td>
</tr>
</table>
</div>   
<script>
var vm = new Vue({ 

el:'#app',
data:{ 

students:[{ 

grade:'1',
name:'yzx',
gender:'女',
age:'20'
},{ 

grade:'2',
name:'yzx',
gender:'女',
age:'20'},
{ 

grade:'3',
name:'yzx',
gender:'女',
age:'20'},
{ 

grade:'4',
name:'yzx',
gender:'女',
age:'20'}]
},
methods:{ 

add(){ 

var student={ 

grade:'1',
name:'yzx',
gender:'女',
age:'20' 
};
this.students.push(student)
},
del(){ 

this.students.pop();
}
}
})

4. Vue 事件

v-on绑定事件：

在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。

获取随机数 random

    <div id="app">
<button v-on:click="count+=Math.random()">随机数</button>
<p>yzx 自动生成的随机数是{ 
{ 
count}}</p>  
</div>   
<script>   
var vm = new Vue({ 
  
el: '#app', 
data: { 

count: 0   
}
})
</script>

监听按键(回车键)：

    <div id="app">
<input type="text" v-on:keyup.enter="submit">
</div>  
<script>
var vm = new Vue({ 

el: '#app',
methods: { 

submit () { 

console.log('表单提交 yzx')
}
}
})
</script>

常见的事件修饰符

.stop事件修饰符：

在前端开发中，复杂的页面结构需要很多事件来完成交互行为。默认的事件传递方式是冒泡，同一事件类型会在元素内部和外部触发，有可能会造成事件的错误触发，所以就需要使用.stop修饰符阻止事件冒泡行为。

    <div id="app">
<div v-on:click="doParent">
<button v-on:click="doThis">事件冒泡</button>
<button v-on:click.stop="doThis">阻止事件冒泡</button>
</div>
</div>   
<script>
var vm = new Vue({ 

el: '#app',  
methods: { 
 
doParent () { 
  
console.log('我是父元素单击事件 yzx')
},
doThis () { 
  
console.log('我是子元素单击事件 yzx')  
}   
}
})
</script>

.prevent事件修饰符：

HTML标签具有自身特性，例如，标签被单击时会自动跳转。在实际开发中，如果标签的默认行为与事件发生冲突，此时可以使用.prevent修饰符来阻止标签的默认行为。

    <div id="app">
<a href="https://www.baidu.com" v-on:click.prevent>yzx 阻止默认行为</a> 
<a href="https://www.baidu.com">yzx 不阻止默认行为</a> 
</div> 
<script>
var vm = new Vue({ 
  
el: '#app'
})   
</script>

.capture事件修饰符：

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。

    <div id="app">
<div v-on:click.capture="doParent">   
<button v-on:click="doThis">事件捕获 yzx</button>
</div>
</div> 
<script> 
var vm = new Vue({ 

el: '#app',
methods: { 

doParent () { 

console.log('我是父元素的单击事件 yzx')
},
doThis () { 

console.log('我是当前元素的单击事件 yzx')    
}  
}
})
</script>

.self 事件修饰符：

事件修饰符.self 用来实现只有DOM元素本身会触发事件。

    <style>
.Odiv1{ 

width: 80px;
height: 80px;
background: #f00;
margin: 5px;
}
.Odiv2{ 

width: 50px;
height: 50px;
background: #fff;
}
</style>
------------------------------------------------------------------------------------
<div id="app">
<div class="Odiv1" v-on:click.self="doParent">a
<div class="Odiv2" v-on:click="doThis">b</div>
</div>
<div class="Odiv1" v-on:click="doParent">c
<div class="Odiv2" v-on:click="doThis">d</div>  
</div>  
</div>
<script>
var vm = new Vue({ 

el: '#app',
methods: { 
 
doParent () { 

console.log('我是父元素的单击事件 yzx')
},
doThis () { 
 
console.log('我是当前元素的单击事件 yzx')
}  
}  
})
</script>

.once事件修饰符：

只触发一次事件处理函数，案例页面结构代码如下

  <div id="app">
<button v-on:click.once="doThis">yzx 只执行一次</button>
</div>
<script>
var vm = new Vue({ 

el: '#app',
methods: { 

doThis () { 

console.log('我是当前元素的单击事件且只执行一次')
}
}
})
</script>

5. Vue 组件

组件：

在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。

组件特性：

能够减少重复代码的编写，提高开发效率。
根据业务逻辑实现复杂的项目功能。
降低代码之间的耦合程度，使项目更易维护和管理。

实现计数器

  <div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', { 

data () { 

return { 

count: 0
}
},
template: '<button v-on:click="count++">被单击 yzx { 
{count}}次</button>'
})
var vm = new Vue({ 
 el: '#app' })
</script>

注册局部组件：

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。

  <div id="app">
<my-component></my-component>
</div>
<script>
var com1 = { 

template: '<p>我是vm实例中的局部组件 yzx</p>'
}
var vm = new Vue({ 

el: '#app',
// 注册局部组件
components: { 
 myComponent: com1 }
})
</script>

template模板：

Vue提供了标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。

    <div id="app">
<p>{ 
{ 
title}}</p>
<my-component></my-component>
</div>  
<template id="tmp1"> 
<p>{ 
{ 
title}}</p> 
</template>
<script>  
Vue.component('my-component', { 
 
template: '#tmp1',
data () { 

return { 
  
title: '我是组件内的title数据 yzx', 
}
}
})
var vm = new Vue({ 

el: '#app',
data: { 
  
title: '我是vm实例的title数据 yzx'  
}  
})
</script>

props传值：

props即道具，用来接收父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息。
子组件接收父组件传递的数据“title”。

  <div id="app">
<my-parent name="title"></my-parent>
</div>
<script>
Vue.component('my-parent',{ 

props: ['name'],
template: '<div> yzx 我是父组件 { 
{name}}</div>'
})
var vm = new Vue({ 

el: '#app'
})
</script>

$emit传值：

$ emit 能够将子组件中的值传递到父组件中去。$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。触发父组件中绑定的childfn事件，并传递子组件中的message数据。

  <div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<button @click="click">Send</button>
<input type="text" v-model="message">
</div>
</template>
<script>
Vue.component('parent', { 

template: '<div><child @childfn="transContent"></child>' +
'子组件传来的值 : { 
{message}}</div>',
data () { 

return { 

message: ''
}
},
methods: { 

transContent (payload) { 

this.message = payload
}
}
})
// child组件
Vue.component('child', { 

template: '#child',
data () { 

return { 

message: '子组件的消息 '
}
},
methods: { 

click () { 

this.$emit('childfn', this.message);
}
}
})
var vm = new Vue({ 
 el: '#app' })

v-if与v-else ：

Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。实现登录和注册界面点击按钮进行切换（方法一）：

    <div id="app">
<a href="#" @click.prevent="flag ? flag : flag = !flag">登录 yzx</a>
<a href="#" @click.prevent="flag ? flag = !flag : flag">注册 yzx</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login', { 

template: '<div>登录页面</div>'
})
Vue.component('register', { 

template: '<div>注册页面</div>'
})
var vm = new Vue({ 

el: '#app',
data: { 
 flag: true }   
})   
</script>

方法二：效果如上图，不展示了哈✌

  <div id="app">
<a href="#" @click.prevent="comName='login'">登录 yzx</a>
<a href="#" @click.prevent="comName='register'">注册 yzx</a>
<component v-bind:is="comName"></component>
</div>
<script>
Vue.component('login', { 

template: '<div>登录页面</div>'
})
Vue.component('register', { 

template: '<div>注册页面</div>'
})
var vm = new Vue({ 

el: '#app',
data: { 
 comName: '' }
})
</script>

6. Vue 生命周期

Vue实例为生命周期提供了回调函数，用来在特定的情况下触发，贯穿了Vue实例化的整个过程，这给用户在不同阶段添加自己的代码提供了机会。

钩子函数：

钩子函数用来描述Vue实例从创建到销毁的整个生命周期。

beforeCreate和created：

创建实例对象之前或实例对象创建之后执行，案例演示如下。

  <div id="app">{ 
{ 
msg}}</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 msg: 'yzx' },
beforeCreate () { 

console.log('实例创建之前')
console.log(this.$data.msg)
},
created () { 

console.log('实例创建之后')
console.log(this.$data.msg)
}
})
</script>

beforeMount和mounted：

在实例创建后，如果挂载点el存在，就进行页面挂载。

    <div id="app">{ 
{ 
msg}}</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 msg: 'yzx' },
beforeMount () { 

console.log('挂载之前')
console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素
},
mounted () { 

console.log('挂载之后')
console.log(this.$el.innerHTML)
}
})
</script>

beforeUpdate和updated：

Vue实例挂载完成后，当数据发生变化时，会执行beforeUpdate和updated钩子函数。

    <div id="app">
<div v-if="isShow" ref="self"> yzx </div>
<button @click="isShow = !isShow">更新</button>
</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 isShow: false },
beforeUpdate () { 

console.log('更新之前')
console.log(this.$refs.self)
},
updated () { 

console.log('更新之后')
console.log(this.$refs.self)
}
})
</script>

beforeDestroy和destroyed：

生命周期函数的最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。

  <div id="app">
<div ref="self">test</div>
</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 msg: 'yzx' },
beforeDestroy () { 

console.log('销毁之前')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
},
destroyed () { 

console.log('销毁之后')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
}
})
// 在控制台执行：vm.$destroy()，查看效果
</script>

未经允许，禁止转载~我都不敢信我写了 18500多字数，910 行?? 加油，不会的可以问我，觉得喜欢可以收藏 [ 暗示三连???~~]

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/226871.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

Vue 实例之数据绑定，事件，组件，生命周期！！！[通俗易懂]