vue

简介

Vue.js (读音 /vjuː/，类似于view) 是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

使用

1.直接<srcipt>引用
直接下载js文件并用<script>标签引用，Vue会被注册一个全局变量

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

2.CDN
推荐：https://cdn.jsdelivr.net/npm/vue，会保持和 npm 发布的最新的版本一致。
3.NPM
在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

$ npm install vue

命令行工具

通过命令行工具，可以快速搭建大型单页易用。

npm install --g vue-cli
vue init webpack my-project //创建基于webpack模板新项目
cd my-project
npm install
npm run dev

文件结构如下

WechatIMG252.jpeg

指令

• v-bind
  动态绑定DOM元素属性，元素的属性由vm实例中的data属性提供。例如

<img v-bind:src='url'>
    new Vue({
        data: {
            url: 'http://xxx.jpg'        
        }    
})

v-bind 可以简写 为： 即 <img :src='url'>

• v-model
  实现双向数据绑定

  <label>name:</label><input type="text" v-model="name" />
//js
 export default {
        name: 'About',
        data: function() {
            return {
                name: '1231'
            };
        },
    }

• v-if/v-else/v-show
  根据条件展示对应的模板内容。v-if 和 v-show 的区别在于，v-if在false的情况下不进行编译，v-show 会在编译后将元素隐藏掉。v-if的切换消耗比v-show高。

<input type="button" v-if="show" value="yes" />
<input type="button" v-else value="no" />
//js
 export default {
        name: 'About',
        data: function() {
            return {
                show: true
            }
        },
    }

• v-for
  用于数据循环

 <el-table-column v-for="column in columns" v-bind:key = "column.prop" :prop=
    "column.prop" :label="column.label">
 </el-table-column>

• v-on
  用于事件绑定

<button v-on:click='click'></button>

 export default {
        name: 'About',
        data: function() {
            return {
                show: true
            },
        method :{
            click: () => {...}
        }
    }

可以简写为

<button @click='click'></button>

• v-text
  参数为string 更新元素的textContent ,{{}}编译后一致。可以避免闪烁。

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

• v-html
  更新元素的innerHTML 和v-text类似

<div v-HTML='htmlStr'></div>

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

未完