Vue 学习笔记1

最新推荐文章于 2024-07-04 23:15:00 发布
最新推荐文章于 2024-07-04 23:15:00 发布
阅读量759 收藏 6
点赞数 4
分类专栏： 前端知识分享 文章标签： Vue 学习笔记 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_2544854246/article/details/83859115
版权

一、Vue.js介绍

Vue.js也称为Vue，读音类似view，由尤雨溪开源并维护,参考：官网文档

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue有以下特点：

  • 是一个构建用户界面的渐进式JavaScript框架
  • 是一个轻量级MVVM（Model-View-ViewModel）框架
  • 数据驱动+组件化的前端开发（核心思想）
  • 通过简单的API实现响应式的数据绑定和组合的视图组件
  • 更容易上手、小巧
版本：
1、开发版本：包含完整的警告和调试模式
2、生产版本：删除了警告，30.90KB min+gzip

二、常用指令

指令用来扩展HTML功能。vue内置了很多指令。以v-开头，用于对元素标签进行属性扩展的

1、v-model

实现双向数据绑定，实时监控数据变化，一般用于表单。
<div id="main">
    <input type="text" v-model="content">
    <br> {{content}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el: '#main', //"选择器"-->id,class,标签,document.querySelector()//绑定元素，注意body,html不能被绑定
    data: {   //实例属性
        content: ''
    }
})
</script>

在这里，使用v-model指令将输入框的值与vue实例中的content进行绑定。此后，二者中的任一值发生变化，另一个值都会跟随变化。

1.1 下拉列表
<div id="myApp">
    <select v-model="num">
        <option value="11">感冒</option>
        <option value="22">头疼</option>
        <option value="33">肚子疼</option>
    </select>
    <div>{{num}}</div>   <!--num为option中的value值-->
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{
            num:11
        }
    })
</script>
1.2 单选框
<div id="myApp">
    <input type="radio" v-model="num" value="11">抽烟
    <input type="radio" v-model="num" value="22">学习
    <input type="radio" v-model="num" value="33">运动
    <div>{{num}}</div>
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{
            num:22
        }
    })
</script>

在这里插入图片描述

1.3 多选框
<div id="myApp">
    <input type="checkbox" v-model="num" value="1">抽烟
    <input type="checkbox" v-model="num" value="2">学习
    <input type="checkbox" v-model="num" value="3">运动
    <div>{{num}}</div>
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{
            num:[ ]
        }
    })
</script>

在这里插入图片描述

2、v-if , v-else-if , v-else 条件指令

值为booler,当为true才会执行
注意与 v-show的区别，v-if是通过渲染到页面上的，v-show是通过display属性实现显示的
<div id="myApp">
    <input type="text" v-model.number="sex">
<!--==>修饰符   .number   使用：v-model.number="xxx"   作用于将绑定的元素设置为number-->
    <p v-if="sex===1">男</p> 
    <p v-else-if="sex===2">女</p>
    <p v-else>未知</p>

<!-- 输入框中输入的内容为字符串 -->
    <input type="text" v-model="sex">
    <p v-if="sex/1===1">男</p>
    <p v-else-if="sex/1===2">女</p>
    <p v-else>未知</p>
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{
            sex:4// 1 男，2 女 其它：未知
        }
    })
</script>

3、v-for

用于遍历数组、对象等

<div id="myApp">      遍历数组
    <p v-for="item in arr">{{item}}</p>
    <p v-for="(value,index) in arr">{{value}}  |  {{index}}</p>
</div>
<script>
        new Vue({
                el:'#myApp',
                data:{
                    arr:[1,2,3,4,5]
                }
        })
</script>

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

<div id="myApp">      遍历对象 {键值对}

    <p v-for="item in obj">{{item}}</p>   //值
    <br>
    <p v-for="(value,key) in obj">{{value}} | {{key}}</p>  //值：键
</div>
<script>
        new Vue({
                el:'#myApp',
                data:{
                        obj:{

                                userName:"柒柒",
                                age:20
                                }
                 }
        })
</script>

在这里插入图片描述

<div id="myApp">      遍历--数        
	<p v-for="num in pageSum">{{num}}</p>
