初学者的vue笔记

搭建

• 最新稳定版
• $ cnpm install vue
• 全局安装vue-cli
• $ cnpm install –global vue-cl
• 创建一个基于webpack的文件
• $ vue init webpack my-project
• cd my-project
• npm install
• npm run dev
  

  注意：Use ESLint to lint your code? n

.vue文件中：

• HTML css js均在.vue文件下
• template标签定义模板
• script标签定义js
• style标签定义css

好处是可以在一个文件中同时编写html,css,js（当然还有更多好处，但是初学目前只接触了一点点，后面会补充）

代码块

new Vue({      el: '#app',    //el：将此对象装载的位置放于..把 Vue 实例挂载到一个已有内容的元素上      template:'<div>{{ fruit }}</div>',  //模板      data:{          fruit:'apple'  //data的数据将会设置到代理的对象中      }           })

data赋值的时候尽量避免以上这样赋值，不然如果有两个相同的模板，返回值都一样了，应该data(){return{}}这样赋值

Vue.component('my-header',{    template:'<p>this is my header</p>'})  //component组件可以扩展HTML元素，封装可重用代码,这个属于全局组件var myHeader = {    template:'<p>this is my header</p>'}new Vue({    el:'#app',    components:{        //my-header将只在父模板可用        'my-header':myHeader    }   })props 可以是数组或对象，用于接收来自父组件的数据。computed计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。watch:一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。主要用于保留组件状态或避免重新渲染。如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。

transition:
name - string，用于自动生成 CSS 过渡类名。例如：name: ‘fade’ 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 “v”。

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点
  
  
  
  v-enter-active，v-leave-active是过度的类名，v-enter,v-leava-to是进入和离开一瞬间的类。
  transition默认的模式是先进新的后进旧的
  相同元素过度的时候需要添加一个key属性

<p v-if="show1" key='1'>i am show</p><p v-else key='2'>not in show</p>

//自定义指令的插入，如v-cssdirectives:{    css:{      inserted(el,binding){      // console.log(el,bind)      let styleObj = binding.value  //color:"red"      console.log(styleObj)      let arr = []      for (let key in styleObj) {        arr.push(key + ':' + styleObj[key])      }      arr = arr.join(';')      console.log(arr)      el.style.cssText = arr      }    }  },

关于vue-router

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。
vue-router的引用方式：

\\在main.js中：import VueRouter from 'vue-router'Vue.use(VueRouter)let router=new VueRouter()\\在new Vue函数中添加router，

vue-resource实现获取AJAX数据（只能get()数据），json-server模拟数据

created: function(){        this.$http.get('getList').then(function(data){            console.log(data)        },function(err){            console.log(err)        })    },//在webpack.dev.conf.jsconst express = require('express')const app = express()var appData = require('../data.json') //加载本地数据文件var seller = appData.seller //获取对应的本地数据var goods = appData.goodsvar ratings = appData.ratingsvar apiRoutes = express.Router()app.use('/api', apiRoutes)    //找到devServerbefore(app) {      app.get('/api/seller', (req, res) => {        res.json({          errno: 0,          data: seller        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用      }),      app.get('/api/goods', (req, res) => {        res.json({          errno: 0,          data: goods        })      }),      app.get('/api/ratings', (req, res) => {        res.json({          errno: 0,          data: ratings        })      })    }