Vue：很实用的小知识

 

基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

先配置开发环境：
npm install vue -g

安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g
 

手机端运行node.js服务
步骤1.将index.js中的host的值改为‘0.0.0.0’ 
步骤2.修改package.json中script下dev的值，在后面加入--host 0.0.0.0 也可以解决

render(){
    creatElement();
}
事件修饰符：@click.stop="handle",阻止默认时间冒泡。
键值修饰符：@keyup.13="handle",指定键触发事件。
组件渲染，驼峰变横岗。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
为了输出真正的 HTML，你需要使用 v-html 指令。

对于任何复杂逻辑，你都应当使用计算属性 computed。

// 搜索框自动过滤提示功能
computed:{
	Flist(){
		return this.list.filter((list)=>{return list.title.match(this.search)})		
	}
},

配置babelrc文件，按需引入文件
"plugins": [
  "transform-vue-jsx", 
  "transform-runtime",
  ["import",{
  "libraryName":"vant",
  "style":true
    }]
  ]

父子组件通信：

子组件发布：

methods:{
	child(){
	  this.$emit('tofather',this.msg,true)  //传值
	}
}

父组件订阅：

<child @tofather="todo"></child>
methods:{
  	todo(msg){
  		console.log(msg)
  	}
  }

Vue-Router：

this.$router.go(-1);返回上一页

滚动行为：scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }

子路由：

children:[{
        path:'/son1',
        component:son1
      },{
        path:'/son2',
        component:son2
      }]

路由别名：

alias:'/',

VueX：

状态管理

export default new Vuex.Store({
  state: {

     //数据

  },

getters:{

    //数据修饰

}
  mutations: {

     //方法

  },
  actions: {

     //异步方法

  }
})