Vue —— Vue核心

已于 2022-03-18 00:13:59 修改
阅读量238 收藏
点赞数
文章标签： markdown java vue.js
于 2022-03-06 11:58:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54966486/article/details/123286236
版权
列表过滤
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>

    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">
    <!--遍历数据-->
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入姓名" v-model="keyWord">
    <ul>
        <li v-for="(person,index) in filterPerson" :key="person.id" >
            {{index}}-{{person.name}}-{{person.age}}-{{person.sex}}
        </li>
    </ul>
</div>


<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;

    const vm = new Vue({
        data: {
            keyWord:'',
            persons: [
                {id: '001', name: '周冬雨', age: 18, sex: '女'},
                {id: '002', name: '周杰伦', age: 19, sex: '男'},
                {id: '003', name: '马冬梅', age: 20, sex: '女'},
                {id: '004', name: '温兆伦', age: 21, sex: '男'}
            ],
            // filterPerson:[]
        },
        //用watch实现
        // watch:{
        //     keyWord:{
        //         immediate:true, //立即监视，默认 ''
        //         handler(newData){
        //             this.filterPerson = this.persons.filter(
        //                 (p)=>{return p.name.indexOf(newData) !== -1;}
        //             );
        //         }
        //     }
        // }

        //用计算属性
        computed:{
            filterPerson(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    })
    vm.$mount('#test01')
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

列表排序

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>

    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">
    <!--遍历数据-->
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入姓名" v-model="keyWord">
    <button @click="flag=1">年龄升序</button>
    <button @click="flag=2">年龄降序</button>
    <button @click="flag=0">原顺序</button>
    <ul>
        <li v-for="(person,index) in filterPerson" :key="person.id" >
            {{index}}-{{person.name}}-{{person.age}}-{{person.sex}}
        </li>
    </ul>
</div>


<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;

    const vm = new Vue({
        data: {
            keyWord:'',
            flag:0,    //0表示原顺序，1表示升序，2表示降序
            persons: [
                {id: '001', name: '周冬雨', age: 18, sex: '女'},
                {id: '002', name: '周杰伦', age: 19, sex: '男'},
                {id: '003', name: '马冬梅', age: 20, sex: '女'},
                {id: '004', name: '温兆伦', age: 21, sex: '男'}
            ],
        },
        //用计算属性
        computed:{
            filterPerson(){
                const arr = this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                })
                //判断是否需要排序
                if(this.flag){
                    arr.sort((p1,p2)=>{
                        return this.flag===1 ? p1.age-p2.age : p2.age-p1.age;
                    })
                }
                return arr;
            }
        }
    })
    vm.$mount('#test01')
</script>
</body>
</html>
Vue.set()方法：如果想在后期给vue对象添加响应式属性，必须这样，否则不是响应式，只能给data里面某一个对象里添加属性，不能直接给Vue添加属性

在这里插入图片描述

修改Vue对象数组元素时
  • filter不会改变原数组

在这里插入图片描述

数据监测原理大总结（重要）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监测</title>

    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>

<div id="test01">

    <h1>学生信息</h1>

    <button @click="student.age++">年龄+1</button><br/>        <!--简单功能直接写-->
    <button @click="addSex">添加性别属性，默认值：男</button><br/>
    <button @click="addFriendInProList">在列表首位添加一个朋友</button><br/>
    <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br/>
    <button @click="addHobby">添加一个爱好</button><br/>
    <button @click="updateHobby">修改第一个爱好为：开车</button><br/>
    <button @click="filterSmoke">过滤掉爱好者的抽烟</button><br/>

    <h3>姓名：{{student.name}}</h3>
    <h3>年龄：{{student.age}}</h3>
    <h3 v-if="student.sex">性别：{{student.sex}}</h3>
    <h3>爱好：</h3>
    <ul>
        <li v-for="(h,index) in student.hobby" :key="index" >
            {{h}}
        </li>
    </ul>
    <h3>朋友们：</h3>
    <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}}--{{f.age}}
        </li>
    </ul>
</div>


<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;

    const vm = new Vue({
        data: {
            student:{
                name:'tom',
                age:18,
                hobby:['抽烟','喝酒','嫖娼'],
                friends:[
                    {name:'jerry',age:35},
                    {name:'tony',age:38}
                ]
            }
        },
        methods:{
            addSex(){
                // this.$set(this.student,'sex','男')
                Vue.set(this.student,'sex','男')
            },addFriendInProList(){
                //朋友列表首位添加一名朋友
                this.student.friends.unshift({name:'libai',age: 18})
            },updateFirstFriendName(){
                //修改第一个朋友的名字
                this.student.friends[0].name='张三'
            },addHobby(){
                //添加一个hobby
                this.student.hobby.push('赌博')
            },updateHobby(){
                //修改第一个爱好为：开车
                this.student.hobby.splice(0,1,'开车') //从索引值为0开始，删除一个，在插入'开车'
                // Vue.set(this.student.hobby,0,'开车')
                // this.$set(this.student.hobby,0,'开车')
            },filterSmoke(){
            	//过滤掉抽烟
                this.student.hobby = this.student.hobby.filter((h)=>{
                    return h !== '抽烟'
                })
            }

        }
    })
    vm.$mount('#test01')
