vue2.0笔记总结

BvemiL

已于 2023-02-18 10:52:17 修改

阅读量180

点赞数 2

文章标签： javascript vue.js

于 2023-02-18 10:34:22 首次发布

本文链接：https://blog.csdn.net/m0_74084957/article/details/129097562

版权

一.介绍

Vue是一个渐进式JavaScript 框架,用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

渐进式：主张最少。最大的特点是没有ＤＯＭ操作。主张只操作数据。

优点：

1.轻量级的数据框架

2.双向数据绑定

3.提供了指令

4.组件化开发

5.客户端路由

6.状态管理：同cookie、session、本地存储类似

缺点：

1.Vue 底层基于 Object.defineProperty 实现数据响应式，而这个 api 本身不支持 IE8 及以下浏览器，所以Vue不支持IE8及其以下浏览器；

2.Vue 打造的是SPA(单页面应用)，所以不利于搜索引擎优化(SEO)； single page application

以前是每一个显示的页面都应该有一个html才能设置不同的title、description、keywords

app做项目时，必须使用Vue的脚手架创建项目，但脚手架就是基于webpack的一个脚手架。

3.由于 CSR的先天不足，导致首屏加载时间长，有可能会出现闪屏。client side render: 客户端渲染( 后端提供json数据，前端拼接字符串，再渲染 ) server side render: 服务端渲染( json+html拼接字符串都在后端做，返回给前端 )

核心：数据驱动（数据改变驱动我们视图的改变）组件系统
MVVM：M-model模型、V-view视图、VM-viewModel 视图模型

模型（model）通过了视图模型决定了视图(view)

视图(view) 通过视图模型修改模型 (model)

视图模型是模型和视图之间的桥梁。

什么是mvc，什么是mvvm？

MVC：Model View Controller 模型层视图层控制器，一种软件设计典范。

Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据
View：视图层，用户界面渲染逻辑，通常视图是依据模型数据创建的
Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据MVC的思想：Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

MVVM：Model-View-ViewModel 模型-视图-视图模型，是一种设计思想。

Model：层代表数据模型，修改和操作业务逻辑
View: 代表视图，它负责将数据模型转化成展现出来
ViewModel：是一个同步View 和 Model的对象（桥梁），View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

优点：分离视图和模型。低耦合，可重用性，独立开发，可测试，双向数据绑定

二.Vue安装

1. cdn 引入 [不推荐]：线上的一个网址

 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

2. npm[推荐]：在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

可在代码js部分写入这行代码:

Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

三.起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

let app = new Vue({
    
})

插值运算符{{}}

<body>
<div id="app">
  <div>{{msg}}</div>
  <div>{{num}}</div>
  <div>{{num-2}}</div>
  <div>{{num+2}}</div>
  <div>{{num*2}}</div>

</div>
<!--cdn引入-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--本地引入-->
<!--<script src="../js/vue.js"></script>-->
<script>
  // 插值表达式可以进行简单的运算
  let app = new Vue({
    el:"#app",
    data:{
      msg:'hello word',
      num:22
    }
  })
</script>
</body>

总结：

data与el的2种写法

1.el有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

2.data有2种写法

(1).对象式

(2).函数式

如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否会报错。

在简单的vue实例应用中，两种写法几乎是没有什么区别的，因为你定义的vue实例对象不会被复用。但是如果是在组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况。

3.一个重要的原则:

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

四.vue指令

vue指令，一般写法 v-xxx

1.v-html、v-text

两者的区别是，v-html可以渲染data里面的css内容和样式，v-text只能渲染data里的内容。

<body>
<div id="app">
    <div v-text="msg"></div>
    <div v-text="msg2"></div>
    <div v-html="msg"></div>
    <div v-html="msg2"></div>
</div>
<!--cdn引入-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--本地引入-->
<!--<script src="../js/vue.js"></script>-->
<script>
    // 插值表达式可以进行简单的运算
    let app = new Vue({
        el: "#app",
        data: {
            msg: 'hello word',
            msg2: '<h2>我是标签</h2>'
        }
    })
