vue基础

数据绑定：{{ data }}

生命周期：比较常用的有

• created，实例创建完成后调用

• mounted，el挂载到实例上后调用，一般第一个业务逻辑会在这里开始

• beforeDestroy，实例销毁之前调用

例：

<div id="app">{{ date }}</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
     date: new Date()
  },
  mounted: function () {
     var that = this;
     this.timer = setInterval(function() {
        that.date = new Date()
     }, 1000);
  },
  beforeDestroy: function() {
     if (this.timer) {
        clearInterval(this.timer);
     }
  },
});
</script>

过滤器：用于处理简单的文本转换，{{ date | formatDate }} ，实现复杂的变换应使用计算属性。

指令与事件：v-开头

• v-bind用于动态更新HTML元素上的属性，如v-bind:href，或者:href
• v-on用于绑定事件监听器，如v-on:click，或者@click

计算属性

用于表达式运算，可以依赖多个数据，只要其中任一变化，计算属性就会重新执行，视图也会更新。

计算属性可以依赖其他计算属性，也可以依赖其他实例的数据。

<div id="#app1"></div>
<div id="#app2">{{reversedText}}</div>
<script>
var app1 = new Vue({
   el: "#app1",
   data: {
      text: '123,456'
   }
});
var app2 = new Vue({
   el: "#app2",
   computed: {
      reversedText: function() {
          return app1.text.split(',').reverse().join(',');
      }
   }
});
</script>

计算属性缓存：调用methods里的方法也可以与计算属性起到同样的作用。那么为什么还需要计算属性呢？原因是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，即形成绑定数据。而methods不同，只要重新渲染，它就会被调用。

当遍历打数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。

v-bind及class与style绑定

使用v-bind指令来绑定class和style的多种方法。

数组语法：给:class绑定一个数组，应用一个class列表

<div id="app">
   <div :class="[activeCls, errorCls]"></div>
</div>
<script>
   var app = new Vue({
      el: "#app",
      data: {
          activeCls: 'active',
          errorCls: 'error'
      }
   })
</script>

渲染后的结果为：

<div class="active error"></div>

绑定内联样式：使用v-bind:style

<div id="app">
    <div :style="styles">文本</div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
     styles: {
         color: 'red',
         fontSize: 14+'px',
     }
  }
})
</script>

内置指令

v-cloak，解决初始化慢导致页面闪动的最佳实践

v-once，只渲染一次

条件渲染指令，v-if，v-else-if，v-else

v-show，用法与v-if基本一致，只不过v-show改变元素的CSS属性display

列表渲染指令v-for，"book in books"，当数组更新后会渲染视图

方法与事件，v-on

修饰符，<a @click.stop="handle"></a>

表单与v-model

使用v-model完成表单数据双向绑定

<input type="text" v-model="message">
<p>{{message}}</p>

单选按钮，不需要v-model，直接使用v-bind绑定一个布尔类型，<input type="radio" :checked="picked">

复选框，<input type="checkbox" v-model="checked" id="checked">

选择列表，<select v-model="selected"></select>

v-model绑定的值是一个静态字符串或布尔值，但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

组件详解

P100 组件能提高重用性，让代码可服用。有全局注册和局部注册两种方式。

<div id="app">
   <my-component></my-component>
</div>
<script>
   Vue.component('my-component', {
      template: '<div>这里是组件的内容</div>'
   });
   var app = new Vue({
      el: '#app'
   });
</script>

渲染后的结果是：

<div id="app">
  <div>这里是组件的内容</div>
</div>

有些情况下会受到HTML的限制，比如<table>内规定只允许是<tr>、<td>等，这种情况下，可以使用is属性来挂载组件

<table>
   <tbody is="my-component"></tbody>
</table>

组件中还可以向vue实例那样使用其他的选项，比如data、compute、methods等。但是在使用data时，data必须是函数，然后将数据return出去，例如：

Vue.component('my-component', {
   template: '<div>{{message}}</div>',
   data: function() {
      return {
        message: '组件内容'
      }
   }
});

使用props传递数据，完成组件间通信。props的值，一种是字符串数组，一种是对象。由于HTML不区分大小写，驼峰命名的props名称要转为短横分隔命名，例如：

<div id="app>
   <my-component warning-text="提示信息"></my-component>
</div>
<script>
   Vue.component('my-component', {
      props: ['warningText'],
      template: '<div>{{ warningText }}</div>'
   });
   var app = new Vue({
      el: '#app'
   })
</script>

 Vue 2.x通过props传递数据是单向的