</script>
</body>
</html>

收集表单信息

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单信息.html</title>

    <!--引入Vue-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <div id="test01">
        <form @submit.prevent="demo">

    <!-- 双向绑定v-model ==> 默认收集value-->

    <!--v-model.trim去掉数据前后的空格,数据中间空格不会去除-->
        账号：<input type="text" v-model.trim="userInfo.account">      <br><br>
        密码：<input type="password" v-model="userInfo.password">  <br><br>

    <!--v-model.number只能限制输入数字类型-->
        年龄：<input type="number" v-model.number="userInfo.age">  <br><br>
        性别：
            <input type="radio" name="sex" v-model="userInfo.sex" value="male">男
            <input type="radio" name="sex" v-model="userInfo.sex" value="female">女   <br><br>
        爱好：
            <input type="checkbox" v-model="userInfo.hobby" value="吃饭">吃饭
            <input type="checkbox" v-model="userInfo.hobby" value="睡觉">睡觉
            <input type="checkbox" v-model="userInfo.hobby" value="打游戏">打游戏      <br><br>

        所属小区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京校区</option>
                <option value="shanghai">上海校区</option>
                <option value="shenzhen">深圳校区</option>
                <option value="hangzhou">杭州校区</option>
            </select>   <br><br>
        其他信息：
    <!--v-model.lazy 失去焦点一瞬间vue才会收集 "其他信息" 里的信息-->
            <textarea v-model.lazy="userInfo.other"></textarea>   <br><br>

        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://baidu.com">《用户协议》</a>  <br><br>
        <button>提交</button>

        </form>

    </div>
</body>

<!--设置不提示-->
<script type="text/javascript" >
    Vue.config.productionTip = false;

    const vm = new Vue({
        data: {
           userInfo:{
               account:'',
               password:'',
               sex:'',
               age:'',
               hobby:[],
               city:'beijing',
               other:'',
               agree:false
           }
        },
        methods:{
            demo(){
                //以json数据在控制台打印
                console.log(JSON.stringify(this.userInfo))
            }
        }

    })
    vm.$mount('#test01')
</script>

</html>
日期类第三方类dayjs

https://www.bootcdn.cn/

在这里插入图片描述

  • 下载（复制链接，ctrl+s）保存到桌面js文件夹
  • 进入GitHut仓库看教程
引入dayjs.min.js
<script type="text/javascript" src="xxxx/dayjs.min.js"></script>
dayjs(时间戳对象)
方法：
  .startOf('month')
  .add(1, 'day')
  .set('year', 2018)
  .format('YYYY-MM-DD HH:mm:ss')
v-xxx指令
我们学过的指令：
v-bind	: 单向绑定解析表达式，简写 :
v-model	: 双向数据绑定
v-for	: 遍历 数组、对象、字符串（不常用）
v-on	: 绑定事件监听，简写 @
v-if	: 条件渲染（动态控制节点是否存在）
v-else	: 条件渲染（动态控制节点是否存在）
v-show	: 条件渲染（动态控制节点是否展示）
新的指令
  • v-text(不常用)
	<h1 v-text="name"></h1> ==>   把标签内容全部替换为name
	与{{name}}插值语法差不多，但是插值语法更灵活
  • v-html
    在这里插入图片描述
    在这里插入图片描述
  • v-cloak：网速慢的时候，可以加上，避免vue数据没加载时，模板已经渲染在页面上
<style>
   [v-clock]{display: none;}	<!-- 包含v-clock的不展示 -->
</style>

<div v-cloak id="test01">
    <div v-text="name"></div>
    <div v-html="name"></div>
</div>
  • v-once
    在这里插入图片描述
<!-- 只会读取一次n -->
<div v-once>初始的n值:{{n}}</div>	
<div >现在的n值:{{n}}</div>
<button @click="n++">点我n+1</button>

在这里插入图片描述

  • v-pre
    在这里插入图片描述
自定义指令

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

生命周期

在这里插入图片描述

挂载流程

在这里插入图片描述

更新流程

在这里插入图片描述