</div>
<script>        
	new Vue({                
		el:'#myApp',                
		data:{                                          
			pageSum : 3                 
		} 
	})
</script>

在这里插入图片描述

4、v-bind

用于将data里的数据绑定到指定的属性中去
<div id="myApp">        
	{{imgUrl}}        
	<img v-bind:src="imgUrl" alt="">       
	<img :src="imgUrl" alt=""> //简写形式
</div>
<script>    
	new Vue({        
		el:'#myApp',        
		data:{                
		imgUrl:"http://a.cphotos.bdimg.com/timg?image&quality=100&size=b4000_4000&sec=1541591567&di=35e41d7a6939fe8a86b837fa60836fce&src=http://img4.a0bi.com/upload/ttq/20170818/1503042162062.png"            
		}    
	})
</script>

在这里插入图片描述

5、v-html

将元素内的数据覆盖掉，并且支持HTML格式
<div id="myApp">
    <div>柒柒{{str}}又柒柒</div>
    <div v-html="str">柒柒</div> //将内容覆盖掉，而且支持html格式
</div>
<script>
     new Vue({
            el:'#myApp',
            data:{
                    str:"<h3>VUE</h3>"
            }
    })
</script>

在这里插入图片描述

6、v-on

用于绑定事件 v-on : 事件 = “函数名” 简写 @事件=“函数名”

<div id="myApp">
    <input type="button" value="投票" v-on:click="fn2(1)">
    <input type="button" value="不传值投票" v-on:click="fn">
    <!--调用的函数不需要传值时，可将( )省略-->
    <input type="button" value="不传值投票" @click="fn">
    {{voteNum}}
</div>
<script>
    new Vue({
            el:'#myApp',
            data:{   //实例数据
                voteNum:0
            },
            methods:{ // 实例方法
                    fn(){
                            this.voteNum+=1;   //this指向当前vue实例，由此可获取实例的其他属性
                    },
                    fn2(num){
                        this.voteNum+=num;
                        console.log(this);
                    }
             }
    })
</script>

7、v-show

用来显示或隐藏元素，v-show是通过display实现。当v-show的值为true时显示，为false时隐藏。

<div id="myApp">
        <input type="button" :value="v" @click="changeIsShow">
        <div v-show="isShow">柒柒又柒柒</div>
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{
            isShow:true,
            v:"隐藏"
         },
        methods:{
                changeIsShow(){  //通过该函数改变isShow的值
                        this.isShow= !this.isShow;
                        if(this.isShow)     this.v="隐藏";
                        else    this.v="显示";
                }
          }
    })
</script>

方法2：
<div id="myApp">
        <input type="button" value="显示与隐藏"  @click="isShow = !isShow">
        <div v-show="isShow">柒柒又柒柒</div>
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{
            isShow : true
         }
    })
</script>

8、v-once

仅支持第一次挂载响应
<div id="myApp">
    <input type="text" v-model="str">
    <div v-once> {{str}} </div>
    <div >{{str}}</div>
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{
            str:"柒柒"
        }
    })
</script>

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

9、v-pre

在该指令下的元素，不支持{{}}响应

<div id="myApp">
    <div v-pre> {{str}} </div>
</div>
<script>
    new Vue({
            el:'#myApp',
            data:{
                    str:"柒柒"
            }
    })
</script>

在这里插入图片描述

三、事件

1、事件简写

之前的事件都是这样的写法：v-on:click=“showHello()”，vue提供了一种简写方式： @click=“showHello()”

2、事件对象$event

可以通过事件对象取得事件相关信息，如事件源、事件类型、偏移量。

当调用事件时，所用的方法不包含（）时，默认第一个参数是事件对象，如果有其它参数的话，可以传入一个$event 作为事件对象

@click="fn"  ---->默认fn第一个参数是事件对象
@click="fn(3,$event)"--->fn第二个参数是事件对象。

<div id="myApp">
    <input type="button" value="我是柒柒呀" @click="fn">
    <input type="button" value="和平" @click="even(3,$event)">
</div>
<script>
    new Vue({
        el:'#myApp',
        data:{},
        methods:{
            even(num,e){
                alert(e.target.value);
            },
            fn(e){
                alert(e.target.value)
            }
         }
    })
