enoyao

## 插件 使用的时候记得用Vue.use()来调用 ```js // 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块 var Vue = require('vue') var VueRouter = require('vue-router') // 不要忘了调用此方法 Vue.use(VueRouter) ``` [vue-router](https://github.com/vuejs/vue-router) [vue-resource](https://github.com/vuejs/vue-resource)

## 使用SASS 首先在**webpack.base.conf.js**文件里面添加`sass-loader`，就是下面这一句， 然后安装模块，`sudo npm install node-sass` ```css { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ``` 这一句可以让我们webpack把我们的scss格式转化为css格式 然后我们就可以在组件中写scss格式的样式，注意是scss，因为.scss 和.sass是sass的两种格式，.scss 是类css的语法，.sass是缩进语法 ```css div{ color: #008080; } ``` 所以如果你是sass的语法的话你就不能有缩进 ```css div{color:...

## 使用vux [官方中文文档](https://vuxjs.gitbooks.io/vux/content/install/umd.html) [官方DEMO](https://vux.li/?x-page=oschina#!/) `sudo npm install vux` 我们可以在.vue组件中想要引入vux组件的地方这样引入 ```html import { Style, Group, Cell } from 'vux'; ``` 然后注册 ```js export default { components: { wsheader, Style, // style...

## 获取指令所在的标签其他属性值 添加属性params，并接收一个带属性的数组，我们就可以在里面用this.params获取对应的值 ```js directives: { wsscat: { params: ['a', 'b'], bind: function() { console.log("wsscat") }, console.log(this.params) } } ``` 视图 ```html {{name}} ```

## 自定义Touch指令 ```js new Vue({ el: '#demo', data: { name: 'wsscat' }, methods: { }, //私有的指令 directives: { touch: { params: ['a', 'b'], bind: function(value) { console.log(this.params) function direction() {...

## 自定义指令 自定义指令提供一种机制将数据的变化映射为DOM行为，也就是说我们可以用这个自定义指令来操作这个dom `Vue.directive(id, definition)`方法注册一个全局自定义指令 ```js Vue.directive('mydir', { bind: function() { this.el.style.backgroundColor = '#eee' this.el.addEventListener("click", function() { alert("123") }) } }) ``` 我们就可以在组件的模版中把这个自定义指令以`v-`加上组件名字来绑定这个指令到该组件 ```js var wsscat = Vue.extend({ template: "I'm...

## 过滤器 视图如下，我们过滤器中可以用filterBy和orderBy处理数组，filterBy是筛选对象数组中对应属性的关键词，orderBy是根据属性的值进行排序，过滤器支持链式调用，用管道符号隔开每个过滤器 ```html {{todo.content}} ``` ```js data: { order: -1, todos: [{ id: 2, content: 'Learn JavaScript' }, { id: 3, content: 'Learn Vue.js' }, { id: 1, content:...

## 混合 _混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。_ 可以简单理解为组件之间复用相同的属性 ```html // 定义一个混合对象 var myMixin = { template: "{{msg}}", created: function() { this.hello() }, methods: { hello: function() { console.log('hello from mixin!') } } } var...

## 路由在组件间传递参数 `Go to Foo` 如上我们可以在v-link指令上加一个query属性，当我们链接的时候我们的路由就会变成这样`route.html#!/foo?a=1&b=2` 此时我们就可以在路由中带上参数传递到另一个组件 而我们就可以在组件中接受这个参数 ```js var Foo = Vue.extend({ template: 'This is foo!', route: { data: function(transition) { this.$http.get('test.php', { params: { a: transition.to.query.a } }).then(...

# Compile ```js Document {{name}} function compile(el, vm) { // 选取节点 var $el = document.querySelector(el); // 框架选项，比如data，methods等 var $vm = vm; // 创建fragment保存html文档 var $fragment = document.createDocumentFragment(); // 一会儿再遍历真是DOMJ节点时候需要的容器 var...