VUE笔记

missingkings
159 阅读4分钟

什么是VUE

Vue是一套用于构建用户界面的渐进式框架。只关注视图层，是前端三大框架之一(另外两个是:Angular.js、React.js)

vue安装

方式一：直接CDN引入(不推荐)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载引入(推荐)
开发版本
 生产版本

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

#最新稳定版
$ npm install vue

框架和库的区别

框架：是一套完整的解决方案；对项目的入侵性较大，项目如果需要更换框架，则需要重新架构整个项目。
库(插件)：提供某一个小功能，对项目的入侵性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求

MVC和MVVM的区别

MVC:

  • 是后端的分层开发概念
  • Model：主要处理数据的CRUD
  • View:视图层，前端的页面
  • Controller:是应用程序中处理用户交互的部分

MVVM:

  • MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来

MVVM模式的组成部分：

  • 模型(Model)：模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）
  • 视图(View)：就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）
  • 视图模型(viewModel)：视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信
  • 绑定器：声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。[8] 绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素

Hello Vue

<!-- html代码 -->
<div id="app">
 {{ message }} //在此用到的是差值表达式在下面会详细说明
</div>

var app = new Vue({
 el: '#app',
data: { message: 'Hello Vue!' }//这里的data就是MVVM中的M(Model) 存储页面上的数据
})

差值表达式

  • 差值表达式是VUE实现的前提
  • {{表达式}}//差值表达式是由两个花括号镶嵌组成，注意是两个花括号镶嵌组成 -{{'字符串'}}//字符串加上单引号即可

VUE实例

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始

var Vm=new Vue({
  //选项
})

VUE基本指令

以下的内容来自本站原文链接

指令

  • 解释：指令(Directives)是带有V-前缀的特殊属性
  • 作用：当表达式的值改变时，将其产生的连带影响，响应式的用作DOM

常用指令

  • v-text
  • v-html
  • v-bind

v-text

解释：更新元素的textContent

<h1 v-text="msg"></h1>

v-html

解释：更新元素的innerHTML

<h1 v-html="msg"></h1>

v-bind

  • 作用：当表达式的值改变时，将其产生的连带影响，相应式的用作DOM
  • 语法： v-bind:title="msg"
  • 简写：:title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      // el 用来指定vue挂载到页面中的元素，值是：选择器
      // 理解：用来指定vue管理的HTML区域
      el: '#app',
      // 数据对象，用来给视图中提供数据的
      data: {
        url: 'http://www.baidu.com'
      }
    })
  </script>

v-on

  • 作用：绑定事件
  • 语法：v-on:click="say"or v-on:click="say('参数'，$event)"
  • 简写:@click="say"
  • 说明：绑定的事件从methods中获取
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething（“123”）"></a>

 <script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      // methods属性用来给vue实例提供方法（事件）
      methods: {
        doSomething: function(str) {
          //接受参数，并输出
          console.log(str);
        }
      }
    })
  </script>

事件修饰符

  • .stop阻止冒泡，调用event.stopPropagation()
  • .prevent阻止默认事件，调用event.preventDefault()
  • .captrue添加事件侦听时使用事件捕获模式
  • .self只当事件在该元素本身(比如不是子元素)触发时触发回调
  • .once事件只触发一次

v-model

  • 作用：在表单元素上创建双向数据绑定
  • 说明：监听用户的输入事件以更新用户数据
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-for

作用基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

key属性

  • 推荐：使用v-for的时候提供key属性，以获得性能提升。
  • 说明：使用key,Vue会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

样式处理 -class和style

  • 说明：这两个都是HTML元素的属性，使用v-bind,只需要通过表达式计算出字符串结果即可
  • 表达式的类型：字符串、数组、对象
  • 语法：
<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if和v-show

  • 条件渲染
  • v-if:根据表达式的值的真假条件，销毁或重建元素
  • v-show:根据表达式之真假值，切换元素的display CSS属性

提升用户体验

  • 这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}-起作用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
  • 防止刷新页面时，出现{{msg}}等数据格式
<div v-cloak>
  {{msg}}
</div>

提升性能：v-pre

  • 说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译
<span v-pre>{{this will not be compiled }}</span>

提升性能：v-once

  • 说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容跳过。这可以用与优化更新性能。
<span v-once>This will never change: {{msg}}</span>
avatar
文章
阅读
粉丝