</script>

3、事件冒泡与事件默认行为

原生js阻止事件冒泡首先得取得事件对象，然后调用事件对象的stopPropagation方法。
在vue里，则不需要依赖于事件对象，只需要调用相应的事件修饰符stop即可
<div class="one" @click="oneFn">
    <div class="two" @click.stop="twoFn">
        <input type="button" value="点我吧" @click.stop="buttonFn">
    </div>
</div>
阻止事件默认行为和阻止事件冒泡基本一致，在vue里只需要调用相应的事件修饰符prevent
@contextmenu.prevent="fn"

<form action="http://www.baidu.com">
        <input type="submit" value="提交" @click.prevent="fn">
</form>

<a href="http://163.com" @click.prevent="fn">网易</a>

4、键盘事件

vue里内置了一些键盘事件，便于开发者操作。

语法如下：
@keydown.13 = “print()”@keydown.enter = "print()"
除了回车事件外，还有很多其他键盘事件，例如：
@keydown.38="print()" 向上的箭头

还有一些其他键盘事件，具体参考官方文档。

默认没有@keydown.a/b/c…事件，可以全局自定义键盘事件，也称为自定义键码或自定义键位别名：

Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用 mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用双引号括起来
"media-play-pause": 179,
up: [38, 87]
}

四、修饰符

    .number   使用：v-model.number="xxx"   作用于将绑定的元素设置为number.
    .lazy  :当失去焦点时才会响应数据。
    .trim：去除左右两侧的空格。

五、属性

vue提供了绑定属性的方法：v-bind:属性名=""，即可动态的改变属性值。

1、属性简写

: 属性名 = " 属性值"

2、class属性

（1）变量形式

html部分： <p :class="myClass">Hello vue.js</p>
对应的vue的data部分： data:{myClass:className}

（2）数组形式，同时引入多个类

html部分： <p :class="[myClass1,myClass2]">Hello vue.js</p>
对应的vue的data部分：data:{myClass1:className1,myClass2:className2,}

（3）json形式（常用）

html部分：<p :class="{className1:true,className2:false}">Hello vue.js</p>

（4）变量引用json形式

html部分： <p :class="myClass">Hello vue.js</p>
对应的vue的data部分：data:{ myClass:{ className:true}}

六、模板{{}}

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据。
模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法。
1、数据绑定的方式
（1）双向数据绑定–使用v-model指令
（2）单向数据绑定
a.使用两对大括号{{}}

这个在之前也经常使用，但是有一个缺点，就是vue实例需要长时间编译时会在页面中出现{{}}（闪烁现象）。vue提供了一个解决办法：使用v-cloak配合css。

//html内容<div id="app" v-cloak>{{msg}}</div>
//css内容[v-cloak] {display: none;}

b.使用指令v-text、v-html
v-text也可达到与使用v-cloak相同的效果。

//html内容<div id="app" v-text="msg"></div>

v-html会将文本中的html解析为html标签，然后渲染到页面中。

//html内容<div id="app" v-html="msg"></div>

//vue实例中data部分内容data: {msg: 'hello<mark>vue.js<mark>'}

_柒柒_Shelly
关注
专栏目录
Vue2.0快速上手-重要知识点罗列-系列一
JackieDYH的博客
07-31 1396
Vue2.0快速上手 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .giti
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue学习笔记
weixin_53288602的博客
09-22 484
Vue学习笔记
vue知识归纳最近复习笔记
最新发布
m0_68271787的博客
07-04 932
在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
vue学习笔记1
08-08
在“vue学习笔记1”中，我们主要探讨了在Vue环境中设置登录页面的过程，包括背景色设置、登录框样式、全局样式配置以及Less loader的安装和使用。 首先，Vue CLI是Vue项目的基础脚手架，它提供了一种快速初始化项目...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue笔记
RecordStudy
07-29 492
Vue.js 组件非常类似于自定义元素。有几个关键的不同： ①Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。Vue.js 组件也可以放在原生自定义元素之内 ②Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换   通过构造函数Vue创建实例化Vue对象   
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值