一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字型。

组件通信，组件关系可以分为父子间、兄弟间和跨级间。通过事件$on和$emit

可使用this.$parent直接访问父实例，使用this.$children访问它所有的子组件。

使用slot分发内容：props传递数据、events触发事件和slot内容分发就构成了Vue组件的3大API。

其作用域在父组件上

自定义组件

分为全局注册和局部注册，只将component改为directive

Render函数

前面组件模板都是写在template选项里的，但是在Vue.js编译时，都会解析为Virtual Dom。它会进行Diff运算，来更新只需要被替换的Dom，而不是全部重绘。

createElement用法，

函数化组件，

JSX，使用createElement写起来比较复杂。需要在webpack里配置插件babel-plugin-transform-vue-jsx

实战P170

使用webpack

• 前端自动化工程主要解决一下问题：
• javaScript、CSS代码的合并和压缩
• CSS预处理：Less、Sass、Stylus的编译
• 生成雪碧图（CSS Sprite）
• ES 6 转 ES 5
• 模块化

主要适用场景是单页面富应用（SPA）

$mkdir demo && cd demo

$ npm init   # 初始化配置

$ npm -i -D webpack-cli

$ npm install webpack --save-dev  # 本地局部安装webpack

$ npm install webpack-dev-server --save-dev # 可在开发环境中提供很多服务，如启动

$ vim webpack.config.js

var path = require('path');

var config = {

   entry: {  // 入口文件  main.js

          main: './main'

   },

   output: {  // 编译后文件存储位置和文件名

         path: path.join(__dirname, './dist'),

         publicPath: '/dist/',

         filename: 'main.js'

   }

};

module.exports = config;

$ vim package.json # 添加快速启动的webpack-dev-server服务的脚本

{

   "scripts" : {

      "test": "echo \"Error: no test specified\" && exit 1",

      "dev": "webpack-dev-server --host 127.0.0.1 --port 8888 --open --config webpack.config.js"

   },

}

$ npm run dev

$ webpack --progress --hide-modules # 打包

每个文件都是一个模块，比如css、js、htmll等，需要不同的加载器来处理

$ npm install css-loader --save-dev

$ npm install style-loader --save-dev

$ webpack.config.js

module: {
         rules: [
             {
                 test: /\.css$/,
                 use: [
                     'style-loader',
                     'css-loader'
                 ]
             }
         ]
   }

$ npm install extract-text-webpack-plugin --save-dev  # 将所有css收集到一个.css文件

使用.vue文件需要先安装vue-loader等加载器

创建.babelrc文件，写入babel配置，webpack会依赖此文件。

用于生产环境，

插件

通过Vue.use()来使用插件

前端路由，即由前端来维护一个路由规则。实现有两种，一种是利用url的hash，就是常说的锚点（#）,JS通过hashChange事件来监听url的改变；另一种就是HTML5的Histroy模式，它开起来像普通网站那样，以"/"分割，没有#，但页面并没有跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，都指向同一个html文件。因此，SPA只有一个html，整个网站所有的内容都在这一个html里，通过JS来处理。

$ npm install --save vue-router

vue-router有两种跳转页面的方法，

第一种是适用内置的 <router-link>组件，它会被渲染为一个<a>标签。

第二种是用router实例的方法，this.$router.push("/user/123");

状态管理与Vuex，与bus类似，可以更好地管理和维护整个项目的组件状态。主要用在大型单页应用中。

$ npm install --save vuex

使用store仓库，数据保存在Vuex选项的state字段内。

在组件内，store的数据只能读取，改变数据的唯一途径就是显示地提交mutations.

mutations是Vuex的第二个选项，用来直接修改state里的数据，this.$store.commit("xxxx")

Vuex还有其他3个选项可以使用：getters、actions、modules。

getters（内部计算属性方法）

actions与mutation很像，但是是异步操作，通过$store.dispatch触发

mudules用来将store分割到不同模块。当你的项目足够大时，可以将store分割成多个模块。

实战

跨域限制是服务端的一个行为，当开启对某些域名的访问限制后，只有同域名或指定域名下的页面可调用，这样相对来说更安全，图片也可以防盗链。跨域限制一般只在浏览器端存在，对于服务端或iOS、Android等客户端是不存在的，使用代理是开发过程中常见的一种解决方案。

如使用基于Node.js的request库做代理

使用Nuxt.js实现服务端渲染，很多网站之所以使用SSR，主要目的是做搜索引擎优化（SEO）。https://nuxtjs.org/