Vue2

最新推荐文章于 2025-04-07 10:26:32 发布
最新推荐文章于 2025-04-07 10:26:32 发布
阅读量222 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42149982/article/details/81056435
Vue
1.列表渲染
通过 v-for 指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
例如，  <li v-for="item in items">
    {{ item}}
遍历数组：
<li v-for="(item, index) in items"># index表示索引值
遍历对象：

<div v-for="(value, key, index) in object"> # 值 、键、索引值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:'#app',
data:{
msg:'hello world',
array:['海贼王','火影','妖精的尾巴'],
obj:{
name:'zhangsan',
age:20
}
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- 数组的遍历 -->
<div>
<div v-for="i in array">
{{i}}
</div>
</div>

<div>
<div v-for="(item,index) in array">
{{item}} --- {{index}}
</div>
</div>

<!-- 对象的遍历 -->
<!-- obj:{
name:'zhangsan',
age:20
} -->
<ul>
<li v-for="value in obj">
{{value}}
</li>
</ul>

<ul>
<li v-for="(value,key) in obj">
{{value}} --- {{key}}
</li>
</ul>

<ul>
<li v-for="(value,key,index) in obj">
{{value}} --- {{key}}----{{index}}
</li>
</ul>
</div>
</body>
</html>

2.事件处理
实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function (){
var vm = new Vue({
el:'#app',
data:{

},
methods: {
func1:function(){
alert('func1')
},
func2:function(){
alert('func2')
}
}
})
}
</script>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
.subbox {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="func1">
<div class="subbox" @click.prevent.stop="func2"></div>
<div class="subbox" @click.prevent.stop></div>
</div>
</div>
</body>
</html>

3.表单输入绑定
可以用 v-model 指令在表单<input> 及 <textarea>、<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
单行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框：单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>


data:{ checkedNames : [] } 为数组
单选框  radio
<input type="radio" v-model="str" value="0">
<input type="radio" v-model="str" value="1">  // data:{ str:"" } ,str的值和value的值一致
下拉框 select option
<div id="app">
        <select v-model="str" id="">
            <option disabled value="3">请选择</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">深圳</option>
        </select>
        {{ str }}

    </div>  // data:{ str:"3"} ，str的值和value的值一致

<!-- 表单 -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
</head>

<body>
<div id="app">
<input type="text" v-model="msg"> {{msg}}
<button @click="change">按钮</button>
<textarea v-model="title" name="" id="" cols="30" rows="10">
</textarea>
{{title}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '',
title: 'hello world'
},
methods: {
change: function () {
this.msg += 'hello'
}
}
})
</script>
</body>

</html>

<!-- 单选框 -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
</head>

<body>
<div id="app">
<input type="radio" value="0" name="msg">
<input type="radio" value="1" name="msg">
<input type="radio" v-model="msg" value="0">
<input type="radio" v-model="msg" value="1"> {{msg}}
<select v-model="message" id="">
<option disabled value="">请选择</option>
<option value="0">北京</option>
<option value="1">天津</option>
<option value="2">河北</option>
</select>
{{message}}
<input disabled type="text">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '',
message: ''
}
})
</script>
</body>

</html>


<!-- 复选框 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="0" v-model="msg">
<input type="checkbox" value="1" v-model="msg">
<input type="checkbox" value="2" v-model="msg">

{{msg}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:[]
}
})
</script>
</body>
</html>
4.生命周期方法
beforeCreate  
created
beforeMount  
mounted  // 浏览器上的内容，加载完，然后一直等待这里
beforeUpdate 
updated  // 修改数据，会自动调用该方法
beforeDestroy  // 程序被杀死前的的遗言

destroyed  // 程序被杀死后

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>

</head>
<body>
<div id="app">
{{msg}}
</div>

<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello wolrd'
},
beforeCreate () {
console.log('beforeCreate')
},
created () {
console.log('created')
},
beforeMount () {
console.log('beforeMount')
},
mounted () {
console.log('mounted')
},
beforeUpdate () {
console.log('beforeUpdate')
},
updated () {
console.log('updated')
},
beforeDestroy () {
console.log('beforeDestroy')
},
destroyed () {
console.log('destroyed')
}
})
</script>
</body>
</html>

