vue入门

写在前面：

1.安装使用参照官方文档
2.这里只记录vue重点

笔记开始：

一个vue组件的data必须是一个函数，这样每个实例维护的是一份被返回对象的独立拷贝，如果没有这条规则，数据的修改会影响所有的其他实例。

如果模板属性是变量的话，vue 2.0中使用v-bind的方式来绑定变量，可以省略v-bind，例如

列表渲染：比如数组中直接采用赋值的方式不会造成列表的渲染，this.list[1] = {name:'hello',age:23}，这种写法不会触发重新渲染，可以使用vue全局的set方法来做，Vue.set(this.list,1,{name:'hello',age:23})

条件渲染：v-if,v-show，v-if表示标签在文档流中直接被删除，v-show表示标签还存在文档流中，通过display:none/block来切换。

vue插槽
如果组件内容过多，通过props属性显得太过臃肿，可以使用vue插槽slot，将slot元素作为承载分发内容的出口，比如很多个dialog，各个dialog内容不一样.

vue中触发自定义事件是子组件通过this.$emit('事件名','传递的参数')，例如this.$emit('my-event',this.hello)定义事件，父组件通过@my-event="responseEvent"监听事件。

//子组件 child



//父组件

计算属性和数据监听
computed计算属性可以根据其他属性来动态的更新计算属性，也可以使用method方法的方式来直接执行函数，二者的区别是：data里面的属性不更新的时候计算属性是不会更新的，但是method方法的方式不论data里面的属性是否更新都会执行函数。
如果计算属性里面没有引用data里面的属性，那计算属性从第一次加载完组件之后是永远定死的不会变动的，但method方法的方式每次都会执行，比如获取时间戳new Date()。

属性监听watch：就是监听vuejs的变量，每当这个变量被改动的时候，都去执行特定的操作

export default {
  watch:{
   myVal(newVal,oldVal){
      this.getList();
    }
  },
  methods:{
      getList(){
    }
  }
}

父子组件通信
父组件向子组件传递消息是通过属性prop，子组件向父组件传递消息是通过发布emit事件。

vue高级功能－过渡/动画
给需要过渡的元素外层加一个transition标签,这是vue内置的一个组件，两种实现过渡的方式：
css:enter时：v-enter v-enter-active leave时：v-leave v-leave-active

  
show

js:通过v-bind:is,v-if ,v-else ,v-show来动态加载组件

vue命令查看

//vue命令列表
E:\workCode\vuedemo3>vue --help
Usage: vue  [options]
Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

//vue可以使用的模板列表
E:\workCode\vuedemo3>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping

vue项目搭建
vue项目初始化通过vue-cli初始化

//安装vue-cli
npm install vue-cli -g
//初始化项目，模板选webpack
vue init webpack my-vue
//安装项目依赖
npm install
//在localhost启动测试服务器
npm run dev
//生成线上目录（部署）
npm run build

总结：通过一个轮播小组件来感受一下vue

//app.vue


// components/slides.vue

参考：https://cn.vuejs.org/v2/guide/installation.html