基于 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: {
//异步方法
}
})