Vue基础（环境配置、内部指令、全局API、选项、内置组件）

　　介绍

　　Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

      这段话是官网上对vue的介绍，对这句话里的几个关键字解释如下：

　  渐进式框架 —— 不需要把整个框架的所有东西都用上，可以根据实际情况选择你需要的部分。

　  自底向上逐层应用 —— 由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。

      只关注视图层  —— 以往的开发多属于MVC模式，是Model View Controller的缩写，MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。但vue是属于MVVM，是Model-View-ViewModel的简写。它是一种基于前端开发的架构模式，其核心是提供对 View 和 Model 的双向数据绑定，这使得Model 的状态改变可以自动传递给 View。Vue.js就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。

　  单页面应用 ——  只有一个html文件。在vue里，我们可以把很多页面以组件的方式根据路由的变化来替代，只展示在一个html文件中。

 

 

    计算属性和侦听器

计算属性：它是个对象，里面可以写我们自定义的函数，而这个函数名。可以直接用模板语法使用，如同data里的数据一样。当函数中所依赖的数据发生改变，就会触发这个计算属性，重新计算该函数的并返回值。

侦听器：也是个对象，里面的函数都是用data里的数据来命名的。即可以理解成监视这个数据，当这个数据发生改变，即触发该函数。

         虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

 

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

 

• 修饰符

  • .lazy：取代 imput 监听 change 事件。
  • .number：输入字符串转为数字。
  • .trim：输入去掉首尾空格。

• 文本区域加入数据绑定

  <textarea cols="30" rows="10" v-model="message"></textarea>

• 多选按钮绑定一个值
  

  <h3>多选按钮绑定一个值</h3>
  <input type="checkbox" id="isTrue" v-model="isTrue">
  <label for='isTrue'>{{isTrue}}</label>

• 多选绑定一个数组
  

  <h3>多选绑定一个数组</h3>
  <p>
      <input type="checkbox" id="JS" value="JS" v-model="web_Names">
      <label for="JS">JS</label><br />
      <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
      <label for="Panda">Panda</label><br />
      <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
      <label for="PanPan">PanPan</label>
      <p>{{web_Names}}</p>
  </p>

• 单选按钮绑定
  

  <h3>单选按钮绑定</h3>
  <input type="radio" id="one" value="男" v-model="sex">
  <label for="one">男</label>
  <input type="radio" id="two" value="女" v-model="sex">
  <label for="two">女</label>
  <p>{{sex}}</p>

搜索

复制