vue下载与部分指令详解

目录

vue

下载地址

前端框架

MVC与MVVM框架

Vue使用

Vue.js指令

​编辑

v-if

v-else

v-show

v-on

v-model（表单绑定）

v-bind

v-for

v-text

v-model 指令扩展

---

vue

下载地址

官方入门：https://cn.vuejs.org/

API 文档：https://cn.vuejs.org/v2/guide/

GitHub 库：https://github.com/vuejs/vue

----------------------------------------------------------------------------------------

前端框架

        封装与业务无关的重复代码，形成框架

        框架的优势： 提升开发效率、提高代码重用性、使前端开发变得简单

MVC与MVVM框架

MVC框架：链接

MVVM拆分解释为：

• Model:负责数据存储
• View:负责页面展示
• View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

使用MVVM框架的优势：

• 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
• 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

---

Vue使用

1.将下载号的vue.js引入项目.

<script type="text/javascript" src="vue.js"></script>

2.创建 view 视图

<div id="box"> 

      <h1> {{ msg }} </h1>

</div>

3.通过vue实例化一个vue对象

var vm = new Vue({

  el: '#box',  // el：‘选择器’

  data: {

       msg: 'hello, world!'

  },

  // 实例中，可以设置很多配置项

  });

4.使用数据

• 将 data 中的变量 msg 放在双花括号内
• 修改 data 中的 msg ，会同 #box 内的步显示在页面中

实现原理分析：

DOM监听：

视图层发生变化，DOM监听到之后，会传到逻辑层进行处理。

数据绑定：

        逻辑层把数据处理完成之后，通过数据绑定，把处理后的结构返回给视图层。

插值表达式

        使用双大括号 { } 来包裹 js 代码构成插值表达式。

插值表达式作用

        将双大括号中的数据替换成对应属性值进行显示。

---

Vue.js指令

指令（Directive）是特殊的带有 v- 前缀的特性

v-if

    根据表达式的真假来插入和删除元素。

<h1 v-if="isShow">表达式的值为真，我就能显示</h1>

v-else

        为v-if添加一个“else块”，v-else元素必须立即跟在v-if元素的后面，否则不能被识别

<h1 v-if="isShow">表达式的值为真，我就能显示</h1>

<h1 v-else>v-if不成立的时候，我就显示出来了</h1>

v-show

        控制切换一个元素的显示和隐藏

<div class="div1" v-show='isShow'></div>

v-on

        HTML 元素绑定事件监听

                事件名称 =‘函数名称()’

               @事件名称 =‘函数名称()’

<button v-on:click='fn()'>toggle</button>

//v-on: 可以简写成 @

<button @click='fn()'>toggle</button>

v-model（表单绑定）

        能轻松实现表单输入和应用状态之间的双向绑定

双向绑定

        指的是我们在vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。

v-model = 变量

        v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上

v-bind

        绑定 HTML 元素的属性

<img v-bind:src="imageSrc"> 等价于  <img :src="imageSrc">   //绑定一个属性

//绑定多个属性

<div v-bind:class="{'textColor':isColor, 'textSize':isSize}">多个样式的绑定</div>

v-for

        遍历 data 中的数据，并在页面进行数据展示

v-for = ' (item, index) in items '

item 表示每次遍历得到的元素

index 表示 item的索引，可选参数

items表示数组或者对象

v-text

        更新元素的文本内容

v-text=‘msg’

        与双大括号语法功能类似

• 与插值表达式的区别
  • 插值表达式后面可以继续添加内容
  • v-text指令会全部替换标签中的内容

v-model 指令扩展

• v-model 与布尔值绑定