销毁流程

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

人鱼望山荷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue笔记（一）Vue核心
Tml的博客
07-22 440
模板语法、数据绑定、MVVM模型、数据代理、事件处理、计算属性、监视属性、绑定class和style样式、条件渲染、 列表渲染、Vue监视数据的原理、收集表单数据、过滤器、内置指令、自定义指令、生命周期...
Vue购物车——组件化.rar
05-01
Vue.js 是一款流行的前端JavaScript框架，它以组件化为核心，使得构建复杂的Web应用变得更为简单。在"Vue购物车——组件化"这个示例中，我们将深入探讨Vue组件的全局注册与局部注册、父子组件之间的通信以及数据的...
Vue学习笔记 —（上）
scorpio的博客
08-11 522
学习笔记，仅供自己回忆时参考
vue核心概念
weixin_30767835的博客
05-01 142
1. Vue实例就是其中的data下的对象。 Vue实例的改变，也会导致其中对象的改变。如下： <script> var bar = { foo: "zzw" }; var vm = new Vue({ data: bar }); console.log(vm.foo === bar.foo); /...
VUE核心
weixin_53136302的博客
10-07 235
计算属性: 1.定义:要用的属性不存在，要通过已有属性计算得来。 2.原理:底层借助了objcet.defineproperty方法提供的getter和setter 3.get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势:与methods实现相比，内部有缓有机制（复用），效率更高，调试方便。
vue-demo——脚手架.zip
12-02
Vue的核心特性包括声明式渲染、组件化、虚拟DOM、响应式数据绑定等。声明式渲染允许开发者通过简单的模板语法来定义UI如何响应数据的变化，而无需处理底层DOM操作。组件化是Vue的一大亮点，通过组件可以复用代码，...
vue插件——使用canvas生成图形验证码
08-12
以下是对“vue插件——使用canvas生成图形验证码”这一主题的详细解析。 首先，让我们了解canvas。HTML5中的canvas元素提供了一种在网页上动态绘制图形的方式。通过JavaScript，开发者可以直接在canvas上画点、线、...
vue3.zip——CompositionAPI
07-14
这个压缩包“vue3.zip——CompositionAPI”很可能包含了一个使用Vue3.0的Composition API编写的简单项目，让我们来深入探讨一下这个重要的新特性。 Vue2.x时代，我们主要依赖Options API来组织组件的逻辑，这种方式...
前端VUE实战——去哪儿网项目实战.7z
08-17
在本项目中，我们将深入探讨基于Vue.js框架的前端实战应用——去哪儿网项目。Vue.js是一个轻量级、高性能的JavaScript框架，专为构建用户界面而设计，特别适合开发单页面应用（SPA）。通过这个实战项目，我们可以...
Vue 核心技术总结
12-12
Vue 核心技术总结，适合初步想了解Vue语法的童鞋，其实语法是相通的。加油吧
Vue的核心
weixin_46064172的博客
03-19 260
一、数据驱动 就是前端接收后端传输过来的数据，然后通过数据来操作DOM，Vue.js提供了mvvm俗称：双向数据绑定。通过：Object.defineProperty（第一个是监听的属性,第二是回调函数） 二、组件化 实现了扩展HTML元素，封装可用的代码。页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录 ...
Vue核心
天道酬勤，厚积薄发
08-04 629
Vue核心笔记
Vue 核心
梁辰兴的博客
02-28 255
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。动态构建用户界面的渐进式 JavaScript 框v-text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为 true, 当前标签才会输出到页面。
【vue】——vue核心
最新发布
leixu4466的博客
04-24 224
vue核心
Vue的核心思想
SUNLYH2_2的博客
01-12 2876
Vue的核心思想
vue 获取dom_面试官：说说你对vue的理解?
weixin_39794734的博客
12-01 274
一、从历史说起Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时...
Vue——核心思想
a1b255的博客
02-16 7377
Vue的核心思想为数据驱动和组件化。 一、数据驱动——双向绑定 Vue是一种MVVC框架。而DOM是数据的一个种自然映射。传统的模式是通过Ajax请求从model请求数据，然后手动的触发DOM传入数据修改页面。Vue中，Directives对view进行了封装，当model里的数据发生变化是，Vue就会通过Directives指令去修改DOM。同时也通过DOM Listener实现对视图vie
"掌握Vue.js核心知识——VUE面试题集与解析
Vue.js是一种流行的JavaScript前端框架，用于构建用户界面。它被设计为一种轻量级框架，可以与现有项目很好地集成。Vue.js的主要优点包括易用性、灵活性和性能。首先，Vue.js非常易于学习和上手，新手可以很快上手并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值