</script>

2.v-cloak

防止页面加载时出现闪烁问题。

<div id="app" v-cloak>
	{{msg}}
	{{msg}}
	{{num}}
</div>

3.v-text

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id="app">
    <div v-text="msg"></div>
</div>
<script>
    // 插值表达式可以进行简单的运算
    let app = new Vue({
        el: "#app",
        data: {
            msg: 'hello word',
        }
    })
</script>

4.v-html

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app">
    <div v-html="msg"></div>
</div>
<script>
    // 插值表达式可以进行简单的运算
    let app = new Vue({
        el: "#app",
        data: {
            msg: '<h2>我是标签</h2>',
        }
    })
</script>

比较{}、v-text与v-html的区别

默认v-text是没有闪烁问题的，{{}}存在闪烁问题。
v-text会覆盖掉元素中原本的内容，但是{{}}只会替换自己的这个占位符。
前两个回向页面渲染普通文本，后者会向页面输出html。
与v-text一样，v-html也会覆盖掉元素中原本的内容。

5.v-pre

跳过编译过程

<div v-pre>{{msg}}</div>
<script>
    // 插值表达式可以进行简单的运算
    let app = new Vue({
        el: "#app",
        data: {
            msg: '<h2>我是标签</h2>',
        }
    })
</script>

6.v-once

执行一次编译（当个数据发生改变时，插值处不再改变数据）

<div v-once>{{msg}}</div>
<script>
    // 插值表达式可以进行简单的运算
    let app = new Vue({
        el: "#app",
        data: {
            msg: '<h2>我是标签</h2>',
        }
    })
</script>

7.v-model

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用

<div id="app">
        <div> {{msg}}</div>
        <div>{{num}}</div>
        <!--数据双向绑定-->
        <!-- 1.当视图发生变化的时候数据也会发生变化   -->
        <!-- 2.当数据发生变化的时候视图也会发生变化   -->
        <div>
            用户名：
            <input type="text" v-model="username">
        </div>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                num: 100,
                msg: 'hello word',
                username: ""
            }
        })
    </script>

v-model.修饰符="vue数据变量"

.number 输入字符串被 parseFloat() 解析转为有效的数字,如果这个值无法被 parseFloat() 解析，则会返回原始的值
.trim 去除首尾空白字符
.lazy 在change时触发而非input

8.v-on

用过来绑定事件。可以简写为@click。

<body>
    <div id="app">
         <!-- <button v-on:click="myClick">切换</button> -->
        <button @click="myClick">切换</button> //绑定事件简写
        <div v-show="flag">
            {{msg}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"你好",
            flag:true
        },
        methods: {
            myClick(){
              console.log(666);
              this.flag = !this.flag;             
            }
        },
    })
</script>

9.v-show、v-if

v-if：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-show：v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

<body>
    <div id="app">
        <h1 v-show="flag">{{msg}}</h1>
        <h1 v-if="flag">哈哈，没想到吧</h1>
        <h1 v-else>真的没想到</h1>
    </div>
</body>

<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:"我来了",
            flag:false
        }
    })
</script>

v-show和v-if的区别：

主要区别：

（1）“v-show”只编译一次；而“v-if”不停地销毁和创建
（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据
（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作

本质区别：

（1）v-show本质就是标签display设置为none，控制隐藏
（2）v-if是动态的向DOM树内添加或者删除DOM元素

编译区别：

v-show其实就是在控制css；v-show都会编译，初始值为false，只是将display设为none，但它也编译了。
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-if初始值为false，就不会编译了。

10.v-for

用于循环的数组里面的值可以是对象，也可以是普通元素

<ul id="example-1">
   <!-- 循环结构-遍历数组  
	item 是我们自己定义的一个名字  代表数组里面的每一项  
	items对应的是 data中的数组-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
   
  }
})
</script>

key的作用：Vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法，我们将在下节详细讲解key值的意义。