2. 技术
    3. Vue学习笔记1-初识

    Vue学习笔记1-初识

    技术2025-07-30  16

    背景介绍

    Vue.js是目前最火的一个前端框架

    React是目前最流行的一个前端框架，除了可以开发网站，还可以用来开发APP

    Vue.js介绍

    Vue.js是一套构建用户界面的框架，只关注视图层

    特点：

    易上手便于与第三方库或既有项目整合（Vue有配套的第三方库，可以整合起来做大型项目的开发）

    为什么要学习流行框架

    企业：使用这些框架，对于企业来说可以提高开发效率，提升开发效率的发展历程： 原生的JavaScript由于兼容性问题比较麻烦于是就产生了一些库 - > jQuery 之类的类库 但是渲染页面不是很方便，于是就出现了一些模板引擎 - > 前端模板引擎 主要解决了DOM的操作-> Angular.js/ Vue.js/ React.js 这些框架解决了DOM的一些不必要操作，比如重复渲染，提升了性能与效率;

    个人： 提升自身能力，从而提升市场竞争力。

    双向数据绑定的概念

    出发点：通过框架提供的指令，前端程序员只需要关心数据的业务逻辑，不在关心DOM是如何渲染的了。

    框架和库的区别

    框架

    是一套完整的解决方案，对项目的侵入性交大，项目如果需要更换框架，则需要重新架构整个项目。

    库（插件）

    提供一个小的功能，对项目的侵入性比较小，如果某个库无法完成某些需求，可以很容易切换到其他库，比如：

    从jQuery切换到Zepto从EJS 切换到 art-template

    MVC 和MVVM

    MVC

    MVC是后端的分层开发概念

    M - model 处理数据CRUD

    V - view 视图层

    C - controller 控制层，处理业务逻辑

    以Node.js为例：

    app.js 是项目的入口模块，一切的请求入口，无路由分发的功能需要调用router.js模块进行路由的分发处理；

    controller层：

    router.js 是路由分发处理模块，只负责路由分发不处理业务逻辑，业务逻辑需要调用controller模块进行处理；

    Controller 业务逻辑处理层，该模块封装了一些具体业务逻辑处理的操作，只负责处理业务，不处理数据的CRUD，对数据的CRUD需要调用Model层

    Model层： 只负责操作数据库，执行sql语句，进行数据的CRUD(create read update delete)

    View视图层： 用户界面

    MVVM

    MVVM是前端视图层的概念，主要是吧每个页面都分成了 M、 V 、VM，VM 是V和M之间的调度者。

    M - - 保存的是每个页面中单独的数据（如：ajax访问接口返回的数据）；

    V - - 就是每个页面的HTML代码；

    VM - - 分割了M 和 V ，V层获取和保存数据都要通过VM层做中间处理

    MVVM提供了数据的双向绑定，数据的双向绑定是由VM提供的。

    Vue的使用方法

    下载Vue.js 并引入

    <script scr="vue-x.x.x.js"></script>

    创建页面中需要Vue控制的区域，然后创建Vue实例

    <body> <div id="app"> <p> {{msg}} </p> </div> <script> //这里的vm就是MVVM 中的VM调度者 上面的区域就是 V var vm = new Vue({ el: '#app',//el 是element 当前Vue实例要控制页面上的区域 id data: { // 存放的是 el中需要要用到的数据 这里 的data 就是当前页面的数据 (M) msg: 'hello Vue' // 通过Vue提供的指令，就能渲染到页面上，不再手动操作DOM元素了,只需要在上面的p标签中写{{msg}}就可以了 }) </script> </body>

    1.v-cloak

    v-cloak 主要是解决插值表达式的闪烁问题（网速比较慢时上面代码{{msg}}会出现在页面上，只有网络请求完成时才会消失，也就是插值表达式占位问题）注：这条学习视频是2017年10月的，现在是2020年5月试了一下不加v-cloak也不会出现闪烁，不知道是不是最新版的vue.js解决了该问题

    使用方法：

    <style> [v-cloak] {/*在此处设置display 设置为none*/ display: none; } </style> <body> <div id = "app"> <p v-cloak><!-- 此处增加v-cloak属性--> {{msg}} </p> </div> <script> var vm = new Vue({ el: "#app", data: { msg: "hello Arvin" } }); </script> </body>

    2.v-text

    v-text 和 {{}} 插值表达式展示效果一样，只是v-text是作为元素的属性使用，且v-text不会出现闪烁（上述占位）的问题

    <p v-text="msg"> </p> <!-- 这里的效果跟上面的插值表达式一样，只是网速比较慢时，不会出现闪烁的问题-->

    但是v-text会覆盖掉元素标签包裹的内容，比如：

    <p v-text="msg"> sdgasdgadsgasdgads <!-- 加载完后 此处的信息会被替换成msg的数据--> </p> <p> sdgasdga{{msg}}sdgasdg <!-- 则不会覆盖两边的数据--> </p>

    v-text和插值表达式 渲染时，只会按照字符串的方式原样渲染，比如说数据为"

    hello h1

    ",渲染时并不是一级标题，页面展示还是"

    hello h1

    "

    3.v-html

    有上述的v-text和插值表达式不能渲染html标签元素，所以如果想渲染html元素的话，就需要使用v-html属性，比如：

    <div v-html="msg2"> </div> vue 实例的data中有如下一个字段： msg2: "<h1>Hello h1</h1>" 此时页面渲染展示的是一级标题Hello h1

    v-html和v-text一样也会覆盖掉当前元素包裹的文字信息

    4.v-bind Vue提供的属性绑定机制，缩写为":"

    v-bind是Vue中提供的用于绑定属性的指令，它后面跟的内容可以是一个合法的js表达式。比如给一个按钮设置title值，button的title属性是鼠标悬停在按钮上的提示语内容：

    <input type="button" value="按钮" v-bind:title="mytitle"/> <script> var vm = new Vue({ el: "#app", data: { mytitle: "我是自定title" } }); </script>

    通过给input标签的title属性前加上 v-bind: 后就实现了 title属性跟 mytitle变量值之间的一个绑定，会把等号后面的内容当做一个js表达式来执行的，比如 v-bind:title = “mytitle+‘Hello’”。鼠标悬停的时候会出现提示“我是自定titleHello”

    上面的书写方式可以简写，简写方式：v-bind:title 可以写为 :title , 因此‘’v-bind:属性名称‘’只需要一个冒号紧跟着需要绑定的属性名称就搞定了。

    5.v-on 事件绑定 vue提供的事件绑定机制，缩写为 “@”

    Vue中使用v-on实现事件的绑定机制，后面跟的是你需要调用的方法的方法名称，一点击事件click为例

    <input type="button" value="按钮" v-on:click="show"> <script> var vm = new Vue({ el: '#app', data: { msg: '123', msg2: 'sdgasd' }, methods: {//Vue 对象中的methods属性中定义了Vue实例所有可以调用的方法 show:function(){ alert("Hello myshow") } } }); </script>

    当然还可以添加其他的常用事件如mouseover等等。v-on:可以缩写为@ 比如 v-on:click 缩写为@click

    事件修饰符

    .stop 阻止冒泡 使用方式 ，例如点击事件 @click.stop 这样就阻止了事件冒泡.prevent 阻止默认事件 比如阻止a标签的跳转行为，只触发点击事件不跳转，可以设置 @click.prevent=“linkClick”.capture 添加事件侦听器时使用事件捕获模式 ,作用是从外向内捕获，比如点击外层div想触发内部按钮的点击事件，只需要将div的点击事件设置为 @click.capture 这样，div点击事件触发后，也会触发其包裹的按钮的事件了。.self 只当事件在该元素本身（比如不是子元素）触发时触发回调 ，作用是只有触发了自己的事件才会执行，不管冒泡和捕获都不执行， 比如给div加了@click.self 这时点击没有做阻止冒泡修饰的按钮时，不会发生div的事件被触发的事情，也就是说，该修饰符，实现了对当前元素阻止冒泡和阻止捕获的行为。.once 事件只触发一次 使用该修饰符，只会触发一次事件处理函数，事件修饰符是可以串联的，比如上面的a标签可以设置只有一次触发事件函数时是阻止默认事件的@click.prevent.once，这样第一次点击时触发事件处理函数且不跳转，再点击时就不触发事件处理函数，且跳转到指定链接了。

    6.vue 示例中的属性和方法调用

    如果想在vue示例中获取data的数据或者methos中的方法，必须通过this.属性名或方法名才能访问到，这里的this就是new出来的Vue实例对象。

    vm实例会见厅自己的data中所有数据的改变，如果数据发生改变就会自动把最新的数据同步到页面中去，无需考虑手动dom操作来渲染页面。

    <div id="app"> <input type="button" value="开始" @click="start"> <input type="button" value="停止"> <h4>{{msg}}</h4> </div> <script> var vm = new Vue({ el: '#app', data: { msg: '跑马灯效果的文字。。。！', intervalId: null//在data中定义定时器的id }, methods: { start() { if (this.intervalId != null) { return; } this.intervalId = setInterval(() => {//箭头函数可以改变this的指向，让内部的函数的this指向外部的this var sta = this.msg.substring(0, 1); var end = this.msg.substring(1); this.msg = end + sta; }, 400); }, stop() { if (this.intervalId != null) clearInterval(this.intervalId); this.intervalId = null; } } }); </script>

    Vue指令之v-model 双向数据绑定

    v-bind 只能实现数据的单向绑定，v-bind:value=“msg” ,从M自动绑定到V ，无法实现数据的双向绑定

    只需要将表单元素中设置v-model=“msg” 不要写成：v-model:value="msg"这样就实现了数据的双向绑定，表单元素内容被修改后

    所以，通过v-model可以实现表单元素和Model中数据的双向数据绑定。即View中的数据改变会自动改变Model的数据，然而Model的数据会自动更改View中的数据。

    注意：v-model智能运用在表单元素中（input(radio,text,address,email…) / select / checkbox / textarea）

    在Vue中使用样式

    1.使用v-bind对class属性进行绑定

    数组 ：数组中元素是类名，必须要用双引号包裹数组，数组元素是类名，类名要用单引号 <h1 :class="['red','thin']">H1</h1> 数组中使用三元表达式： <h1 :class="['red',falg?'active':'']"></h1> 判断flag为true的时候使用active样式，false的时候不用,是空 数组中嵌套对象代替三元表达式，增强可读性 上面的三元表达式方式还可以写成对象的方式，如下面的方式： 在数组中使用对象来代替三元表达式： <h1 :class="['red',{'active':flag}]"></h1>判断flag为true的时候使用active样式 直接使用对象 <h1 :class="{red:true,italic:true,active:true,thin:true}"></h1> 使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号可不带引号，所以这里就没写引号。属性的值是一个标识符 或者可以写成如下的方式： <h1 :class="classObject"></h1> <script> vue 实例中的data中的数据： data:{ classObject = {red:true,italic:true,active:true,thin:true} } </script>

    2.使用内联样式

    直接在元素上通过:style(即v-bind:style) 的形式属性样式对象，注意如果属性名称里有短横线，该属性一定要加单引号，为了防止出错，就都加单引号就好了。 <h1 :style="{'color':'red','font-size':'24px','font-weight':'200'}"> This H1 </h1> 将样式队形，定义到data中直接使用:style进行应用即可：

    在data中定义样式对象

    data: { styleObj: {{'color':'red','font-size':'24px','font-weight':'200'}} }

    在元素中，通过属性绑定的形式，将样式对象应用到元素中：

    <h1 :style="styleObj">Hello H1</h1> 在 :style 中通过数组引用多个data上的样式对象：

    在data中定义样式：

    data: { styleObj: {'color':'red','font-size':'24px','font-weight':'200'}, styleObj2: {'font-style':'italic'} }

    在元素中通过属性绑定的形式引用：

    <h1 :style="[styleObj, styleObj2]"> Hello H1</h1>

    v-for指令

    1.v-for 遍历普通数组

    <p v-for="item in list"> <!-- 如果需要索引的话，可以改为 "(item, i ) in list"--> {{item}}<!-- 索引：{{i}}--> </p> <script> data:{ list:[1,2,3,4] } </script>

    2.v-for可以遍历对象数组：

    <p v-for="(item , i) in list"> 姓名： {{item.name}} ， 索引 ： {{i}} </p> <script> data:{ list : [ {name:'sagda',age:16},{...} ] } </script>

    3.v-for 可以遍历对象：

    <p v-for="(val,key) in user"><!-- 在遍历对象时括号里还可以有第三个参数索引， (val, key , i)--> 键：{{key}} ---- 值： {{val}} <!-- 索引 ： {{i}}--> </p> <script> data: { user: { id: 1, name: 'Hesa', gender: 'man' } } </script>

    4.v-for 迭代数字

    从上面我们看v-for中的in后面可以是普通数组，对象数组，对象，它后面还可以直接跟数字，表示循环的次数,默认循环开始值为1，不是0：

    <p v-for="count in 10"> 这是第{{count}} 次循环<!-- count 从 1 开始 执行到10 --> </p>

    5.v-for 总key使用的注意事项

    在2.2.0+ 的版本，当在组件中使用v-for时，key是必须的,主要是为了实现列表项的唯一性标识。

    1.v-for 循环的时候，key属性只能使用number 或 string；

    2.key在使用的时候必须使用v-bind: 属性绑定 即:key=""

    如下：

    <p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} ---- {item.name} </p>

    加上key主要是为了标识列表项的唯一性，比如说多选框错位问题。

    v-if 和 v-show

    <input type="button" value="显示/隐藏" @click="flag=!flag"> <h3 v-if="flag">v-if H3</h3> <h3 v-show="flag">v-show H3</h3> <script> data: { flag:true } </script> v-if 每次都会重新删除/创建元素 , 切换性能消耗高，如果元素涉及到频繁的切换，最好不用v-ifv-show 不会进行dom的删除和创建操作，只是切换了元素的display:none样式， 有较高的初始渲染消耗。
    Processed: 0.013, SQL: 9