vue搭配webpack在Node.js环境中运行

vue基本结构

var vm = new Vue({
  el: '#app',
  data: {
  //页面使用要使用到的数据
  msg: '你好'
  },
  methods: {
  //封装函数
  },  
  watch: {
   'msg': function(newValue,oldValue){
     // 监听msg值的变化
    }
  },
  computed: {
    //计算属性,当作普通data数据使用
    count(){
       return 0
     }
  },
  filters: {
  //过滤器
  },
  directives: {
  //指令
  },
  components: {
  //自定义实例内部私有组件
  },

  beforeCreate: function() {
  //【创建】起始生命周期，还没有data和methods 
  },
  created:  function() { 
   //【创建】实例已经在内存中创建
  },
  beforeMount:  function() { 
  //【创建】完成了模板的编译
  },
  mounted:  function() { 
  //【创建】已经将编译好的模板，挂载到了页面制定的容器中显示
  },

  beforeUpdate:  function() { 
  //【运行】状态更新之前执行此函数,还没有开始渲染DOM节点
  },
  update:  function() { 
  //【运行】更新完DOM节点后调用此函数
  },

  beforeDestroy:  function() { 
  //【销毁】实例销毁前调用，实例仍然可用
  },
  destroy:  function() { 
  //【销毁】Vue实例销毁后调用
  }
});

不要给body添加#app直接成为Vue控制区域
缩进统一使用两个空格
在使用v-for循环的模板要添加:key="key" 表示key可以是Number|String
如果页面列表数据是通过接口获取的，可以将调用接口的函数放在created()钩子函数中
vscode需要安装Vetur和Vue 2 Snippets插件
组件内部添加的样式默认是全局的，需要在style中添加属性scoped，这样就只能作用到组件内
v-for列表对象可以是一个函数，便于页面内搜索

MVVM分层概述

为了让我们开发更加方便，MVVM提供了数据的双向绑定【由VM提供双向绑定】。
MVVM是前端视图层的分层开发思想

M：数据操作层，每个页面中单独的数据
V：就是每个页面中的HTML结构
VM：是一个调度者，每当V层存取数据时，都要通过VM做中间处理【new Vue()就是VM层】

app.js项目入口模块，一切的请求都要先进入这里进行处理
router.js路由分发处理模块，不能处理业务逻辑
Controller业务逻辑处理层，不设计CRUD处理
Model只负责操作数据库，执行对应的sql语句
C：Create
R：Read
U：Update
D：Delete

常用函数用法

@click.prevent="fun()"事件自身。
v-if每次都会重新删除或创建元素，有切换性能消耗。
v-show不会重新操作DOM元素，只是切换了元素的显示隐藏，有较高的初始渲染的消耗。
.padStart(maxLength, fillString='')字符串前面自动补全

键盘修饰符：


Vue.config.keyCodes.f2 = 113;

自定义指令：

Vue.directive('focus', {
  bind: function(el) {
    //当指令绑定到DOM元素时就会执行，el是原生的js对象
  }
})

vue-resource接口请求

//设置默认请求域名
Vue.http.options.root = 'http://.....com/'
//发起一个get 接口请求
this.$http.get('url/a/b').then(fuction(res){ });
this.$http.get('url').then(res=>{  });

动画transition

完整动画只需要设置样式和类即可，半场动画需要设置动画钩子函数

Vue组件化

通过.vue文件，来创建对应的组件：

template 结构
script 行为
style 行为

一个简单的中间注册，注册组件的时候命名使用的驼峰法，在使用的时候使用-连接;
无论哪种方式创建出来的组件，必须有且只能有唯一的根元素



var com1 = Vue.extend({
  template: 'abc'
});
Vue.component(''myCom1, com1)

可以指定模板标签，使用template标签包裹

组件中的data 用法与Vue实例一致

私有组件定义

new Vue({
  components: {
    //自定义实例内部私有组件
    com1: {
      //template: 'abc'
      template: '#temp1'
      //必须是一个函数，防止引用类型 数据互串
      data: function(){ return {}; }
    }
  }
})

组件切换，修改:is属性值就可以实现组件切换

通过 props数组，完成父子组件传值

components: {
  com1: {
    data(){
      return {msg: '你好'}
     },
    props: ['接收父组件值的属性名称']
  }
}

子组件执行父组件中的函数show(data)[data可接收子组件中的参数]，可以通过在父组件标签中添加事件，子组件中执行methods 中自定义函数调用this.$emit('func', data)

操作DOM元素，也可以直接操作子组件，获取数据和执行子组件中的函数


//可在函数中操作DOM元素
this.$refs.myDiv.innerText

路由

登录
注册

这里是路由组件占位

webpack前端项目构建工具

基于Node.js开发的一个前端工具，解决各个包之间的复杂依赖关系。实现资源的合并，打包，压缩，混淆等诸多功能。webpack官网

打包es6脚本js文件方式

1.直接执行打包语句

webpack '要打包的路径' '打包后的路径'

2.配置自动打包，项目根目录中添加webpack.config.js，执行webpack就可以自动打包脚本到目标路径js中

const path = require('path')

module.exports = {
  entry: path.join(__dirname, ' 入口文件地址路径'),
  output: {
    path: path.join(__dirname, '打包输出地址'),
    filename: 'bundle.js'
  }
}

3.实时监听自动编译打包webpack-dev-server工具

npm i webpack-dev-server -D

在package.json 的scripts中添加"dev": "webpack-dev-server"。(- -open打开浏览器，- -port 3000设置端口3000，- -contentBase src自动进入src目录，- -hot热更新)
执行npm run dev自动打包脚本

安装`html-webpack-plugin`插件

可以将物理页面打包到内存中，打包的 js会自动追加到内存页面中。需要修改webpack.config.js文件：

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, ' 指定模板页面地址')
      filename: 'index.html'
    })
  ]
}

打包非js文件访问 Node.js与webpack搭配创建项目

在webpack中使用vue

// 这样导入的包是不完整的，无法像html中一样使用
import Vue from 'vue'

需要修改webpack.config.js文件：

module.exports = {
  resolve: {
    alias: {//设置vue结尾被导入包的路径
      "vue$": "vue/dist/vue.js"
    }
  }
}

使用vue文件渲染组件需要配置：

npm i vue-loader vue-template_compiler -D

{ test /\.vue$/, use: 'vue-loader'}

在webpack中，需要使用render()渲染vue文件中的组件

import login from './login.vue'

new Vue({
  el: '#app',
  render: c => c(login)
})

./login.vue文件内容：

在webpack中使用vue总结

1.安装vue包：npm i vue -s
2.安装解析.vue文件loadernpm i vue-loader vue-template-complier -D
3.在main.js中，导入vue模块 import Vue from 'vue'
4.定义一个 .vue结尾的组件，其中组件有三部分组成 template script style
5.使用import login from './login.vue'导入这个组件
6.创建vm实例 new Vue({ el: '#app'})
7.在页面中功能创建一个id为app的div元素，作为vm实例控制区域。

暴露成员：
Node.js中：module.exports = { }
es6中：export deault 和 export

export var title = 'abc'
export default { }

// 引用文件中：
import abc,{title} from '上面的路径'
//可以使用as起别名导入
import abc,{title as bb} from '引入文件路径'

导入模块
Node.js中：var 名称 = require('模块标识符')
es6中：import 模块名称 from '模块标识符' 和 import '表示路径'