Vue知识

<select class="form-control" @change="jumpType(selected)" v-model="selected">
    <option>article</option>
    <option>images</option>
    <option>videos</option>
</select>
jumpType(name){
    this.$router.push({path:'/edit/'+name});
}

组件的拆分

views 存放页面在src下；src路径可以用@（webpack.base.conf.js下配置了）
<template>一定要有根元素
assets 放静态资源，偏向组件的资源，img通过webpack打包时会转换为base64的形式
static 考虑资源本身
import ‘../base.css’ 直接写地址，全局样式写在main.js里

程序之所以能访问，vue内置了一套express 框架，是基于node.js提供的一套服务,会开启一个端口

var router=express.Router();//拿到服务端路由
var goodsData=rquire('./../mock/goods.json');//goodsData对象
router.get("/goods",function(req,res,next){
     res.json(goodsData);//直接输出json
})
app.use(router)；//使用路由

组件里data是一个函数，去return一个object，每个组件里数据是独立的

//只作用在局部只作用在局部
<style scoped>
/*css code*/
</style>

//main.js
watch:{
    $route(to,from){
      if(from.name=="Detail"){
        document.getElementById('st-2').style.display="none";
      }
      if(to.name=="Detail"){
        document.getElementById('st-2').style.display="block";
      }
    }
  }

//外链js
export default {
  components: {
   'remote-js': {
    render(createElement) {
      return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
    },
    props: {
      src: { type: String, required: true },
    },
  },
  },
}

//使用方法：
<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js"></remote-js>

export default new Vuex.Store({
    //...
})
等价于
const store = new Vuex.Store({
    //...
})
export default store//把store暴露到全局

页面标题修改

//1
Vue.directive('title', {//自定义指令，定义页面标题
    inserted: function (el, binding) {//元素插入父节点时调用
        document.title = binding.value
    }
});
<div v-title="'首页'"></div>

//2 路由里设置元信息
meta: {
    title:'购物车'
},

//通过路由设置标题
router.beforeEach((to, from, next) => {
    if (typeof to.meta.title !== 'undefined') {
        document.title=to.meta.title;
    }
    next();
})

directive 自定义指令是用来操作DOM的。

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})
<input v-focus>
//input标签自动获得标签

钩子函数
bind：在该元素绑定指令时调用且仅调用一次，用于初始化
inserted：元素插入父节点时调用（可能仍在虚拟Dom中）
update：模板更新时调用
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子参数
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">