5.过滤器
外置的过滤器: 
Vue.filter('rever', function (value) {
     return value.split('').reverse().join('')
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg: 'abcdefg',
                title: 'ABDEEDJSOIFDOS',
                flag: 'hello world'
            },
内置的过滤器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {


Vue.filter('rever',function(value){
return value.split('').reverse().join('')
})

var vm = new Vue({
el:'#app',
data:{
msg:'abcdefsjoidijfowe',
title:'SDJOIFSOIDFJSDOIFSFD'
},
filters: {
Upper:function(value){
return value.toUpperCase()
},
lower:function(value){
return value.toLowerCase()
}
}
})
}
</script>
</head>
<body>
<div id="app">
{{msg}}
{{ msg | Upper }}

{{title | lower}}

{{msg | rever}}

<div v-if=""></div>
</div>
</body>
</html>

6.自定义指令
外置指令:         
Vue.directive('fodd',{
            inserted:function(el){
                el.style.width = '100px'
                el.style.height = '100px'
                el.style.border = '1px solid gold'
            }
        })
        var vm = new Vue({
            el:'#app',
内置指令:
            
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>

</head>
<body>
<div id="app">
<div v-mei>哈哈</div>
<p v-mei></p>
</div>
<script>
var vm = new Vue({
el:"#app",
directives: {
mei:{
inserted:function(el){
el.style.width = '300px'
el.style.height = '300px'
el.style.background = 'pink'
}
}
}
})
</script>
</body>
</html>

7.axios请求 数据交互
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script src="./axios.min.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el: '#app',
data: {
array: []
},
methods: {
func: function () {
var that = this
axios.get(
'http://localhost:3008/getMovieListData?message={"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}'
)
.then(function (response) {
// console.log(response)
vm.array = response.data.subjects
})
.catch(function (error) {
console.log(error)
})
}
}
})
}
</script>
</head>

<body>
<div id="app">
<button @click="func">请求数据</button>
<ul>
<li v-for="item in array">
{{item.title}}
</li>
</ul>
</div>

</body>

</html>

vue2 虚拟列表（优化版）
dengzeyuan的博客
03-20 1100
3.向下滚动加载下一条数据时候卡在计算阈值内，导致底部留白太大，通过至多加载固定窗口对应展示数据的数量给追加到原本的结尾索引，达到多渲染一屏窗口的数据。虚拟列表是优化长列表的一种手段，防止列表存在过多的dom元素导致页面卡顿（包扣移动端下拉到底加载下一页这种列表加载的dom元素多了一样会卡）。用来存放数据，并且让他随着滚动条一起动，达到视觉上的列表滚动。2.当窗口的resize事件触发一切数值都重新计算，让列表底部样式不出错，和滚动到底部不抖动。
Vue2全面解析 - 从入门到精通
最新发布
weixin_51040479的博客
07-07 1066
Vue2 核心指南摘要 Vue2 是一个渐进式 JavaScript 框架，核心特点包括： 响应式系统：通过 Object.defineProperty 实现数据绑定 组件化：支持单文件组件（.vue 文件） 模板语法：提供插值、指令等模板功能 路由管理：集成 VueRouter 实现 SPA 开发 状态管理：通过 Vuex 实现集中式状态管理 主要技术要点： 生命周期：8 个核心钩子函数控制组件行为 指令系统：v-model、v-for、v-if 等常用指令 组件通信：Props/$emit、provid
vue2
04-22 229
1、vue如果使用了v-html，则filter 不生效      改用全局方法吧 Vue.property.face = function(){}2、给局部元素监听scroll事件，根据这个元素里面的滚动，来判断加载下一页，@scroll= “scroll” 不生效。     改用手动注册scroll吧。&lt;div class="list_main" ref="list_main"&gt;&...
vue2和vue3的主要区别
热门推荐
前端金牌摸鱼达人
04-07 4万+
Vue2：使用选项式API定义组件是最常见的方式。此外，还支持单文件组件（.vue文件），将模板、脚本和样式封装在一起。Vue3：支持组合式API与选项式API并存的组件定义方式。在单文件组件中，可以更好地利用组合式API的优势。
vue2 升级为 vue3+第三方库升级+vue2与vue3混合交互
m0_51244077的博客
01-14 2540
vue2 升级为 vue3+第三方库升级+vue2与vue3混合交互
将 Vue2 项目迁移到 Vue3
Chihirozy的博客
09-30 2810
Vue3 中的示例（使用。
如何将vue2代码一键升级到vue3（下）
brg_csdn的博客
03-18 3546
我们知道了如何通过ast去改造源码，本篇文章将介绍如何通过vue自定义loader的方式实现vue2的代码运行在基于vue3的项目当中。
uniapp vue2项目迁移vue3项目
pingguocu3的博客
11-22 2379
以下列举迁移到 vue3，必须适配的几个点，vue2 项目才能正常运行在 vue3 上。更多查看完整的非兼容特性列表©著作权归作者所有,转载或内容合作请联系作者。
VUE.2
JINGYUNSJ的博客
07-04 155
表单域修饰符用法， <input type="text" v-model.number='age'>//如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符 <input type="text" v-model.trim='info'>//会去出两边的空格 <input type="text" v-model.l...
Vue 2
qq_53464269的博客
08-13 3万+
然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成。
Vue2（初识vue）
passerby的博客
08-02 1万+
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。vue环境的搭建有很多种：对于我们初次学习，我们使用自行下载js的方式。 注意 面试题： Data为啥要写成函数？ Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。什么是指令
深入Vue2
nanwanLisa的博客
07-29 472
一、前言 Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。 vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作，为了实现高效的D...
Vue2电影站源码分享与交流
因此，可以推断，这个Vue2项目是一个模仿豆瓣网或者与其功能相关的电影站点的演示版本，其目的是提供一个实际案例，供学习者了解如何使用Vue相关技术构建一个类似的应用。 6. 项目文件的文件列表中提到了“douban-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值