vue学习笔记
追加新数组:
push() pop() shift() unshift() splice() sort() reverse()
Vue.set(vm.newsList,7,{title:‘123’,new:true,id:7})
vm.$set(vm.newsList,8,{title:‘这是第八个’,new:false,id:1})
vm.newsList.splice(9, 1, {title:‘第九个’})
v-show :display:none v-if: 移除元素
v-on:修饰符:
.stop .prevent capture .self .once .passive
保存切换input中的值不变:
<keep-alive>
<component :is="type" ></component>
</keep-alive>
const cmpOne = {
template:`<div>组件1:<input type="value"></div>`
}
const cmpTwo = {
template:`<div>组件2:<input type="value"></div>`
}
new Vue({
el:'#app',
components:{
cmpOne,
cmpTwo
},
data:{
showOne:true,
type:'cmp-one'
},
methods:{
changeCmp(){
// this.showOne = !this.showOne;
this.type = this.type == 'cmp-one' ? 'cmp-two' : 'cmp-one'
}
}
})
vue生命周期:onload onshow onready
vue-cli 学习:
命令:
如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x),需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载
安装vue cli3.0+:npm install -g @vue/cli
查看版本:vue --version
创建项目:vue create hello-world
npm install -g @vue/cli //安装vue-cli
vue --version // 查看vue-cli 版本
vue create 文件名 //创建文件
code . // 打开文件(在vscode)
npm run serve //运行 vue
运行单个vue文件:
vue serve 文件
npm install -g @vue/cli-service-global
cd src
cd components
vue serve 文件
创建vue项目:(图形界面)
vue ui
vue3 退回 vue2 :
npm install -g @vue/cli-init
vue init webpack my-project
vue路由:
vue add router //路由安装
用户代码片段: ctrl+shift+p
文件–首选项–用户代码片段-- vue 打开vue.json
scoped : 样式独立
vuex 安装: vue add vuex
npm install -save vuex
vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。
vuex主要由五部分组成:state、getters、mutation、action、mudle组成。
axios 使用:
npm install axios
美团pc开发:
渡一接口后台:http://api.duyiedu.com
vue init webpack mt-app //vue 2.0
打包: npm run build
其他相关链接:
less笔记:https://blog.csdn.net/ws19900201/article/details/104579352
vue-cli创建项目:https://blog.csdn.net/ws19900201/article/details/99948384
VUE中的 redirect (重定向)初学者的坑。。:https://blog.csdn.net/ws19900201/article/details/98201466
更多关于vue的学习可以看博客vue分组中的文章。。